我们可以在官网上查看什么是模板语法：
第一种最常见的模板语法就是文本插值，就是前面知识点用到的在元素中声明变量，后面通过Vue的data参数赋值，但是文本插值时Vue提供了一个指令v-once，使用它的html标签元素在初始化后将不会有任何值的改变
第二种模板语法是html插值，它的作用是将动态的html代码生效，具体作用如下
当我们有如下代码，且目的是希望动态的插入一个html标签时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}} {{b}}
</div>
<script type="text/javascript">
var data = {message:'Hello Vue!',b:'<font color="red">html插入</font>'}
var app = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
改代码运行后效果并不理想，因为它会把标签以字符串的格式插入
如果我们想达到目标，需要使用v-html指令，告诉Vue此处插入的是html元素，而不是字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}} <p v-html="b"></p>
</div>
<script type="text/javascript">
var data = {message:'Hello Vue!',b:'<font color="red">html插入</font>'}
var app = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
我代码中的写法可能大家会看的有些别扭，代码中将font文字标签的结果赋值给了p段落标签，我想通过这种方式告诉大家，v-html指令并不一定需要你插入的标签和赋值的标签一样，因为v-html本质上是生成了一个目的标签的子标签
第三种模板语法是属性插值，它相当于jquery动态修改标签属性，比如我们需要对一个元素赋值一个id属性，我们可以在标签中写v-bind:id="one"，其中id="one"是修改的属性，该指令也可以缩写为:id="one"
第四种是表达式插值，vue支持在文本插入的基础上，插入一个表达式，比如{{num+1}}，也支持其他的表达式，如{{ok ? 'YES' : 'NO'}}、{{list.min()}}等多种多样的表达式
第五种为是否渲染模板指令，本质上就是决定一个元素是否出现在前端页面效果中
当v-if为false则不会渲染，反之则渲染
vue也可以和jquery那样为元素绑定事件，只是vue通过模板语法@事件类型来绑定一个事件，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" @click="fun1">
{{message}}
</div>
<script type="text/javascript">
var data = {message:'Hello Vue!',b:false}
var app = new Vue({
el:'#app',
data:data,
methods:{
fun1:function(){
console.log('点击事件触发')
}
}
});
</script>
</body>
</html>
前端效果如下
当我们点击文字，触发div的点击时间，控制台即可输出内容
但是vue的事件有一种特殊情况，如果父子标签都存在点击事件，当你点击子标签时，父标签的点击时间会在子标签事件执行结束后跟着执行，想排除这种情况，那么你需要在子标签绑定事件时使用@click.stop:"方法名"来表示绑定的事件执行结束后本次触发就结束了，不再执行父标签的事件
强调一点：vue绑定事件在实际开发中，方法考虑到复用，一般是Vue对象外面写方法，methods里写方法名就行，但是methods里面绝对不能给箭头函数，不然有的时候想要的效果出不来，因为vue会优化你的渲染，但是箭头函数没有this对象，导致vue优化会出问题，至于啥是箭头函数后面会说，而且聪明人应该能看懂处理@click还可以写成别的事件
@click其实是v-on:事件类型的缩写版，同时在写函数的时候Vue的事件函数中this不再用来表示触发事件的DOM对象而是Vue对象本身，要想调用触发事件的dom你需要在绑定方法的时候用一个参数接收$event传参，如下图所示
如果你用的是2.6+的版本还可以使用动态参数表达绑定的事件@[event]:，一定要区分动态参数中的event，它值得是Vue对象中data中的一个数据
最后强调一点，前面说的.stop叫做事件修饰符，不止这一个，共10个左右可以在官网查看，同时再说一遍v-on可以绑定所以事件类型，比如v-on:dblclick绑定一个双击事件，必要以为只能绑定点击事件
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
