《Vue.js实战》
Vue.js实战基础篇
-
Vue 实例与数据绑定
-
el用于指定一个页面中已存在DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器 。例：el: docur1’ent.getElementByld ( ’ app ’) 或者是 ’＃ app ’
-
Vue 常用的生命周期钩子
• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。
需要初始化处理一些数据时会比较有用，后面章节将有介绍．
• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。 -
输出 HTML，而不是将数据解释后的纯文本，可以使用 v-html:
-
如果想显示｛｛｝｝标签，而不进行替换 ， 使用 v-pre 即可跳过这个元素和它的子元素的编译过程，
-
过滤器 ：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 指令 :
链接的 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；配合使用： {{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：新值
-
过滤与排序：当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。
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 事件。
-
修饰符
＜ ！一阻止单击事件 冒泡 一〉 〈！一提交事件不再重载页面 一〉复选框：复选框单独使用时，也是用 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 选项来注册组件，使组件可以嵌套。示例代码如下：
Vue 组件的模板在某些情况下会受到 HTML 的限制，比如＜table＞内规定只允许是、＜td＞ 、
tbody 在渲染时 ， 会被替换为组件的内容。常见的限制元素还有＜ul＞、＜ol＞、＜se l ect> 。
-
使用 props 传递数据
基本用法：
props 的值可以是两种， 一种是字符串数组，一种是对象 ， 有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v-bind来动态绑定 props 的值，当父组件的数据变化时，也会传递给子组件。
// 父组件// 子组件 Vue.component (’ my-component ’,{ props: [ ’ message ’ ] , template:’{ { message }}}) ;数据验证 :
当 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 }}// 子组件 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 方法非父子组件通信：
非父子组件一般有两种，兄弟组件和跨多级组件。 在 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
来为子组件指定一个索引名称。//通过 $refs 来访问指定的实例 var msg = this.$refs.comA.message;注： r e f s 只 在 组 件 渲 染 完 成 后 才 填 充 ， 并 且 它 是 非 响 应 式 的 。 它 仅 仅 作 为 一 个 直 接 访 问 子 组 件 的 应 急 方 案 ， 应 当 避 免 在 模 板 或 计 算 属 性 中 使 用 refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用 refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用refs。
-
使用 slot 分发内容
-
作用域：
{{message }} 这里的 message 就是一个 slot，但是它绑定的是父组件的数据，而不是组件的数据 。slot 分发的内容，作用域是在父组件上的。
-
solt的用法：
单个 Slot ：
// 父组件分发的内容
更多分发的内容
// 子组件 Vue . component ( ’child-component’, { template : ’ \\’\ \如果父组件没有插入内容，我将作为默认出现
\具名 Slot :给＜slot>元素指定一个 name 后可以分发多个内容，具名 slot 可以与单个 slot 共存
// 父组件标题
正文内容
底部信息// 结果标题
正文内容
更多的正文内容
作用域插槽：
作用域插槽是一种特殊的 slot，使用一个可以复用的模板替换己渲染元素。
// 父组件//子组件{{ props.msg }}
针对 ： 数据在子组件自身 ， 而样式不统一 ，由父组件决定。
访问 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 的选项就可以了 。
-
内联模板：
组件的模板一般都是在 template 选项内定义的， Vue 提供了一个内联模板的功能，在使用组件时，给组件标签使用 inline- mplate 特性，组件就会把它的内容当作模板，而不是把它当内容分发，这让模板更灵活。
{{ message }}
{{ msg }}
在父组件中声明的数据 message 和子组件中声明的数据 msg ， 两个都可以渲染（如果同名，优先使用子组件的数据）。这反而是内联模板的缺点，就是作用域比较难理解，如果不是非常特殊的场景 ， 建议不要轻易使用内联模板.
-
动态组件：
Vue.js 提供了 一个特殊的元素＜component> 用来动态地挂载不同的组件 ， 使用 i s 特性来选择要挂载的组件。
-
异步组件：
当你的工程足够大 ， 使用的组件足够多时 ， 是时候考虑下性能问题了 ， 因为一开始把所有的组件都加载是没必要的一笔开销。好在 Vue.js 允许将组件定义为一个工厂函数，动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数 ， 并且把结果缓存起来，用于后面的再次渲染。例如下面的示例 ：
工厂函数接收一个 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 ： 只调用一次，指令与元素解绑时调 用 。
案例 ： 元素插入父节点就调用
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 钩子中可用 。
- v-cloak ：它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 ， 经常和 css的 display: none；配合使用：