vue vue

一.模板语法：允许开发者把DOM绑定在最底层Vue实例上。在底层实现上，Vue会将模板编译成虚拟DOM渲染函数，Vue可以计算出最少需要重新渲染多少组件，并减少DOM操作。

　　1.插值

　　　　#文本

 　　　　数据绑定最常见的就是Mustache语法{{msg}}的文本插值。你也可以用v-once指令来定义一次性插值，数据改变插值处的内容也不会改变，但是请注意，这会影响到该节点的其他插值。

　　　　//html      

 

　　　　我在这里给span标签添加了一个点击事件，运用了v-once指令，点击span标签内容仍不会改变。

 

　　　　#v-html

 

　　　　双大括号输出的只是文本，想输出html代码，需要用到v-html指令

　　　　//html和js         

 

　　　　浏览器里，上面输出的就是纯文本，下面就是把aaa里的东西变成了html代码再渲染到了浏览器上，可以看到字体变成了红色。

　　　　！注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

 

　　　　#特性

 

　　　　Mustache语法不能作用在HTML特性上，需要用v-bind指令来进行操作，

　　　　         //点击后                 

 

　　　　v-bind也可以用来绑定布尔值

　　　　   isButtonDisabled=true  //已禁用      　　　　　　　　#JavaScript表达式 　　　　所有的数据绑定都支持JavaScript表达式：　　　　{{number 10}}　　　　//html和js      　　　　

　　　　//html js css   　　　　{{ok ? "yes" : "no"}}     　　　　ok布尔值为true时显示yes            ok布尔值为false时显示no  　　　　　　　　{{ message.split.reverse.join }}   　　　　//html和js    　　　　　　　　有个限制，每个绑定只能包含单个表达式，下面例子不会生效　　　　//这是语句不是表达式　　　　{{ var a = 1}}　　　　//控制流不会生效，三元表达式可以　　　　{{ if{return  true} }} 　　2.指令 　　　　#参数 　　　　指令是带有v-前缀的特殊特性，指令特性的预期值是单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用与DOM。　　　　

123

　　　　这里的v-if就是根据see值的真假来决定插入或移除

　　　　一些指令可以接收一个参数，在指令名称后以冒号表示。例如v-bind可以响应式的更新HTML特性：　　　　

　　　　在这里href是参数，告知v-bind指令该元素的href特性与表达式url的值绑定。　　　　另外一个例子：

    v-on是监听DOM事件的指令，在这里参数是监听的事件名。 　　　　#动态参数 　　　　从2.6.0开始，可以用方括号[]括起来的JavaScript表达式作为一个指令的参数，　　　　

　　　　这里的name会作为一个JavaScript表达式进行动态求值，求的值会作为最终参数来使用。例如你的data里面name的值为href，那这个绑定就等价于v-bind：href。　　　　同样的也可以使用动态参数为一个动态事件名绑定处理函数，　　　　

　　　　当event的值等于click时，v-on:[event]等价于v-on:click。　　　　动态参数预期会求出一个字符串，异常情况下值为null，这个特殊的值可以用作显性移除绑定。任何非字符串类型的值都会触发一个警告。　　　　    //上面的是没有加.number，打印出来的是字符型String。下面的是加上.number，打印出来是数值型Number。 　　　　.trim 　　　　如果想自动过滤掉用户添加的首尾空白字符，在v-model后加.trim　　　　                        //这两个输入时都在前面加了若干空格，后面一个是用了.trim修饰符的效果，过滤掉了前面加的空格     　　　　3.缩写　　　对于一些常用操作v-会变得非常繁琐，因此vue为 v-bind 和 v-on 提供了特定简写： 　　   1. v-bind： 　　　　//正常写法　　　　

　　　　//缩写　　　　

 　　   2. v-on: 　　　　//正常写法　　　　

　　　　//缩写　　　　

 二. 计算属性和监听器　　　　1.计算属性　　　　模板内的表达式很便利，但是设计它的初衷是为了简单运算，在模板中放入太多逻辑会让模板过重切难以维护。例如:　　　　{{ msg.split.reverse.join }}　　　　在这个地方就不是简单的声明式逻辑，对于任何复杂逻辑，都应当使用计算属性。 　　　　#基础例子　　　　　　　　

 

 　　　　在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

 　　　　

 

　　　　你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

　　　　

　　2. 在v-for 里使用对象

　　　　用 v-for 遍历对象：

　　　　

 

 

 

　　　　这里改变了原数组，但是因为是计算属性，没有setter函数不能改变它的依赖，所以number不会改变，可以正常遍历。

 

　　　　在计算属性不适用的情况下 你可以使用一个方法：

　　　　

 

 

 　　　　注意，这里使用的方法必须是返回一个新数组的方法，使用改变原数组但不返回新数组的方法，会无限更新循环。

　　　　

　　6. 在v-for 里使用值范围

　　　　v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

　　　　

{{ n }}

　　7. 在