vue使用的总结

以你之姓@ 2022-05-19 00:28 342阅读 0赞

一大块：

## 1.Vuejs组件 ##

vuejs构建组件使用

Vue.component('componentName',{ /*component*/ })；

这里注意一点，组件要先注册再使用，也就是说：

1.  `Vue.component('mine',{`
2.  `template:'#mineTpl',`
3.  `props:['name','title','city','content']`
4.  `});`
5.   
6.  `var v=new Vue({`
7.  `el:'#vueInstance',`
8.  `data:{`
9.  `name:'zhang',`
10. `title:'this is title',`
11. `city:'Beijing',`
12. `content:'these are some desc about Blog'`
13. `}`
14. `});`

如果反过来会报错，因为反过来代表先使用了组件的，但是组件却没注册。

> webpack报错后，使用`webpack --display-error-details`可以排错

## 2.指令keep-alive ##

在看demo的时候看到在vue-router写着`keep-alive`，`keep-alive`的含义：  
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

## 3.如何让css只在当前组件中起作用 ##

在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在`style`中写入`scoped`，即：

## 4.vuejs循环插入图片 ##

在写循环的时候，写入如下代码：

1.  `<div class="bio-slide" v-for="item in items">`
2.  `<img src="{ {item.image}}">`
3.  `</div>`

此时在控制台会出现警告  
`[Vue Warn]: src="{ {item.image}}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.`这里意思是在“src”属性插值将导致404请求。使用v-bind：src代替。  
所以替换成如下：

1.  `<div class="bio-slide" v-for="item in items">`
2.  `<img v-bind:src="item.image">`
3.  `</div>`

这里需要主要，v-bind在写的时候不能再用\{ \{\}\}，根据官方的说法：

<a v-bind:href="url"></a>

> 这里` href `是参数，它告诉 `v-bind `指令将元素的 `href `特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值`href="{ {url}}"` 获得同样的结果：这样没错，并且实际上在内部特性插值会转为` v-bind` 绑定。

## 5.绑定value到Vue实例的一个动态属性上 ##

对于单选按钮，勾选框及选择框选项，`v-model`绑定的value通常是静态字符串（对于勾选框是逻辑值）：

1.  ````
2.  `<input type="checkbox" v-model="toggle">`

但是有时候想绑定value到vue实例的一个动态属性上，这时可以用`v-bind`实现，并且这个属性的值可以不是字符串。例如绑定Checkbox的value到vue实例的一个动态属性：

1.  `<input`
2.  `type="checkbox"`
3.  `v-model="toggle"`
4.  `v-bind:true-value="a"`
5.  `v-bind:false-value="b">`
6.  `<p>{ {toggle}}</p>`

这里绑定后，并不是说就可以点击后由`true`,`false`的切换变为`a`,`b`的切换，因为这里定义的动态a，b是scope上的a,b，并不能直接显示出来，此时

1.  `//当选中时`
2.  `vm.toggle === vm.a`
3.  `//当没选中时`
4.  `vm.toggle === vm.b`

所以此时需要在data中定义a,b，即：

1.  `new Vue({`
2.  `el:'...',`
3.  `data:{`
4.  `a:'a',`
5.  `b:'b'`
6.  `}`
7.  `});`

## 6.片段实例 ##

下面几种情况会让实例变成一个片断实例：

1.  模板包含多个顶级元素。
2.  模板只包含普通文本。
3.  模板只包含其它组件（其它组件可能是一个片段实例）。
4.  模板只包含一个元素指令，如`<partial>` 或` vue-router` 的 `<router-view>`。
5.  模板根节点有一个流程控制指令，如` v-if `或` v-for`。

这些情况让实例有未知数量的顶级元素，它将把它的 DOM 内容当作片断。片断实例仍然会正确地渲染内容。不过，它没有一个根节点，它的`$el` 指向一个锚节点，即一个空的文本节点（在开发模式下是一个注释节点）。  
但是更重要的是，组件元素上的非流程控制指令，非 prop 特性和过渡将被忽略，因为没有根元素供绑定：

1.  ``
2.  `<example v-show="ok" transition="fade"></example>`
3.   
4.  ``
5.  `<example :prop="someData"></example>`
6.   
7.  ``
8.  `<example v-if="ok"></example>`

