Vue学习三：v-on:click命令及v-html命令学习
本文为博主原创，未经允许不得转载：
第一部分： v-on:click 命令讲解及使用方法
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<!--
表达式形式:vue指令语法 v-指令名字+:+指令的参数=指令的表达式
-->
<button v-on:click="showsomething">click me!!</button>
<!--
v-on:click具有很多事件修饰符属性。比如：
v-on:click.stop
v-on:click.prevent
-->
</div>
<script>
var vm = new Vue({
el:"#app",
methods : {
showsomething:function(){
alert("show something");
}
}
}) </script>
</body>
</html>
其执行的效果如下图所示，在浏览器测试段加载，触发点击事件会执行自定义的事件：
第二部分：v-html主要作用为渲染页面元素：
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app" >
{{ html }}
<!--将其渲染为页面-->
<div v-html="html"></div>
{{ message }}
<button v-on:click="message='123'">click me!</button>
<!--只渲染一次-->
<div v-once>
{{message}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
html:"<h1>hello</h1>",
message:"liuluwei" //data中的数值为初始化值，加载时第一次渲染会采用data中的设值
}
})
</script>
</body>
</html>
在浏览器端加载，执行效果如图所示：
当触发点击事件之后，click me前面的字符串就会变为点击事件中定义的内容123.
Vue学习三：v-on:click命令及v-html命令学习的更多相关文章
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- vue.js 三种方式安装
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 总结Vue第三天：模块化和webpack模块化打包：
总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...
- 一天带你入门到放弃vue.js(三)
自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...
- Android JNI学习(三)——Java与Native相互调用
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
随机推荐
- numpy元素级数组函数
一元函数 abs, fabs 计算整数.浮点数或复数的绝对值.对于非复数值,可以使用更快的fabs. sqrt 计算各元素的平方根.相当于arr ** 0.5 sqare 计算各元素的平方.相当于ar ...
- c# 静态方法和数据
c#所有方法都必须在类的内部声明,但如果把方法或者字段声明为static就可以使用,类名代用方法或者访问字段. 在方法中声明一个静态变量a 和一个静态的aFun方法.下面是在主函数中调用. 从上图可以 ...
- 20165215 2017-2018-2《Java程序设计》第一周学习总结
20165215 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 跟随网课学习了<Java2 实用教程>的第一章,进行了基础的编译练习 在Ubun ...
- Java 多线程并发编程面试笔录一览
知识体系图: 1.线程是什么? 线程是进程中独立运行的子任务. 2.创建线程的方式 方式一:将类声明为 Thread 的子类.该子类应重写 Thread 类的 run 方法 方式二:声明实现 Runn ...
- 使用Wisdom RESTClient如何在Linux和Mac上获取测试报告和API文档？
使用Wisdom RESTClient自动化测试REST API,生成REST API文档, 需要先执行命令java -jar restclient-1.2.jar启动Wisdom RESTClien ...
- 登陆 全站 user
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join( ...
- sqlalchemy多对多查询
# coding:utf-8 from sqlalchemy import create_engine, Column, String, Integer, ForeignKey, Table from ...
- MySQL乐观锁和悲观锁的概念和原理
乐观锁:在取数据时不加锁,等处理完逻辑的时候,查看是否与上一次相同,若相同则更新,若不同则拒绝. 悲观锁:在取数据时就加上锁,只有更新完数据之后,别的用户才可以进行读. (个人总结)
- easyui以及js前端开发常见问题、用法整理（最重要的样式和图标自定义）
自定义图标 iconCls 所有属性值枚举: icon-add icon-print icon-mini-add icon-cvs icon-play icon-refresh icon-edit i ...
- 【题解】Luogu UVA12345 Dynamic len(set(a[L:R]))
原题传送门 这题要用动态莫队,我博客里有介绍 这道题和luogu P1903 [国家集训队]数颜色 / 维护队列差不多,解法就在上面那篇博客里qaq 主要的问题是如何排序? 排序有三个关键字: 1.左 ...