[TOC] ## 前言 `v-`前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，`v-`前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的[单页面应用程序 (SPA - single page application)](https://en.wikipedia.org/wiki/Single-page_application)时，`v-`前缀也变得没那么重要了。因此，Vue 为`v-bind`和`v-on`这两个最常用的指令，提供了特定简写 ### -插值 数据绑定常见的就是双花括号`{{ hellow }}` ``` <标签> {{ hellow }} </标签> ``` 修改js中hellow的值标签处也会发送变化更新update 通过`v-once`你也可以执行一次性的插值当数据改变时插入处不更新 只渲染元素和组件**一次**。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 ``` //单个元素 <span v-once> this will never change: {{msg}} </span> //有子元素 <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> //组件 <my-component v-once :comment = 'msg'></my-component> //指令 <ul> <li v-for =' i in list' v-once>{{ i }}</li> </ul> ``` ### `v-html` 和`v-text` 这两货看上去和JavaScript那两很像啊！实际用途也是差不多的我们先举出JavaScript的来看看 > * `innerHTML`：获取从对象的起始位置到终止位置的全部内容，包括HTML标签。当内容都是文本的时候，可以把这个属性当做`textContent`属性来用 > * `innerText`：获取从对象的起始位置到终止位置的内容，但它不会包括HTML标签 > * `outerHTML`：除了包含`innerHTML`的全部内容外，还会包含对象标签本身 > * `textContent`：设置或返回指定节点的文本内容，以及它的所有后代。有时候，此属性可用于取代`nodeValue`属性，但请记住**此属性同时会返回所有子节点的文本**。得到的结果跟`innerText`的结果是一样的。如果是设置，则原本的子元素会被同时替换掉 > * `nodeValue`：和`textContent`很像，都是用来获取某个元素中的内容，不过`nodeValue`并不能直接操作某个DOM元素，它只能用来获取某段文本节点中的内容 > * `outerText`：和`outerHTML`有同样的功能，它们都包括自身，不同的是`outerText`获取的是元素内容，而`outerHTML`获取到的内容包括元素 > 著作权归大漠所有。 举个栗子🌰 ``` <div id = 'app'> <h1 v-text ="'Username:' + name"></h1> </div> ``` 此处要注意的是双引号是vue设定的边界你要在里面输入文本还需要单引号否则会报错的这里的`v-text`感觉和`{{ name }}`功能相同`{{}}`代表的就是`""`，所以在`v-text=""`中，我们在内容里面就不需要再写`{{}}`了，直接写数据属性就行了。 ### `v-text`也可以和`v-for`一起愉快玩耍 这两货结合起来也是好用的不要不要的 ``` <li v-for='(value,key) in person' v-text="key + ':' + value"></li> ``` ``` var app = new Vue({ el: '#app', data: { person: { name: '大漠', set: '男', age: 30 } } }) ``` 接下来到`v-html`出场啦 ``` <div v-html = 'cat'></div> //js var app = new Vue({ el: '#app', data:{ cat:"<img src='cat.png'>" } }) ``` > **注意：**你不能使用`v-html`来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。-来w3cplus大漠 ### 特性 Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 `v-bind`还能指定类型如`v-bind:title="arr"`数组`v-bind:title="obj"`对象等`v-bind:href` 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，`v-bind`指令可以用于响应式地更新 HTML 特性，另一个是`v-on`他用于监听事件类似与jquery的`on` 在这`id`是参数告知v-bind绑定该id ~~~ <div v-bind:id="dynamicId"></div> ~~~ `v-bind的简写` 去掉`v-bind`即可 ``` <a v-bind:herf ='url'>...</a> <a :herf = 'url'>...</a> //简写 ``` `v-on的简写` 把`on`代替了@ ` <button v-on:click ='什么事件' >hellow</button> <button @click = '什么事件' >hellow</button> ` ### JavaScript表达式 ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} ``` 传入值进行 运算 ### 指令 在初体验中我们使用`v-`的就是指令 指令 (Directives) 是带有`v-`前缀的特殊特性 ### 动态参数 2.6.0新增括号扩起来的是动态如果data中attributename传入的是href那么就是`v-bind:href` ``` <a v-bind:[attributeName] = 'url'>...</a> ``` 同样作为监听的`on`也是如此