片段实例也有用处，但是通常情况下组件有一个根节点比较好，它会保证组件元素上的指令和特性能正确的转换，同时性能也稍微好些。

## 7.路由嵌套 ##

路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转`router-view`本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：

1.  `var App = Vue.extend({ root });`
2.  `router.start(App,'#app');`

这里首先将根组件注册进来，用于将路由中配置好的各个页面渲染出来，然后将根组件挂载到与\#app匹配的元素上。

## 8.实现多个根据不同条件显示不同文字的方法 ##

`v-if`,`v-else`可以实现条件选择，但是如果是多个连续的条件选择，则需要用到计算属性`computed`。例如实现当输入框中什么都没写的时候显示字符串‘empty’,否则显示输入框中的内容，代码如下：

1.  `<div id="test">`
2.  `<input type="text" v-model="inputValue">`
3.  `<h1>{ {changeVaule}}</h1>`
4.  `</div>`

1.  `new Vue({`
2.  `el:'#test',`
3.  `data:{`
4.  `changeVaule:'123'`
5.  `},`
6.  `computed :{`
7.  `changeVaule:function(){`
8.  `if(this.inputValue!==''){`
9.  `return this.inputValue;`
10. `}else{`
11. `return 'empty';`
12. `}`
13. `}`
14. `}`
15. `});`

## 9.Vuejs在变化检测问题 ##

1.检测数组

由于javascript的限制，vuejs不能检测到下面数组的变化：

1.  直接索引设置元素，如`vm.item[0]={}`;
2.  修改数据的长度，如`vm.item.length`。

为了解决问题1，Vuejs扩展了观察数组，为它添加一个`$set()`方法：

1.  ``// 与 `example1.items[0] = ...` 相同，但是能触发视图更新``
2.  `example1.items.$set(0, { childMsg: 'Changed!'})`

问题2，需要一个空数组替换`items`。

除了`$set()`，vuejs也为观察数组添加了`$remove()`方法，用于从目标数组中查找并删除元素，在内部调用了`splice()`。因此，不必：

1.  `var index = this.items.indexOf(item)`
2.  `if (index !== -1) {`
3.  `this.items.splice(index, 1)`
4.  `}`

只需：

this.items.$remove(item);

2.检测对象

受ES5的显示，Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为`getter/setter`，所以属性必须在`data`对象才能让Vuejs转换它，才能让它是响应的，例如：

1.  `var data = { a: 1 }`
2.  `var vm = new Vue({`
3.  `data: data`
4.  `})`
5.  ``// `vm.a` 和 `data.a` 现在是响应的``
6.   
7.  `vm.b = 2`
8.  ``// `vm.b` 不是响应的``
9.   
10. `data.b = 2`
11. ``// `data.b` 不是响应的``

不过，有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例，可以使用`$set(key,value)`实例方法：

1.  `vm.$set('b', 2)`
2.  ``// `vm.b` 和 `data.b` 现在是响应的``

对于普通数据对象，可以使用全局方法`Vue.set(object, key, value)`:

1.  `Vue.set(data, 'c', 3)`
2.  ``// `vm.c` 和 `data.c` 现在是响应的``

有时你想向已有对象上添加一些属性，例如使用 `Object.assign()` 或 `_.extend()` 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：

1.  ``// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })` ``
2.  `this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })`

## 10.关于vuejs页面闪烁`{ {message}}` ##

在vuejs指令中有`v-cloak`，这个指令保持在元素上直到关联实例结束编译。和CSS规则如`[v-cloak]{display:none}`一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。用法如下：

1.  `[v-cloak]{`
2.  `display:none;`
3.  `}`

<div v-cloak>{
       {message}}</div>

这样`<div>`不会显示，直到编译结束

## 11.关于在`v-for`循环时候`v-model`的使用 ##

有时候需要循环生成`input`，用`v-model`绑定后，利用vuejs操作它，此时我们可以在`v-model`中写一个数组`selected[$index]`，这样就可以给不同的input绑定不同的`v-model`，从而分别操作他们。这个我在demo中的dataBind.vue中用到。

## 12.vuejs中过渡动画 ##

