标签：动态 冒泡 一个 学习 动手 使用场景 ros 导致 停止
官方的指令说明已经很简单了，这里再写一遍，也是自己加深一下印象
v-text 就是写入单纯的文本，可以忽略这个指令直接双花括号代替
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>
v-html 更新元素的 innerHTML，如果取回的值里面包含了html的样式，可以使用这个指令。
以下抄写了官方注意事项，对于用户输入的HTML，显示的时候需要谨慎处理。如果是服务器自己生成的HTML，完全由开发者掌控的代码，可以忽略
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
v-show
根据表达式之真假值，切换元素的 display CSS 属性。
当条件变化时该指令触发过渡效果。
简单说就是控制当前指令的标签是否显示
v-if，v-else, v-else if
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
条件判断，这里简单的条件判断还行，复杂的判断还是直接在模型里处理吧。
v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click="handle(‘ok‘, $event)"。
修饰符
.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。.left - (2.2.0) 只当点击鼠标左键时触发。.right - (2.2.0) 只当点击鼠标右键时触发。.middle - (2.2.0) 只当点击鼠标中键时触发。.passive - (2.3.0) 以 { passive: true } 模式添加侦听器<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat(‘hello‘, $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button>
在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）：
<my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>
注意上面对于vue版本的限制，低版本不支持！主要适用于各类事件的处理。
v-bind
动态地绑定一个或多个特性，或一个组件属性到表达式。
在绑定属性时，属性必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
v-model
v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
常用的表单控件如select， input，textarea 等
如果是select绑定的值会直接选中，其他的输入则直接选择文本
v-pre
官方的解释是：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
至今没有怎么用过
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
这个指令使用场景比较特殊，在初始化的时候会显示原始的代码，例如
<ul v-for="item in items"> <li>{{ item.name }}</li> </ul>
页面加载未完成时会显示
{{ item.name }}
这时候如果加入了这个指令标签在ul上
<ul v-cloak v-for="item in items"> <li>{{ item.name }}</li> </ul>
然后对应的全局css上加入
[v-cloak] {
display: none;
}
页面初始化未完成的时候，整个标签会被隐藏，加载完成后这个标签会自动去掉，显示完整的结果。
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<div v-once> <p>{{msg}}</p> </div> <div v-on:click="changeValue">点击修改msg的值</div>
我们绑定一个点击事件试图网页渲染完成后去修改msg的值，事件触发有此标签的内容不会再更改。
---------------------------------------------------------------------------------------------------------
标签内容有的直接拷贝的官方网页上的说明，部分附上了简单的实例
所有的内容尝试一遍，还是有些意外的收货的
可能刚开始项目使用过程中，只用到了部分指令，在都了解了一遍后，我又把原来项目里面部分功能重新修改了一遍
有的功能一个指令能完成的，我可能用了好几个指令去协作完成，毕竟刚开始看官方文档的时候，看得不是很全面
看文档还是要多动手尝试，加深印象，将来用起来更加得心应手
下面附上一个自定义指令
main.js
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ Vue.config.productionTip = false Vue.directive(‘title‘, { inserted: function (el, binding) { let title = binding.value; if (title) { document.title = binding.value; } } }); /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, template: ‘<App/>‘, components: { App } })
然后我们的vue文件里面就可以使用v-title指令了
<template> <div v-title="‘这里是标题‘"> 这里是内容 </div> </template> <script> export default { name: ‘home‘, components: { }, data() { return { } } } </script> <style lang="scss" scoped> </style>
注意指令内容里面单引号标识这是个字符串，不用单引号，指令值表示变量的名称，要在data里面声明对应的变量名
<template> <div v-title="title"> 这里是内容 </div> </template> <script> export default { name: ‘home‘, components: { }, data() { return { title:"这里是标题" } } } </script> <style lang="scss" scoped> </style>
全局指令注册属于全局API，全局注册指令用法
// 注册
Vue.directive(‘my-directive‘, {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册（传入一个简单的指令函数）
Vue.directive(‘my-directive‘, function () {
// 这里将会被 `bind` 和 `update` 调用
})
指令定义函数提供了几个钩子函数说明，只需要声明用到的函数，不需要的可以省略：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数被赋予了以下参数：
v- 前缀。v-my-directive="1 + 1", value 的值是 2。update 和 componentUpdated 钩子中可用。无论值是否改变都可用。v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。v-my-directive:foo， arg 的值是 "foo"。v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。update 和 componentUpdated 钩子中可用。参数使用如下
Vue.directive(‘demo‘, { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = ‘name: ‘ + s(binding.name) + ‘<br>‘ + ‘value: ‘ + s(binding.value) + ‘<br>‘ + ‘expression: ‘ + s(binding.expression) + ‘<br>‘ + ‘argument: ‘ + s(binding.arg) + ‘<br>‘ + ‘modifiers: ‘ + s(binding.modifiers) + ‘<br>‘ + ‘vnode keys: ‘ + Object.keys(vnode).join(‘, ‘) } })
指令在绑定网页元素值有优势，例如某些网页上的值显示需要保留两位小数
但是涉及到需要附带元素的css样式，需要附带一些参数控制等，还是需要选择使用插件解决。
标签：动态 冒泡 一个 学习 动手 使用场景 ros 导致 停止
原文地址：http://www.cnblogs.com/stealth7/p/6958252.html
