写在前面： 我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。 这博客是对自己学习的一点点总结及记录，如果您对 Java、算法 感兴趣，可以关注我的动态，我们一起学习。 ① 如果元素涉及到频繁的切换，最好不要使用 v-if 指令, 应该选择使用 v-show 指令； ② 如果元素可能一直不会被显示出来被用户看到，则选择使用 v-if 指令 在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，开发人员仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 注册一个 v-focus 指令，实现了在页面加载完成之后自动让输入框获取到焦点的小功能。 效果演示： 效果演示： ① 指令定义对象可以提供如下几个钩子函数 (均为可选)： ② 指令钩子函数会被传入以下参数： ③ 绑定对象属性说明： 由于水平有限，博客中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！
技术是开源的、知识是共享的。用知识改变命运，让我们的家人过上更好的生活。
一、vue中内置的指令
v-text 指令用于将数据填充到标签中，作用和插值表达式类似，但是不会出现闪动问题。v-html 指令用于将HTML片段填充到标签中，可能有安全问题。v-pre 指令用于显示原始信息。v-once 指令是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。v-for 指令用于遍历，把一个数组对应为一组元素。v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。指令简写为 @v-bind 指令用于属性绑定,把数据绑定在HTML元素的属性上，指令简写为 : 要绑定的属性。v-model 指令可以实现表单元素和 Model 中数据的双向数据绑定。v-if & v-else-if & v-else 指令用于条件渲染。v-if & v-show 指令用于隐藏和显示元素v-if 的特点：每次都会重新删除或创建元素v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式注意：二、vue中自定义指令
1. 自定义全局指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全局自定义指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input type="text" placeholder="我是全局自定义指令" v-focus> </div> <script> // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 dom 中时…… ，其中参数 el 为dom元素 inserted: function (el) { // 聚焦元素 el.focus() } }) var vm = new Vue({ el: '#app', data: {} }) </script> </body> </html> 只要打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。
2. 自定义局部指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>局部自定义指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" placeholder="我是局部自定义指令" v-color="color"> </div> <script> var vm = new Vue({ el: '#app', data: { color: 'red' }, // 注册一个局部自定义指令 `v-color` directives: { color: { // binding 为自定义的函数形参,通过自定义属性传递过来的值,存到 binding.value 里面 bind: function (el, binding) { // 根据指令的参数进行设置背景色 el.style.backgroundColor = binding.value } } } }) </script> </body> </html> 只要通过指令绑定给了元素，不管元素有没有被插入到页面中去，这个元素肯定会有一个内联样式.
注意：
3. 钩子函数
钩子函数
使用
bind
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
componentUpdated
指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind
只调用一次，指令与元素解绑时调用。
参数
说明
el
指令所绑定的元素，可以用来直接操作 DOM。
binding
绑定一个对象。
vnode
Vue 编译生成的虚拟节点。
oldVnode
上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
属性
说明
示例
name
指令名，不包含前缀 v-。
v-focus 中的 focus。
value
指令的绑定的值（计算后）。
v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue
指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
——
expression
字符串形式的指令表达式（不计算）。
v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg
传给指令的参数，可选。
v-my-directive:foo 中，参数为 “foo”。
modifiers
一个包含修饰符的对象。
v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