在vuejs中，css定义动画：

1.  `.zoom-transition{`
2.  `width:60%;`
3.  `height:auto;`
4.  `position: absolute;`
5.  `left:50%;`
6.  `top:50%;`
7.  `transform: translate(-50%,-50%);`
8.  `-webkit-transition: all .3s ease;`
9.  `transition: all .3s ease;`
10. `}`
11. `.zoom-enter, .zoom-leave{`
12. `width:150px;`
13. `height:auto;`
14. `position: absolute;`
15. `left:20px;`
16. `top:20px;`
17. `transform: translate(0,0);`
18. `}`

其中动画在定的时候要注意上下对应，上面有什么，下面有什么，都要变化的，如果有不变化的，应该抽离出去，作为公共css样式，在上面的css中，如果我只写` transform: translate(-50%,-50%);`而不写下面的`transform: translate(0,0);`则会导致上面的`transform: translate(-50%,-50%);`被添加到下面，认为这个是不变的。

## 13.指令v-el的使用 ##

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用`v-el`指令，去给这个元素注册一个索引，方便通过所属实例的`$el`访问这个元素。  
注意  
HTML不区分大小写，所以`v-el:someEl`将转换为全小写。可以用`v-el:some-el`然后设置`this.$el.someEl`。  
示例

1.  `<span v-el:msg>hello</span>`
2.  `<span v-el:other-msg>world</span>`

1.  `this.$els.msg.textContent // -> "hello"`
2.  `this.$els.otherMsg.textContent // -> "world"`
3.  `this.$els.msg //-><span>hello</span>`

## 14.关于vuejs中使用事件名 ##

在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用`v-on:click-"event"`,这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写`v-on:click="myEvent"`而在js中写`myEvent`就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。在2.0中没有该限制！

## 15.v-if与v-show的区别 ##

`v-if`直接不渲染这个DOM元素，而`v-show`是会渲染DOM元素，只是使用`display:none`隐藏，打开开发者工具可以看到该DOM

## 16.关于`transition`全局钩子如何在组件中使用 ##

`Vue.transition`是定义一个全局`transition`钩子的，如果想针对组件定义，则需要如下写法：

1.  `export default{`
2.  `transition:{`
3.  `'fade':{`
4.  `enter() {},`
5.  `leave() {}`
6.  `}`
7.  `}`
8.  `}`

这样`fade`这个过度钩子只会作用于组件内，如果同时有同名的全局钩子，则会优先使用组建定义的

## 17.利用`vue-router`如何实现组件在渲染出来前执行某个事件 ##

1.  `export default{`
2.  `data(){`
3.  `return{`
4.  `selected:0,`
5.  `currentView:'view_0'`
6.  `}`
7.  `},`
8.  `methods:{`
9.  `choose(index) {`
10. `this.selected=index;`
11. `this.currentView='view_'+index;`
12. `}`
13. `},`
14. `route:{`
15. `data() {`
16. `/*每次切换路由，在渲染出页面前都会执行*/`
17. `}`
18. `}`
19. `}`

二大块：

第一部分 Vue.js 介绍

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue没有完全遵循MVVM格式，但Vue的设计无疑受到了它的启发。

### 1.1 浏览器限制 ###

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性(Object.defineProperty)。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

### 1.2 开发版本与生产版本 ###

1.  开发版本——包含完整的警告和调试模式
2.  生产版本——删除了警告，23.55kb min+gzip

### 1.3 引入vue.js ###

当前vue.js版本2.0

第二部分 Vue.js基础

### 2.1 hello world ###

1.  `<div id="app">`
2.  `{ { message }}`
3.  `</div>`
4.   
5.  `var app = new Vue({`
6.  `el: '#app',`
7.  `data: {`
8.  `message: 'Hello Vue!'`
9.  `}`
10. `})`

浏览器渲染结果：

Hello Vue!

Vue使数据和 DOM 被绑定在一起，所有的元素都是响应式的。当app.message改变时，会引起DOM的重新渲染。

### 2.2 Vue实例 ###

2.2.1 选项对象

1.  `<div id='app'></div>`
2.   
3.  `var vm = new Vue({`
4.  `// 选项对象`
5.  `})`

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

