Vue.js实战基础篇
-
Vue 实例与数据绑定
-
el用于指定一个页面中已存在DOM 元素来挂载 Vue 实例,它可以是 HTMLElement ,也可以是 css 选择器 。例:el: docur1’ent.getElementByld ( ’ app ’) 或者是 ’# app ’
-
Vue 常用的生命周期钩子
• created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。
需要初始化处理一些数据时会比较有用,后面章节将有介绍.
• mounted el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始 。
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。 -
输出 HTML,而不是将数据解释后的纯文本,可以使用 v-html: <span v-html=”l ink”></ span>
-
如果想显示{{}}标签,而不进行替换 , 使用 v-pre 即可跳过这个元素和它的子元素的编译过程,<span v-pre>{{这里的内容是不会被编译的</ span>
-
过滤器 :Vue. 支持在{{}}插值的尾部添加一小管道符 “ 。 ” 对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。 {{ date I formatDate ) ) filters : { formatDate(value){} } , 过滤器也可以串联,而且可以接收参数, 〈 ! 一串联一〉{ { message I filterA I fil terB } }〈!一接收参数一一〉{{ message I f 工 lterA ( ’ argl ’,’ arg2 ’)}} , 这里的字符串arg1 和 arg2 将分别传给过滤器的第二个和第三个参数,因为第一个是数据本身。不传默认是数据本身。
-
-
指令与事件
- v-if、 v-html 、 v-pre 、v-bind 、v-on(绑定事件)
-
语法糖
- v-bind (:), v- on (@)
-
计算属性
-
如果表达式过长 ,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护, computed : { prices : function () { XXX ; return xxx; },当计算属性里面所用到的数据发生变化那么,该计算属性也会自动变化。每一个计算属性都包含一个 getter 和一个setter,我们上面的两个示例都是计算属性的默认用法 , 只是利用了 getter 来读取。在你需要时,也可以提供一个 setter 函数 , 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发 setter 函数,执行一些自定义的操作,例如 :
computed : { fullName : { // getter,用于读取 get: function () { return this . firstName +’’+ this . lastName; } // setter,写入时触发 set: function (newValue) { XXX } } }
绝大多数情况下,我们只会用默认的 getter 方法来读取一个计算属性,在业务中很少用到setter ,所以在声明一个计算属性时,可以直接使用默认的写法,不必将 getter 和 setter 都声明。
计算属性还有两个很实用的小技巧容易被忽略:一是计算属性可以依赖其他计算属性: 二是计算属性不仅可以依赖当前 Vue 实例的数据,还可以依赖其他实例的数据。
-
计算属性缓存 : 一个计算属性所依赖的数据发生变化时,它才会重新取值,所以 text 只要不改变,计算属性也就不更新 .
-
-
v-bind 及 class 与 style 绑定
了解 v-bind 指令 : <a :href=” url ” 〉链接< la><img :src=” imgUrl ” > 链接的 href 属性和图片的 src 属性都被动态设置了,当数据变化时,就会重新渲染。 在数据绑定中,最常见的两个需求就是元素的样式名称 class 和内联样式style 的动态绑定,它
们也是 html 的属性,因此可以使用 v-bind 指令。绑定 class 的几种方式 : ① :class=”{’ active ’: isActive }” ② 绑定一个计算属性, class=” classes ” ③ 数组语法, : class = ” [ acti飞1eCls , errorCls ) ”
绑定内联样式 ,① , :style={’ color ’: color, ’ fontSize ’ : fontSize +’ px ’}” ② , :
style= ” styles “ 以对象的形式 styles : {color : ‘red’ , fontSize : 14 + ‘px’} ③ , : style=” [ styleA , styleB] ” 以多对象的形式。
-
基本指令
- v-cloak :它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 , 经常和 css的 display: none;配合使用: <div id=” app” v-cloak>{{message )), [v-cloak] {display: none; }
- v-once :作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,
-
条件渲染指令
- v-if、 v-else-if、 v-else :v-else-if 要紧跟 v-if, v-else 要紧 Rli! v-else-if 或 v-if,表达式的值为 真时 , 当前元素/组件及所有子节点将被渲染,为假时被移除。如果一次判断的是多个元素,可以在 Vue扣内置的<template>元素上使用条件指令,最终渲染的结果不会包含该元素,Vue在渲染元素时,出于效率考虑,会尽可能复用已有的元素而非重新渲染。如果不希望这样做 , 可以使用 Vue.js 提供的 key 属性,它可以让你自己决定是否要复用元素 , key 值必须是唯一的。
- v-show : v-show 的用法与 v-if 基本一致,只不过 v-show 是改变元素的 css 属性 display。当 v-show 表达式的值为 false 时, 元素会隐藏,查看 DOM 结构会看到元素上加载了内联样式 display : none ; 提示 : v-show不能在上使用
- v-if 与 v-show 的选择 : v-if 更适合条件不经常改变的场景,因为它切换开销相对较大,而 v-show 适用于频繁切换条件。
-
列表渲染指令 v-for
-
基本用法 : 当需要将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令 v-for。它的表达式需结合 in 来使用,类似 item in items 的形式 。与 v-if 一样, v-for 也可 以用在 内 置标签<template>上 , 将多个元素进行渲染 : 除了数组外 , 对象的属性也是可以遍历的, 遍历对象属性时,有两个可选参数,分别是键名和索引: v-for= ” (value , key, index )in user” 例: 0 - name: Aresn , v-for 还可以迭代整数 : v - for= ” n in 10”
-
数组更新 : Vue 包含了 一组观察数组变异的方法,使用它们改变数组也会触发视图更新:
push() 、pop()、shift() 、unshift() 、splice() 、sort() 、reverse() 、
有些方法不会改变原数组 (他们只是生成一个新的数组):
filter() 、concat() 、 slice()
需要注意的是,以下变动的数组中, Vue 是不能检测到的,也不会触发视图更新:
通过索引直接设置项,比如 app.books[3] = { … } ,修改数组长度,比如p.books.length = 1.
解决第一个问题可以用两种方法实现同样的效果,第一种是使用 Vue 内置的 set 方法:
Vue .set(app.books, 3 , {
name: ’ 《 css 揭秘》 ’,
author :’[希] Lea Verou ’}) ;
如果是在 webpack 中使用组件化的方式(进阶篇中将介绍〉,默认是没有导入 Vue 的,这时
可以使用 $setthis .$set(app.books, 3 , {
name: ’ 《 css 揭秘》 ’,
author :’[希] Lea Verou ’}) ;
另一种方法:
app.books . splice(3 , 1 , {
name : ’《css 揭秘》’,
author : ’ [希 J Lea Verou ’
})第二个问题也可以直接用 splice 来解决 :
app.books.splice(1);
拓展:splice方法可以用来对 js 的数组进行删除、添加、替换等操作。
array.splice(index,num) , index: 位置 , num : 删除几个
array.splice(index,num,insertValue), index: 位置 ,num: 替换第几个(0为添加,insertValue:新值
-
过滤与排序:当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的数组。
<div id=” app ” > <ul> <template v-for=” book in filterBooks ” > <li >书名 : {{ book.name }}</li> <li >作者 : {{ book . author }}</li> </template> </ul> </div> var app =new Vue({ el:’#app ’, data : { books : [ { name :’ 《Vue.j s 实战》 ’, author :’ 梁巅 ’ }, { name : ’ 《 JavaScript 语言精粹》 ’, author : ’ Douglas Croc-kford ’ } ], }, computed : { filterBooks: function () { return this.books.filter(function (book) { return book.name.match(/JavaScript/); } } });
-
-
方法与事件:
-
基本用法:
在 methods 中定义了我们需要的方法供@click 调用, 需要注意的是,@click 调用的方法名后可以不跟括号“()” 。 此时,如果该方法有参数,默认会将原生事件对象 event 传入 。Vue 提供了 一个特殊变量$event,用于访问原生 DOM 事件。
<a href=”http:www.baidu.com”@click="handleClic('禁止打开',$event)〉打开链接</a>
-
修饰符
< !一阻止单击事件 冒泡 一〉 <a @click.stop=”handle " ></a> 〈!一提交事件不再重载页面 一〉 <form @submit.prevent="handle” ></ form> 〈 !一修饰符可以串联一 〉 <a @click.stop.prevent=” handle ” ></a> 〈 !一只有修饰符一〉 <form @submit . prevent></form> 〈 !一添加事件侦听器时使用事件捕获模式一〉 <div @click . capture=”handle” >... </div> 〈 !一只 当事件在该元素本身(而不是子元素) 触发时触发回调一〉 <div @click.self=” handle” >... </div> < !一只触发一次,组件同样适用一〉 <div @click.once=” handle” >... </div> // 在表单元素上监昕键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法: < !一只有在 keyCode 是 13 时调用 vm . submit ()一〉 <input @keyup.13 =“ submit ”/〉 // 也可以自己配置具体按键: Vue . config .keyCodes .fl = 112; //全局定义后,就可以使用自 @keyup. fl
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8W93d4Ec-1638413366047)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211122140042061.png)]
-
-
实战:利用计算属性、指令等知识开发购物车
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KWPxl9PC-1638413366049)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211122140159645.png)]
-
表单与v-model
-
基本用法:
单选按钮:单选按钮在单独使用时,不需要 v-model,直接使用 v-bind 绑定一个布尔类型的值 , 为真时选中 , 为否时不选, 如果是组合使用来实现互斥选择的效果,就需要 v-model 配合 value 来使用 :
data(){ return { picked: 'js', } } <div id=” app” > <input type=”radio” v-model=” picked” value=”html” id=”html” > <label for=”html” >HTML</label> <br> <input type=”radio” v-model=” picked” value=”js” id=”js” > <label for=”js” >JavaScript</label> <br> <input type=”radio” v-model = ”picked” value = ”css” id= ”css” > <label for=”css” >CSS</label> <br> <p>选择的项是 : {{picked}} </p> </div>
复选框:复选框单独使用时,也是用 v-mode l来绑定一个布尔值 ,组合使用时,也是 v-model 与 value 一起,多个勾选框都绑定到同一个数组类型的数据, value 的值在数组当中,就会选中这一项。这一过程也是双向的,在勾选时, value 的值也会自动 push 到
这个数组中 。 -
修饰符:v-model.lazy = ‘value1’ 当失去焦点或者回车的时候 value1 的值才会发生改变。
v-model.number = ‘value1’ 可以将输入转换为 Number 类型。
v-model.trim = ‘value1’ 可以自动过滤输入的首尾空格。
-
-
组件详解
-
组件与复用
-
组件用法: 组件需要注册才可以使用,注册有全局注册和局部注册两张方式。全局注册后,任何 Vue 实例都可以使用。全局注册示例代码如下:
Vue.component('my-component',{ // 选项 })
my-component 就是注册的组件自定义标签名称,推荐使用小写加减号分割的形式命名。 要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component> 的形式来使用组件了 。
在 Vue 实例中,使用 componen饱选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。组件中也可以使用 components 选项来注册组件,使组件可以嵌套。示例代码如下:
<div id="app"> <my-component></my-component> </div> <script> var Child = { template: '<div>局部注册组件的内容</div>' } var app = new Vue({ el: '#app', components: { 'my-component': Child } }) </script>
Vue 组件的模板在某些情况下会受到 HTML 的限制,比如<table>内规定只允许是、<td> 、<th>等这些表格元素,所以在<table>内直接使用组件是无效的 。 这种情况下,可以使用特殊的 is 属性来挂载组件 , 示例代码如下 :
<div id="app"> <table> <tbody is="my-component"></tbody> </table> </div> <script> Vue.component('my-component',{ template: '<div>这里是组件内容</div>', }); </script>
tbody 在渲染时 , 会被替换为组件的内容。常见的限制元素还有<ul>、<ol>、<se l ect> 。
-
使用 props 传递数据
基本用法:
props 的值可以是两种, 一种是字符串数组,一种是对象 , 有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令 v-bind来动态绑定 props 的值,当父组件的数据变化时,也会传递给子组件。
// 父组件 <div id=” app” > <input type=” text” v-model=” parentMessage” > <my-component :message=”parentMessage” ></my-component > </div> // 子组件 Vue.component (’ my-component ’,{ props: [ ’ message ’ ] , template:’<div>{ { message }}</div> }) ;
数据验证 :
当 prop 需要验证时,就需要对象写法。 一般当你的组件需要提供给别人使用时,推荐都进行数据验证,比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。
props : { // 必须是数字类型 propA : Number , //必须是字符串或数字类型 propB : [String , Number] , //布尔值,如果没有定义,默认值就是 true // 验证的 type 类型 : String、Number、Boolean、Object、Array、Function propC: { type : Boolean , default : true }, //数字,而且是必传 propD: { type: Number , required : true }, //如果是数组或对象,默认值必须是一个函数来返回 propE: { type : Array , default : function () { return [] ; } }, //自定义一个验证函数 propF: { validator : function (value) { return value > 10; } } }
自定义事件 :(子组件 -> 父组件)
当子组件需要向父组件传递数据时,就要用到自定义事件。子组件用 $emit()来触发事件 ,父组件用 $on()来监听子组件的事件 。 父组件也可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。
// 父组件 < p>总数 : {{ total }}</p> <my-component @increase=”handleGetTotal ” @reduce= ” handleGetTotal ” ></my-component> // 子组件 <button @click= ” handleIncrease ” >+l </button> <button @click= ” handleReduce ” >-1</button> handleincrease: function () { this . counter++; this . $emit (’ increase ’, this.counter); } , handleReduce: function () { this . counter--; this.$emit (’ reduce ’, this.counter) ; }
除了用 v-on 在组件上监听自定义事件外,也可以监听 DOM 事件,这时可以用 .native 修饰符
表示监听的是一个原生事件,监听的是该组件的根元素,// 表示监听的不是 一个 click 的方法 , 而是 dom 上的 click 方法 <my-component v-on:click.native=” handleClick” ></my-component>
非父子组件通信:
非父子组件一般有两种,兄弟组件和跨多级组件。 在 Vue. 2.x 中 , 推荐使用一个空的 Vue 实例作为中央事件总线( bus ),除了中央事件总线 bus 外,还有两种方法可以实现组件间通信:父链和子组件索引。
父链:在子组件中,使用 this. p a r e n t 可 以 直 接 访 问 该 组 件 的 父 实 例 或 组 件 , 父 组 件 也 可 以 通 过 t h i s . parent 可以直接访问该组件的父实例或组件,父组件也可以通过 this. parent可以直接访问该组件的父实例或组件,父组件也可以通过this.children 访问它所有的子组件,而且可以递归向上或向下无线访问, 直到根实例或最内层的组
件。 (最好不使用) 子组件索引:当子组件较多时 , 通过 this.$children 来一一遍历出我们需要的一个组件实例是比较困难的,
尤其是组件动态渲染时,它们的序列是不固定的。 Vue 提供了子组件索引的方法,用特殊的属性 ref
来为子组件指定一个索引名称。<div id=”app”> <button @click= ”handleRef ”〉通过 ref 获取子组件实例</button> <component-a ref="comA" ></ component-a> </div> //通过 $refs 来访问指定的实例 var msg = this.$refs.comA.message;
注: r e f s 只 在 组 件 渲 染 完 成 后 才 填 充 , 并 且 它 是 非 响 应 式 的 。 它 仅 仅 作 为 一 个 直 接 访 问 子 组 件 的 应 急 方 案 , 应 当 避 免 在 模 板 或 计 算 属 性 中 使 用 refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案,应当避免在模板或计算属性中使用 refs只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案,应当避免在模板或计算属性中使用refs。
-
-
-
使用 slot 分发内容
-
作用域:
<child- component> {{message }} </child-component>
这里的 message 就是一个 slot,但是它绑定的是父组件的数据,而不是组件的数据 。slot 分发的内容,作用域是在父组件上的。
-
solt的用法:
单个 Slot :
// 父组件 <div id=” app ” > <child-component> <p>分发的内容</p> <p>更多分发的内容</p> </child-component> <div> // 子组件 Vue . component ( ’child-component’, { template : ’ \ <div>\ <slot>\ <p>如果父组件没有插入内容,我将作为默认出现</p>\ </slot>\ </div> ’
具名 Slot :给<slot>元素指定一个 name 后可以分发多个内容,具名 slot 可以与单个 slot 共存
// 父组件 <child-component> <h2 slot="header">标题</h2> <p>正文内容</p> <p>更多的正文内容</p> <div slot=”footer”>底部信息</div> </child-component> //子组件 <div class=”container”> <div class=”header“> <slot name=”header” ></slot> </div> <div class=”main“> <slot></slot> </div> <div class=”footer“> <slot name=”footer”></slot> </div> </div> // 结果 <div id=” app” > <div class=”container”> <div class=”header”> <h2>标题</h2> </div> <div class=”main”> <p>正文内容<p> <p>更多的正文内容</p> </div> <div class=”footer”> <div>底部信息</div> </div> </div> </div>
-
作用域插槽:
作用域插槽是一种特殊的 slot,使用一个可以复用的模板替换己渲染元素。
// 父组件 <div id=” app” > <child-component> <template scope=” props ”> <p >来组父组件的内容< Ip> <p>{{ props.msg }}</p> </template> </child-component> </div> //子组件 <div class = ” container ”> <slot msg= " 来自子组件的内容 ”></slot> </div>
针对 : 数据在子组件自身 , 而样式不统一 ,由父组件决定。
-
访问 slot :
Vue.js 2.x 提供了用来访问被 slot 分发的内容的方法 $slots , 在子组件中使用:
mounted: function () { var header = this.$slots.header ; // 访问不是具名 slot 的节点 var main = this.$slots.default; var footer = this.$slots.footer; console.log (footer); console.log(footer[O].elm.innerHTML); }
$slots 在业务中几乎用不到 , 在用 render 函数(进阶篇中将介绍)创建组件时会比较有用,但
主要还是用于独立组件开发中。
-
-
组件高级用法:
-
递归组件:组件在它的模板内可以递归地调用自己 , 只要给组件设置 name 的选项就可以了 。
<div id=” app ” > <child-component :count= ”1” ></child- component> </div> <script> Vue.component (’ child- component ’, { name:’ child-component ’, props : { count: { type : Number , default : 1 } , template : ’ \ <div class= ” child” >\ <child-component\ :count=”count + 1” \ v-if=” count < 3” ></child- component>\ </div>’ , . , } ) var app =new Vue({ el:’ #app ’ }) </script>
-
内联模板:
组件的模板一般都是在 template 选项内定义的, Vue 提供了一个内联模板的功能,在使用组件时,给组件标签使用 inline- mplate 特性,组件就会把它的内容当作模板,而不是把它当内容分发,这让模板更灵活。
<div id= ” app ” > <child-component inline-template> <div> <h2 >在父组件中定义子组件的模板</ h2> <p>{{ message }}</p> <p>{{ msg }}</p> </div> </child-component> </div> <script> Vue . component ( ’ child-component ’, { data: function () { return { msg : ’ 在子组件声明的数据 ’ ., } ); var app =new Vue ( { el : ’ #app ’, data : { message: ’ 在父组件声明的数据 ’ }) </script>
在父组件中声明的数据 message 和子组件中声明的数据 msg , 两个都可以渲染(如果同名,优先使用子组件的数据)。这反而是内联模板的缺点,就是作用域比较难理解,如果不是非常特殊的场景 , 建议不要轻易使用内联模板.
-
动态组件:
Vue.js 提供了 一个特殊的元素<component> 用来动态地挂载不同的组件 , 使用 i s 特性来选择要挂载的组件。
-
异步组件:
当你的工程足够大 , 使用的组件足够多时 , 是时候考虑下性能问题了 , 因为一开始把所有的组件都加载是没必要的一笔开销。好在 Vue.js 允许将组件定义为一个工厂函数,动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数 , 并且把结果缓存起来,用于后面的再次渲染。例如下面的示例 :
<div id=” app” > <child-component></child-component> </div> <script> Vue . component ( ’ child-component ’, function (resolve , reject) { window . setTimeout(function () { resolve({ template :’ < div>我是异步渲染的</ div > ’ }) ; } ' 2000) ; } ); var app =new Vue({ el:’ #app ’ }) </script>
工厂函数接收一个 resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用
reject(reason)指示加载失败。
-
-
其他:
-
$nextTick :
这里就涉及 Vue 一个重要的概念: 异步更新队列。Vue 在观察到数据变化时并不是直接更新 DOM,而是开启 一个队列,并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和 DOM 操作。然后,在下一个事件循环 tick 中, Vue 刷新队列井执行实际(己去重的)工作。所以如果你用一个 for 循环来动态改变数据 100•次,其实它只会应用最后一次改变,如果没有这种机制, DOM 就要重绘 100次,这固然是一个很大的开销。$nextTick 就是用来知道什么时候 DOM 更新完成的。
getText: function () { this . showDiv = true ; this.$nextTick (function () { var text = document.getElementByid (’div’).innerHTML; console.log(text) ; }) ; }
-
手动挂载实例:
Vue 提供了 Vue.extend 和$mount 两个方法来手动挂载一个实例。 如果 Vue 实例在实例化时没有收到 el 选项,它就处于“未挂载”状态,没有关联的 DOM 元素。可以使用 $mount()手动地挂载一个未挂载的实例。这个方法返回实例自身,因而可以链式调用其他实例方法。
-
-
自定义指令:
-
基本用法:
自定义指令的注册方法和组件很像,也分全局注册和局部注册,比如注册一个 v-focus 的指令,用于在<input>、<textarea>元素初始化时自动获得焦点,两种写法分别是:
// 全局注册 Vue.directive('focus',{ // 指令选项 }) ; // 局部注册 var app = new Vue({ el: '#app', directives: { focus: { // 指令选项 } } })
自定义指令的选项是由几个钩子函数组成的,每个都是可选的。
bind : 只调用一次,指令第一次绑定到元素 时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作.
inserted : 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中) .
update : 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
componentUpdated : 被绑定元素所在模板完成一次更新周期时调用.
unbind : 只调用一次,指令与元素解绑时调 用 。
案例 : 元素插入父节点就调用
<div id = "app"> <input type=” text ” v-focus> </div> <script> Vue.directive(’focus’,{ // el 指令所绑定的元素,可以用来直接操作 DOM . inserted : function (el) { // 聚焦元素 el.focus() ; } }); var app =new Vue({ el : ’app’ }); </script>
el 指令所绑定的元素,可以用来直接操作 DOM
binding 一个对象,包含以下属性 :
name 指令名,不包括 v-前缀。
value 指令的绑定值,例如 v-my-directive="1+ 1", value 的值是, 2 .
oldValue 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用.无论值是否改变都可用 。
expression 绑定值的字符串形式 。 例如 v-my-directive=“1 + 1”, expression 的值是"1 + 1".
arg 传给指令的参数。例如 v-my-directive:foo , arg 的值是 foo .
modifiers 一个包含修饰符的对象 。 例如 v-my-directive.foo.bar,修饰符对象 modifiers的值是{ foo: true, bar: true }。
vnode Vue 编译生成的虚拟节点
oldVnode 上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用 。
-
pp =new Vue({
el : ’app’
});
```
el 指令所绑定的元素,可以用来直接操作 DOM
binding 一个对象,包含以下属性 :
name 指令名,不包括 v-前缀。
value 指令的绑定值,例如 v-my-directive="1+ 1", value 的值是, 2 .
oldValue 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用.无论值是否改变都可用 。
expression 绑定值的字符串形式 。 例如 v-my-directive="1 + 1", expression 的值是"1 + 1".
arg 传给指令的参数。例如 v-my-directive:foo , arg 的值是 foo .
modifiers 一个包含修饰符的对象 。 例如 v-my-directive.foo.bar,修饰符对象 modifiers的值是{ foo: true, bar: true }。
vnode Vue 编译生成的虚拟节点
oldVnode 上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用 。