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 只会阻止对元素自身的点击。