选项对象包含常用的属性包括，在下文还会进行拓展：

1.  `var vm = {`
2.  `el:'', // 以CSS选择器的形式选择根元素`
3.  `data:{`
4.  `message:'Hello Vue!'`
5.  `}, // 数据对象`
6.  `methods:{`
7.  `sayHello:function () {`
8.  `alert(this.message)`
9.  `}`
10. `}, //方法对象，注意可数复数后面加s`
11. `... ...`
12. `}`

### 2.2.2 代理data ###

Vue实例，即vm会代理选项对象中data对象里的所有属性，已上面创建的实例为例：

vm.message // =>Hello Vue!

在选项对象里，this表示构造器的实例，所以在methods对象中的方法也使用this.属性获取data里的属性：

1.  `……`
2.  `methods:{`
3.  `sayHello:function () {`
4.  `alert(this.message) // =>Hello Vue!`
5.  `}`
6.  `},`
7.  `……`

更常见的是data是一个外部的变量

1.  `var userInfo = {name:'Kyle Hu',age:20}`
2.  `……`
3.  `data: userInfo`
4.  `……`

此时data和userInfo是双向绑定的，二者有一方改变，对方都会改变。注意，userInfo一直存在在内存中。

就像你在写node程序时不能使用`exports = function () {}`导出模块一样，你不能像下面这样试图改变选项对象所绑定的data变量，因为这样完全破坏了data与vm的引用关系

1.  `<div>{ {age}}</div>`
2.   
3.  `var userInfo = {name:'Kyle Hu',age:20}`
4.  `……`
5.  `data: userInfo`
6.  `……`
7.   
8.  `userInfo.age = 15; // DOM渲染成15`
9.  `vm.age = 16; // DOM渲染成16`
10. `userInfo = {name:'Kyle Hu',age:22}; // 引用关系被破坏，DOM不会重新渲染`
11. `userInfo.age = 25; // 引用关系被破坏，DOM不会重新渲染`
12. `vm.age = 23; // DOM被渲染成23`

### 2.2.3 实例属性与方法 ###

既然vm.属性代理的是vm选项对象中的data对象中的属性，那么，我们想要访问诸如el，data等直接定义在选项对象里的属性怎么办呢？

Vue暴露了一些实例属性。如要访问诸如el，data这样的选项对象属性，则需在前面加上$，例如：

1.  `vm.$el // =>HTMLXXXDOM`
2.  `vm.$data // => {message:'Hello Vue!'}`

Vue还暴露了一些实例方法（不是methods里的方法），与实例属性相同，前面也加上$。比如监控元素改变的$watch方法

1.  `vm.$watch('a', function (newVal, oldVal) {`
2.  ``// 这个回调将在 `vm.a` 改变后调用``
3.  `})`

### 2.2.4 实例的声明周期 ###

![zXAdlK7.png][]

2.3 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。  
在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。  
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

### 2.3.1 插值 ###

（1） 文本，使用 “Mustache” 语法（双大括号语法）

<div>{
       {message}}</div>

（2）不随vm.data变化的文本

<div v-once>{
       {message}}</div>

（3）纯HTML，注意防止XSS攻击

（4）属性

<button v-bind:id="btn_id"  v-bind:disabled="check">click me</button>

如果check的值是false，则disabled属性将不会被渲染。以v-开头的是Vue.js的指令，你马上就能看到如何使用它们。

