Vue 基本指令使用（二）
1、模板语法：
使用双大括号(Mustache 语法) “{{ }}” 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。例如：
<template>
<div id="app">
<p>{{ msg }}</p>
<p>{{ 20+1 }}</p>
<p>{{ "ok" ? 'yes' : 'no' }}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
2、v-once 指令：
作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。例如：
<template>
<div id="app">
<span v-once>{{ msg }}</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'hello vue'
}
}
}
</script>
v-once 在业务中很少使用，当需要进一步优化性能时，可能会用到。
3、v-html 指令：
作用是渲染 html 内容。有的时候想输出 html ，而不是将数据解释为纯文本，可以使用 v-html：
<template>
<div id="app">
<span v-html="link"></span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
link: '<a href="#">这是一个链接</a>'
}
}
}
</script>
但是需注意的是，虽然可以直接用 v-html 指令渲染html 内容，但在服务端要对提交的html 做处理， 避免发生xss 攻击。
4、v-bind 指令：
v-bind 指令作用是动态更新 html 元素上的属性，比如 id，class，src 等。例如：
<template>
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl" />
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
url: 'https://www.github.com',
imgUrl: 'http://xxx.xxx.xx/img.png'
}
}
}
</script>
5、v-if、v-else-if、v-else 指令：
与 Javascript 的条件语句 if、else、else if 类似，Vue.js 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素组件，例如：
<template>
<div id="app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
status: 1
}
}
}
</script>
v-else-if 要紧跟 v-if, v-else 要紧跟 v-else-if 或v-if，表达式的值为真时， 当前元素／组件及所有子节点将被渲染，为假时被移除。
6、v-show 指令：
v-show 的用法与 v-if 基本一致，只不过 v-show 是改变元素的 css 属性 display。当 v-show 表达式的值为 false 时，元素会隐藏，查看 DOM 结构会看到元素上加载了内联样式 diplay:none。例如：
<template>
<div id="app">
<p v-show="status === 1">当status为1显示该行</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
status: 2
}
}
}
</script>
渲染后的结果为：
<p style="display: none;">当status为1显示该行</p>
7、v-if 与 v-show 选择：
1、v-if 和v-show 具有类似的功能，不过v-if 才是真正的条件渲染，它会根据表达式适当地销毁 或重建元素及绑定的事件或子组件。若表达式初始值为false ，则一开始元素／组件并不会渲染，只 有当条件第一次变为真时才开始编译。 2、而v-show 只是简单的css 属性切换，无论条件真与否，都会被编译。相比之下， v-if 更适合 条件不经常改变的场景，因为它切换开销相对较大，而v-show 适用于频繁切换条件。
8、v-for 指令：
（1）当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for 。它的表达式需结合in 来使用，类似 item in items 的形式。例如：
<template>
<div id="app">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
books: [
{name: '《Vue.js实战》'},
{name: '《JavaScript高级程序设计》'}
]
}
}
}
</script>
（2）在表达式中， books 是数据， book 是当前数组元素的别名， 循环出的每个＜li ＞内的元素都可以访问到对应的当前数据book 。列表渲染也支持用 of 来代替 in 作为分隔符，它更接近JavaScript 迭代器的语法：
<li v-for="book of books">{{ book.name }}</li>
（3）v- for 的表达式支持一个可选参数作为当前项的索引， 例如：
<li v-for="(book, index) in books">{{ index }} - {{ book.name }}</li>
（4）与 v-if 一样，v-for 也可以用在父标签上，将多个元素进行渲染：
<template>
<div id="app">
<ul v-for="book in books">
<li>书名：{{ book.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
books: [
{name: '《Vue.js实战》'},
{name: '《JavaScript高级程序设计》'}
]
}
}
}
</script>
（5）对象的属性也是可以遍历的，例如：
<template>
<div id="app">
<span v-for="value in user">{{ value }}</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
user: {
name: 'Tom',
gender: '男',
age: 26
}
}
}
}
</script>
渲染后的结果为：
<span>Tom</span><span>男</span><span>26</span>
遍历对象时，有两个可选参数，分别是键名和索引：
<template>
<div id="app">
<ul>
<li v-for="(value, key, index) in user">
{{ index }} - {{ key }} : {{ value }}
</li>
</ul>
</div>
</template>
（6）v-for 还可以迭代整数：
<template>
<div id="app">
<span v-for="n in 10">{{ n }}</span>
</div>
</template>
渲染结果为：
1 2 3 4 5 6 7 8 9 10
参考：
《Vue.js实战》
