vue从零开始（二）指令
一、v-text和v-html
<span v-text="msg"></span>
<div v-html="html"></div>
注意事项：
1、v-text和v-html的区别类似于innertext和innerhtml的区别，v-text只能渲染文本形式，v-html则能识别标签并进行渲染，
2、在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，千万不用在用户提交的内容上
3、在单文件组件里，scoped 的样式不会应用在 v-html 内部，可以使用全局的style或者使用vue-loader中的css modules(在webpack.config.js文件中的css-loader中添加 modules:true)
二、v-show和v-if
<h1 v-show="ok">Hello!</h1>
<h1 v-if="awesome">Vue is awesome!</h1>
注意事项：
1、 因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
2、 可以使用v-else来配合v-if，类似于js中的if else
3、 v-show 只是简单地切换元素的 CSS 属性 display
4、 v-if是惰性的，只有第一次为真的时候才渲染，v-show不管条件怎么样都会渲染
5、 v-if中的事件监听器和子组件都会进行适当的销毁和重建，而v-show只是简单的切换元素的显示隐藏
6、 v-if的特性决定在切换的时候开销比较大，所以在切换频繁的时候使用v-show，不频繁的时候使用v-if
7、 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
三、v-for和key
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
注意事项：
1、 vue的“旧地复用”：元素中的数据变化的时候元素位置不会发生变化，只是更新元素中的数据，这样的模式是高效的
2、 但是旧地复用的劣势是会打乱元素之间的依赖关系，所以除非刻意依赖默认行为都建议使用key来放置旧地复用
3、 Key值必须是独特的标识，不能出现重复的key值
四、v-on监听事件
1、<button v-on:click="counter += 1">Add 1</button>在事件中可以使用表达式
2、<button v-on:click="greet">Greet</button>事件处理逻辑复杂的时候可以使用需要调用的方法的名称
3、<button v-on:click="say('what')">Say what</button>可以在内联 JavaScript 语句中调用方法，传入实参
4、事件修饰符：<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