\*>>注意：Vue.js1.x版本中的\`\{ \{ \{\}\}\}、\{ \{\}\}\`等语法已被Vue.js 2.x淘汰\*\*

### 2.3.2 表达式 ###

可以在指令及\{ \{\}\}中使用表达式，事实上，常量或变量的名称就是最简单的表达式。Vue可以通过是否带引号来判断一个表达式是一个变量还是一个常量字符串。所以在以后的内容里，指令及\{ \{\}\}中的内容会被成为表达式。

1.  `{ { number + 1 }}`
2.  `{ { ok ? 'YES' : 'NO' }}`
3.  `{ { message.split('').reverse().join('') }}`
4.  `<div v-bind:id="'list-' + id"></div>`

上面的表达式都被支持。\{ \{\}\}和指令中只支持一个表达式，不支持语句。如果想要使用语句，可以使用一会儿要讲到的过滤器以及计算属性。

注板表达式中试图访问用户定义的全局变量。意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图使用用户自定义的全局变量

### 2.3.3 过滤器 ###

Vue.js过滤器被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

{
       {message|capitalize}}

上面的例子使用了Vue.js内置的顾虑器，作用是使message的值首字母大写。Vue.js也允许你自定义过滤器：

1.  `new Vue({`
2.  `// ...`
3.  `filters: {`
4.  `becomeHappy: function (value) {`
5.  `return 'I am happy to say:' + value`
6.  `}`
7.  `}`
8.  `})`

过滤器可以串联，也可以接受参数。在接受参数时，第一个参数默认是前面返回的字符串，第二个参数开始是用户传递的参数，注意如果参数是字符串要加引号。

{
       {message | filterA | filterB('string', somevar)}}

### 2.3.4 指令 ###

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。指令能够实现条件渲染，列表渲染，绑定属性等诸多功能。

下面是一个使用指令例子：

1.  `<div id='app'><span v-if="condition" v-html="message"></span></div>`
2.   
3.  `var vm = {`
4.  `el:'#app',`
5.  `data:{`
6.  `condition: true,`
7.  `message: '<span style="color:red">Hello Vue!</span>'`
8.  `}`
9.  `}`

浏览器显示：

<span style="color:red">Hello Vue!</span>

v-if指令会根据vm.condition判断是否渲染span，v-html指令会将message的内容以HTML的形式进行渲染。

有些指令接受一个“参数”，在指令后以冒号指出

v-on用于指定事件，而v-bind用于绑定属性，由于它们非常常见，所以Vue.js为它们提供看缩写的形式：

sayHello为事件触发的函数，函数写在选项对象的methods属性中。

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，置于指令参数的后面，=（如果存在）前面。用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用

1.  `<form v-on:submit.prevent="onSubmit"></form>`
2.   
3.  `<input v-model.trim="msg">`

2.4 计算指令

在模板中表达式不宜过于复杂，可以使用计算指令讲逻辑抽离出来。

### 2.4.1 基础例子： ###

1.  `<div id="example">`
2.  `<p>Original message: "{ { message }}"</p>`
3.  `<p>Computed reversed message: "{ { reversedMessage }}"</p>`
4.  `</div>`
5.   
6.  `var vm = new Vue({`
7.  `el: '#example',`
8.  `data: {`
9.  `message: 'Hello'`
10. `},`
11. `computed: {`
12. `reversedMessage: function () {`
13. `return this.message.split('').reverse().join('')`
14. `}`
15. `}`
16. `})`

渲染结果：

Original message: "Hello"

Computed reversed message: "olleH"。

计算属性在选项对象的computed对象中编写。该对象的属性名即为需要计算得到的属性名，值为一个匿名函数。但这并不意味着把这个匿名函数的值赋给该属性（上例中的reversedMessage），事实上，在渲染的时候，该匿名函数会被执行，然后将return的值赋给computed对象的属性。

### 2.4.2 计算setter ###

以上例中,reversedMessage依赖于vm.message属性，并随之变化。相当于我们为之创建了一个getter。  
然而如果我们希望reversedMessage改变也会引起message的改变，则需要再为之创建一个setter:

1.  `// ...`
2.  `computed: {`
3.  `fullName: {`
4.  `// getter`
5.  `get: function () {`
6.  `return this.firstName + ' ' + this.lastName`
7.  `},`
8.  `// setter`
9.  `set: function (newValue) {`
10. `var names = newValue.split(' ')`
11. `this.firstName = names[0]`
12. `this.lastName = names[names.length - 1]`
13. `}`
14. `}`
15. `}`
16. `// ...`

现在在运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也会被对应更新。

### 2.4.3 计算缓存 vs Methods ###

<div>{
       {getFullName()}}</div>

你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果，与计算属性的区别在于计算属性是基于它的依赖缓存的。只有当其依赖的数据发生变化时才会重新计算取值。相比而言，每当重新渲染时，method调用总会执行函数。

所以制作计时器的计划会因此失败

1.  `computed: {`
2.  `now:function () {`
3.  `return new Date()`
4.  `}`
5.  `}`

### 2.4.5 计算属性 vs watcher ###

Vue.js提供了$watch，当制定数据变化是其中的相关函数会被调用，也可以起到计算属性的效果。

1.  `watch: {`
2.  `// 如果 question 发生改变，这个函数就会运行`
3.  `question: function (newQuestion) {`
4.  `this.answer = 'Waiting for you to stop typing...'`
5.  `this.getAnswer()`
6.  `}`
7.  `},`

二者区别在于计算属性将会在依赖的数据改变后立即发生变化，而watcher更适合处理异步的情况，直到我们得到最终结果时，才设置中间状态。

2.5 style与class

class和style都是属性，可以使用v-bind指令进行绑定，Vue.js加强了它们。表达式的结果除了可以是字符串外，还可以是数组或对象。

### 2.5.1 class ###

v-bind指令不影响原有的class。

（1）对象语法

active是一个class的名称，而condition则是一个表达式，当condition为true的时候，class将被执行渲染。

你也可以直接传一个表达式：

1.  `<div v-bind:class="classObject"></div>`
2.   
3.  `...`
4.  `data: {`
5.  `classObject: {`
6.  `active: true,`
7.  `'text-danger': false`
8.  `}`
9.  `}`
10. `...`

（2）数组语法

1.  `<div v-bind:class="[activeClass, errorClass]">`
2.   
3.  `data: {`
4.  `activeClass: 'active',`
5.  `errorClass: 'text-danger'`
6.  `}`

与对象语法不同，数组语法中元素全部为表达式。你也可以将表达式设置为对象

### 2.5.2 style ###

这里css属性名支持中划线命名法及驼峰命名法。

（1）对象语法

1.  `<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>`
2.   
3.  `data: {`
4.  `activeColor: 'red',`
5.  `fontSize: 30`
6.  `}`

对象的属性是css属性名，值是表达式的返回值。当然推荐你把表达式对象抽离出来

（2）数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上，每个元素都是一个返回CSS对象的表达式。

（3）自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

2.6 条件渲染

### 2.6.1 v-if/v-else ###

vue.js把v-if指令的功能抽离出来，只用来判断DOM元素是否进行渲染。

v-if指令不能作用于根元素，否则会给出警告并报错。

可以使用v-else指令设置不满足条件的话将做什么，v-else必须紧跟v-if（或者后面提到的v-show），否则无法被识别。

1.  `<h1 v-if="ok">Yes</h1>`
2.  `<h1 v-else>No</h1>`

v-if是惰性的，在第一次条件为真的时候才进行渲染。

### 2.6.2 template ###

子元素还好应付，如果有若干个同级元素需要根据条件进行判断是否渲染，则需要使用template

1.  `<template v-if="ok">`
2.  `<h1>Title</h1>`
3.  `<p>Paragraph 1</p>`
4.  `<p>Paragraph 2</p>`
5.  `</template>`

template本身不会被渲染成DOM节点。

### 2.6.3 v-show ###

v-show是在会被渲染成DOM，若其后表达式的值为假，则会在渲染时加上style="display:none"。由于其总是会被渲染，所以v-show可以被绑定到根结点上。同时,Vue.js规定v-show不能作用于template。显然，v-show更适合频繁切换的情况。

1.  `<p v-show="okay">okay</p>`
2.  `<p v-show="!okay">not okay</p>`

2.7 列表渲染

### 2.7.1 迭代数组 ###

最基本的渲染形式是对数组的处理：

1.  `<ul>`
2.  `<li v-for="student in students">{ {student.name}}</li>`
3.  `</ul>`
4.   
5.  `students: [{name: 'Jack', age: 15},`
6.  `{name: 'Tom', age: 15},`
7.  `{name: 'LiMing', age: 15}]`

### 2.7.2 迭代对象 ###

1.  `<ul>`
2.  `<li v-for="value in person">{ {value}}</li>`
3.  `</ul>`
4.   
5.  `... ...`
6.  `data: {`
7.  `person:{`
8.  `name:"Jack",`
9.  `age:17`
10. `}`
11. `}`

### 2.7.3 数据访问权限 ###

在 v-for 块中，我们拥有对父作用域及当前作用域属性的完全访问权限。

1.  `<ul>`
2.  `<li v-for="person in persons">`
3.  `{ {person.name}}`
4.  `<span v-html="person.html"></span>`
5.  `</li>`
6.  `</ul>`

### 2.7.4 template ###

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个同级元素块。

### 2.7.5 key(键名)与index ###

你可以提供索引和键名作为参数

<div v-for="(value[ ,key[，index]]) in object">{
       {index}}.{
       {value}}</div>

$Index和$key在Vue.js2.0中已经被淘汰

### 2.7.6 迭代整数 ###

此外，v-for还可以迭代整数

1.  `<div>`
2.  `<span v-for="n in 10">{ { n }}</span>`
3.  `</div>`

输出1至10

### 2.7.8 使用key帮Vue一个小忙 ###

重新渲染一个单独的值，比如message对Vue来说是小菜一碟。但如果当列表里的某一个值被改变，需要重新渲染整个列表则是不可接受的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，而不是移动 DOM 元素来匹配数据项的顺序， Vue 将简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

我们为列表中每个元素提供一个key以帮助Vue.js跟踪每个节点的身份，从而重用和重新排序现有元素。

1.  `<div v-for="student in students" :key="student.student_id">`
2.  ``
3.  `</div>`
4.   
5.  `data: {`
6.  `students: [{student_id:100100,name:'Jack'}, {student_id:'100102', name: 'Tom'}]`
7.  `}`

### 2.7.9 数组重新渲染 ###

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

1.  `push()`
2.  `pop()`
3.  `shift()`
4.  `unshift()`
5.  `splice()`
6.  `sort()`
7.  `reverse()`

你打开控制台，然后用前面例子的 items 数组调用突变方法：

example1.items.push({ message: 'Baz' })

对于诸如filter(), concat(), slice()等非变异方法，替换掉整个数组即可。Vue 实现了一些智能启发式方法来最大化 DOM 元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

不过换个思路，如果我不希望真正改变数组的顺序或者值，可以使用计算属性或Methods实现

### 2.7.9 数组渲染时的缺陷与解决办法 ###

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1.  当你直接设置一个项的索引时，例如： vm.items\[indexOfItem\] = newValue
2.  当你修改数组的长度时，例如： vm.items.length = newLength

Vue也提供了解决问题的办法，解决第一个问题：

1.  `// Vue.set`
2.  `Vue.set(example1.items, indexOfItem, newValue)`
3.   
4.  ``// Array.prototype.splice` ``
5.  `example1.items.splice(indexOfItem, 1, newValue)`

解决第二个问题：

example1.items.splice(newLength)

2.8 事件监听器

### 2.8.1 内联监听器 ###

可以为事件监听器传递参数，如果需要传递事件event对象，则写成$event的形式

1.  `<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>`
2.   
3.  `...`
4.  `methods:{warn:function (message, event) {... ...}}`
5.  `...`

### 2.8.2 在HTML上绑定事件？！ ###

你可能注意到这种事件监听的方式违背了关注点分离（separation of concern）传统理念。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1.  扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2.  因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3.  当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

### 2.8.3 事件修饰符 ###

Vue提供的事件修饰符将常见的事件设置（比如阻止元素默认事件，或阻止事件冒泡）旨在让我们的Methods更加关注数据逻辑。通过由点(.)表示的指令后缀来调用修饰符。

常见的事件修修饰符有以下几个：

1.  .stop // 阻止事件冒泡
2.  .prevent // 阻止元素默认事件
3.  .capture // 使用事件捕获模式监听事件
4.  .self //只当事件在该元素本身（而不是子元素）触发时触发回调

事件修饰符可以串联使用：

### 2.8.4 按键修饰符 ###

修饰符中还有一种按键修饰符，其值是键盘按键的keycode或者预先定义好的keycode别名，例如：

1.  `<input v-on:keyup.13="submit">`
2.  `<input v-on:keyup.enter = "submit">`

当按下回车键时，执行submit。

下面是全部的按键别名：

1.  enter
2.  tab
3.  delete (捕获 “删除” 和 “退格” 键)
4.  esc
5.  space
6.  up
7.  down
8.  left
9.  right

我们也可以为按键自定义别名：