Vue应用核心

 

一　　简介

 

　　1，什么是vue

　　Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。所谓渐进式便是指咱们能够经过Vue构建从简单到复杂的页面应用，而且Vue.js压缩文件只有33K，构建简单的页面不会显得臃肿，同时Vue构建的复杂页面也不会显得简陋。

　　Vue实现了DOM对象和数据的双向绑定，你不用直接操做DOM，这项工做彻底由Vue来完成，你能够把更多的精力放到业务逻辑上来。

 

　　2，安装

　　Vue目前最新的版本是2.6.x。固然，Vue也提供了开发版和生产版两种文件。因为Vue使用了ECMAScript 5的特性，因此IE8及以前版本的浏览器不被支持。

　　Vue支持多种方式安装，<script>标签、CDN，CLI以及NPM。学习阶段建议使用MDN或本地引入。

　　若是你想构建大型应用，请使用NPM安装，方便配合webpack或相似的打包工具。若是你正在开发单页面应用（SPA），那么Vue提供的CLI工具多是更好的选择。这两种方式请关注Vue官网。

1 //MDN
2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3 //本地
4 <script src="js/vue.js"></script>

 

二　　vue实例

 

　　1，建立Vue实例

　　一般，每一个Vue的应用都是经过建立一个Vue实例开始的：

1 var vm = new Vue({ 2   // some code
3 })；

　　vm是ViewModel的缩写，许多文档或教程也使用app来接收返回的对象，这都无所谓了，你只要知道咱们须要声明一个变量来接收Vue实例就好了。

　　在建立Vue实例时，你能够传递一个对象，这个对象包含了你可能要用到的数据、方法、Vue实例生命周期钩子等。稍后将一一讲解。

 

　　2，数据

　　当一个 Vue 实例被建立时，参数对象的data属性绑定的对象中的全部属性都被加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即修改成新的值。通常这会体现到HTML页面上。

 1 var obj = {name: 'ren'};  2 var vm = new Vue({  3  data: obj  4 });  5 //你能够直接使用vm代替data来访问其绑定的对象属性（这里是obj.name）
 6 obj.name = 'pen';  7 vm.name;//'pen'
 8 
 9 vm.name = 'ken'; 10 obj.name;//'ken'
11 //以上便可验证Vue的数据双向绑定

　　须要注意的是，要想实现数据的双向绑定，在建立Vue实例以前，这些数据就应该已经被定义了。

1 //接上面的例子
2 obj.age = 12; 3 vm.age;//undefined

　　另外一个须要注意的点是Object.freeze()，该方法会冻结对象，阻止修改对象现有的属性，这就意味了Vue的响应式系统没法再对该对象起做用了。

1 var obj = {}; 2 Object.freeze(obj); 3 var vm = new Vue({ 4  data: obj 5 }); 6 //这里vm和obj的双向绑定将失效

　　除了数据属性外，Vue还提供了一些有用的实例属性和方法，他们都有前缀$，用以区分用户变量。

1 vm.$data === data;//true
2 vm.$el === document.getElementById();//true
3 vm.$watch(); 4 vm.props;

　　Vue还有不少其余的属性和方法，详情请看Vue实例属性。

 

　　3，方法

　　Vue在初始化的时候，咱们还能够添加几个属性，methods、computed、watch。

 1 var vm = new Vue({  2     el:'#app',  3  data:{  4         firstName:'',  5         lastName:''
 6  },  7  methods:{  8         handler1:function(){},  9         handler2:function(){} 10  }, 11  computed:{ 12  fullName:fucntion(){ 13             return this.firstName + ' ' + this.lastName ; 14  }, 15  }, 16  watch:{ 17         fullName:function(){ 18             console.log('The name has changed again'); 19  } 20  } 21 });

　　methods中通常定义一些事件处理函数，使用v-on指令绑定；computed中通常定义须要复杂计算才能的出的值；watch通常用于侦听某些值的变化，好比例子中用于侦听fullName的变化，每当fullName发生变化，都会执行其绑定的函数。

　　

　　4，生命周期

　　每一个 Vue 实例在被建立时都要通过一系列的初始化过程。例如，须要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程当中也会运行一些叫作生命周期钩子的函数，这给了用户在不一样阶段添加本身的代码的机会。下面列举了几个经常使用的生命周期钩子函数。

 1 var vm = new Vue({  2  data:{},  3 //实例建立以前  4 beforeCreate:function(){},  5 //实例建立以后  6 created:function(){},  7 //实例挂载以前  8 beforeMount:function(){},  9 //实例挂载以后 10 mounted:function(){}, 11 //数据更新以前 12 beforeUpdate:function(){}, 13 //数据更新以后 14 updated:function(){} 15 });

　　完整的Vue实例生命周期示意图：

　　Vue经过vm.el挂载指定DOM元素，挂载DOM元素其实是用vm.$el替换原始的DOM元素。这样咱们就能够经过只操做虚拟的DOM元素vm.$el，来实现操做真实的DOM对象的目的了。

1 var vm = new Vue({ 2     el: '#app', 3  data:{} 4 }); 5 //记住，el经过id定位元素

 

三　　模板语法

 

　　1，插值

　　插值通常使用双大括号语法：{{ msg }}，中间添加变量名，这个变量通常是data或computed中的一个属性名。这样就能够实现HTML内容跟随变量变化了。

　　双大括号把内部的变量解析为文本，而经过v-html指令，可使浏览器把变量解析为HTML代码。v-html有一个特色：它必须添加到一个HTML元素上，变量生成的HTML代码最终都以该元素为祖先元素。

 1 <!-- 文本 -->
 2 <div id="app">{{ name }}</div>
 3 <!-- HTML -->
 4 <div id="app">
 5     <p v-html="html"></p>
 6 </div>
 7 <script>
 8     var obj = {  9  name:'ren', 10  html:'<span style="color:red"></span>'
11  }; 12     var vm = new Vue({ 13  el:'#app', 14  data:obj 15 }); 16 </script>

　　{{ }}里面不只能够填写简单的变量表达式，它同时也支持更为复杂的计算表达式。

1 <p>{{ number + 1 }}</p>
2 <p>{{ ok ? 'YES' : 'NO' }}</p>
3 <p>{{ message.split('').reverse().join('') }}</p>

 

　　2，指令

　　第一小节提到的v-html，和它相似的v-*什么的就时Vue提供的指令。好比，你能够经过v-once指令来实现一次性的插值，当数据改变时，插值处的内容不会再更新。

1 <div id="app" v-once>{{ name }}</div>

　　再好比，你要给HTML元素添加属性，那么你可能会用到v-bind指令。

<div v-bind:class="myClass"></div>
<!-- 元素将被添加一个mycalss变量保存的值的类，同时，它也能够是一个稍复杂的计算表达式，如'my'+msg。若是你想移除该属性，你只需把null赋值给对应的变量 -->

　　亦或是你要给HTML元素绑定事件，v-on指令能够帮你实现。

1 <a v-on:click="eventHandler">link</a>
2 <!-- eventHandler是事件处理函数 -->

　　v-model指令能够双向绑定元素的value值与指定的变量。

1 <input type='text' name='name' v-model='name'></input>
2 ***********************************************
3 var vm = Vue({ 4  data:{ 5         name:'ren'
6  } 7 }); 8 //输入框中的值会与vm.name同步

　　指令的做用是当指令绑定的表达式的值改变时，将其产生的连带影响，响应式地做用于 DOM。这里只需明白什么是Vue指令便可，经常使用的指令将在稍后的章节一一说明。

 

　　3，动态参数

　　若是你以为上面的方式有失灵活，那么Vue的动态参数或许可以帮到你。Vue从2.6.0开始，容许你使用复杂表达式来定义指令最终的参数，不过你应该用[]方括号把它括起来。

1 <a v-bind:[attributeName]="url"> link </a>
2 <!-- 具体哪一个属性会被添加，彻底依赖方括号中的表达式的计算值 -->

　　Vue指令还能够添加修饰符，使用.点来添加Vue指令的修饰符。例如.prevent，它告诉指令调用event.preventDefault()阻止事件默认行为。

1 <button v-on:submit.prevent="onSubmit">form</button>
2 <!-- 点击按钮时使用自定义函数，并经过.prevent阻止默认行为 -->

　　其余指令也有相应的修饰符，接下来的学习中会慢慢接触到。

 

　　4，简写

　　对于使用频率极高的v-bind和v-on指令，Vue提供了简写形式。

1 <!-- 完整语法 -->
2 <a v-bind:href="url">...</a>
3 <a v-on:click="doSomething">...</a>
4 <!-- 缩写 -->
5 <a :href="url">...</a>
6 <a @click="doSomething">...</a>
7 <!-- 使用：冒号代替v-bind:，使用@替代v-on: -->

 

四　　计算属性和侦听器

 

　　1，计算属性

　　模板内的表达式很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。

　　因此，若是须要通过复杂的逻辑才能获得最终的值，建议你使用Vue的计算属性。

 1 var vm = new Vue({  2   el: '#app',  3  data: {  4     name: 'ren'
 5  },  6  computed: {  7     reversedName: function () {  8       // `this` 指向 vm 实例
 9       return this.name.split('').reverse().join(''); 10  } 11  } 12 }); 13 ********************************************************************
14 <div id="app">{{reversedNmae}}</div>
15 //计算属性专门用于处理数据计算，须要指定返回值

　　

　　2，侦听器

　　侦听器的做用是动态的监测数据的变化。

 1 <input type='text' name='name' v-model='name'></input>
 2 *************************************************************
 3 var vm = Vue({  4  data:{  5         name:''
 6  }  7  watch:{  8         name:function(){  9  console.log(The name has changed again); 10  } 11  } 12 }); 13 //每当vm.name属性发生改变时，控制台都会输出一条信息

 

五　　class和style

　　操做元素的 class 列表和内联样式是数据绑定的一个常见需求。由于它们都是属性，因此咱们能够用 v-bind 处理它们：只须要经过表达式计算出字符串结果便可。

　　不过，字符串拼接麻烦且易错。所以，在将 v-bind 用于 class 和 style 时，Vue.js 作了专门的加强。表达式结果的类型除了字符串以外，还能够是对象或数组。

 

　　1，绑定class

　　绑定class属性有两种方式，对象和数组。

　　首先是对象方式，请看下面的例子：

1 <div class='class0' v-bind:class="{class1:isclass1,class2:isclass2}"></div>
2 *********************************************************
3 data:{ 4     isclass1:true, 5     isclass2:false
6 } 7 //经过data对象的isclass1和isclass2属性控制class1和class2是否被添加到div上，同时div上原来定义的class0不受影响

　　若是须要操做的class列表很大，那么你能够在data里添加一个classObj对象，专门用来存储class控制变量。你固然也能够经过计算属性computed来动态的计算哪些class属性会被添加到div上。

 1 <div v-bind:class="classObj"></div>
 2 ******************************************************
 3 //数据对象
 4 data:{  5  classObj:{  6         isclass1:true,  7         isclass2:true
 8  }  9 } 10 //计算属性
11 computed:{ 12     classObj:function(){ 13         return { 14         //既然使用计算属性，返回的对象应该是复杂计算得来的结果，因为只是举例，因此这里也只是简单的赋值了
15             isclass1:true, 16             isclass2:true
17  } 18  } 19 }

　　除了对象绑定class属性外，Vue还提供了数组绑定的方式。

1 <div v-bind:class="[class1,class2]">
2 ***************************************
3 data:{ 4  class1:'myClass', 5  class2:'yourClass' 6 }

　　数组方式还支持动态的绑定class属性，这是经过三元运算实现的。

1 <div v-bind:class="[iscalss1 ? class1 : '' , isclass2 ? class2 ： '',class3]"></div>
2 *****************************************************************
3 data:{ 4     isclass1:true, 5     isclass2:false
6  class3:'myClass' 7 } 8 //经过三元运算动态的绑定也能够和静态绑定组合使用

　　

　　2，绑定内联样式

　　内联样式使用过HTML标签的style属性实现的，因此Vue一样使用v-bind指令来添加内联样式。

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

　　注意，css属性名可使用驼峰式或短横线分隔样式，若果使用短横线分隔方式，记得用引号把它引发来。

　　直接绑定一个样式对象一般更好，这会让模板更清晰，同时也能够和class同样，使用Vue的计算属性conputed动态生成。

1 <div v-bind:style="styleObject"></div>
2 *************************************************
3 data: { 4  styleObject: { 5     color: 'red', 6     fontSize: '13px'
7  } 8 }

　　最后，绑定style属性也有数组语法，使用方式和绑定class的数组语法同样，这里再也不赘述。

 

六　　条件渲染

　　有时候咱们可能须要在特定状况才须要渲染某些HTML元素，另一些状况但愿隐藏它，Vue提供了条件渲染的方式。

　

　　1，v-if

　　v-if指令根据绑定的条件，来决定是否渲染该元素。同时Vue还提供了另外两个指令：v-else-if和v-else，这让条件渲染变得更加灵活和强大。

 1 <div v-if="answer === 'A'">A</div>
 2 <div v-else-if="answer === 'B'">B</div>
 3 <div v-else-if="answer === 'C'">C</div>
 4 <div v-else>D</div>
 5 ********************************************
 6 computed:function(){  7     //some code
 8     return answer;  9 } 10 //根据answer的值，决定渲染那个元素

　　请注意，在同一个逻辑区域内，使用这三个指令的元素必须紧挨着，否者他们会失效。另外，v-else-if能够出现屡次，而v-if和v-else只能在首位各出现一次。

　　若是你想一次控制多个元素，那么你能够把条件指令做用到<template>元素上，最终的渲染结果将不包含<template>元素，而只包含其内部的元素。

1 <template v-if="ok">
2   <h1>Title</h1>
3   <p>Paragraph 1</p>
4   <p>Paragraph 2</p>
5 </template>
6 //当v-if接收到真值时，<template>元素不会出如今页面上，而h1和p会出现

　　

　　2，v-show

　　v-show并非真正意义上的条件渲染，它只是简单的操控元素的display属性，来达到显示或隐藏元素的目的。而v-if不经保证元素隐藏，还能保证绑定的事件能被及时的销毁或重建。

1 <h1 v-show="ok">Hello!</h1>
2 <!-- 当ok为真值时，h1将被显示，不然将被隐藏 -->

 

七　　列表

　　在Vue中渲染列表须要用到v-for指令。v-for能够经过数组或对象渲染列表。

　　

　　1，数组渲染

1 <ul>
2     <li v-for="(value,index) in arr">{{index}}:{{value}}</li>
3 </ul>
4 **************************************************
5 data:{ 6     arr:[1,2,3] 7 } 8 //value是元素，index是下标，下标是可选的参数

　　你甚至能够显示一个数组通过过滤或排序后的版本，而不实际改变或重置原始数据。在这种状况下，能够建立一个计算属性，来返回过滤或排序后的数组。

 1 <li v-for="n in newArr">{{ n }}</li>
 2 ********************************************
 3 data: {  4   arr: [ 1, 2, 3, 4, 5 ]  5 },  6 computed: {  7   newArr: function () {  8     return this.arr.filter(function (val) {  9       return val % 2 === 0; 10  }) 11  } 12 }

 

　　2，对象渲染

 1 <ul>
 2     <li v-for="(value,name,index) in arr">{{parentMsg}}:{{index}}:{{value}}</li>
 3 </ul>
 4 **************************************************
 5 data:{  6     parendMsg:'parent',  7  arr:{  8         name:'ren',  9         age:12
10  } 11 } 12 //结果：
13 //parent:0:ren
14 //parent:1:age
15 //value是属性值，name是属性名，index是序号（通常同Object.keys()的顺序），name和key都是可选的

　　从上面例子能够看出，v-for指令不只能够访问绑定的对象，还能够访问其父域内的变量。

　　

　　3，渲染顺序

　　默认状态下，当绑定的数据项顺序被改变时，Vue不会主动的去修改已渲染的列表，若是要保证列表顺序始终与数据项一致，你应该给每一项的属性key提供一个惟一值，建议是数字或字符串等原始值。

1 <div v-for="(item,index) in arr" v-bind:key="index"></div>
2 <!-- 数组可使用index，对象可使用name -->

　　

　　4，更新检测

　　咱们知道，在JavaScript中，有不少方法能够修改数组和对象。可是，并非全部的方法都能触发Vue的响应，即并非全部的方法都能触发视图更新。

　　对于数组，Vue 不能检测如下数组的变更：

　　　　a：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue；

　　　　b：当你修改数组的长度时，例如：vm.items.length = newLength；

　　对于对象，Vue 不能检测对象属性的添加和删除。详情见本文2.2节。

　　幸运的是，Vue额外提供了vm.set方法来解决该问题。

 1 //Vue.set(object, name, value);
 2 var obj = {  3     name:'ren',  4     age:12
 5 };  6 var vm = new Vue({  7  data:{  8  person:obj  9  } 10 }); 11 vm.set(vm.person,'sex','male'); 12 //新的sex属性是响应式的。

　　须要注意的是，第一个参数必须是一个对象，即该data的属性应该绑定的是一个对象，才能使用该方法。

 

八　　表单

　　上面3.2小节简单介绍的v-model指令，这里将详细介绍表单与它的关系，及用法。

 

　　1，文本绑定

1 <!-- 单行文本 -->
2 <input v-model="message">
3 <p>Message is: {{ message }}</p>
4 <!-- 多行文本 -->
5 <p>{{ message }}</p>
6 <textarea v-model="message"></textarea>

　　请注意：在文本区域插值 <textarea>{{text}}</textarea>并不会生效，应用 v-model 来代替。

　　

　　2，单选

 1 <input type="radio" id="one" value="One" v-model="picked">
 2 <label for="one">One</label>
 3 <br>
 4 <input type="radio" id="two" value="Two" v-model="picked">
 5 <label for="two">Two</label>
 6 <br>
 7 <span>Picked: {{ picked }}</span>
 8 *****************************************************  9 data:{ 10     picked:'' 11 }

　　

　　3，复选

 1 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
 2 <label for="jack">Jack</label>
 3 <input type="checkbox" id="john" value="John" v-model="checkedNames">
 4 <label for="john">John</label>
 5 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
 6 <label for="mike">Mike</label>
 7 <br>
 8 <span>Checked names: {{ checkedNames }}</span>
 9 ***************************************************** 10 data:{ 11  checkNames:[] 12 } 13 <!-- 若是只有一个复选项，那么不使用数组会更方便 -->

　　

　　4，下拉列表

 1 <select v-model="selected">
 2     <option disabled value="">请选择</option>
 3     <option>A</option>
 4     <option>B</option>
 5     <option>C</option>
 6 </select>
 7 <p>Selected: {{ selected }}</p>
 8 ************************************************  9 data:{ 10  selected:''11 }

　　若是下拉列表式多选的，你能够给<select>标签增长一个multiple属性，而且selected属性须要绑定一个数组。

　　请注意，若是你但愿页面第一次载入时默认选中某一项，那么你应该给selected属性设置该默认值。

　　你也可使用v-for指令，动态的渲染下拉列表的选项。

 1 <select v-model="selected">
 2   <option v-for="option in options" v-bind:value="option.value">
 3  {{ option.text }}  4   </option>
 5 </select>
 6 <p>Selected: {{ selected }}</p>
 7 *****************************************************  8 data: {  9  selected: 'A', 10  options: [ 11  { text: 'One', value: 'A' }, 12  { text: 'Two', value: 'B' }, 13  { text: 'Three', value: 'C' } 14  ] 15 }

　　

　　5，修饰符

　　v-model指令的本质是监听用户输入事件，而后自动选取正确的方式来更新元素。v-model为不一样的元素使用不一样的属性、监听不一样的事件。

• • 　　text 和 textarea 元素使用 value 属性和 input 事件；
  • 　　checkbox 和 radio 使用 checked 属性和 change 事件；
  • 　　select 字段将 value 做为 prop 并将 change 做为事件。

　　请注意：v-model 会忽略全部表单元素的 value、checked、selected 特性的初始值，而老是将 Vue 实例的数据做为数据来源。因此，你应该经过 JavaScript 在组件的 data 选项中声明初始值。

　　咱们知道，默认状况下，v-model对text使用input事件，你能够经过修饰符lazy使Vue对其使用change事件；

　　若是想自动将用户的输入值转为数值类型，能够给 v-model 添加 number 修饰符；

　　若是要自动过滤用户输入的首尾空白字符，能够给 v-model 添加 trim 修饰符；

1 <!-- 在“change”时而非“input”时更新 -->
2 <input v-model.lazy="msg" >
3 <!-- 直接获得Number类型值 -->
4 <input v-model.number="age" type="number">
5 <!-- 得到首位没有空白字符的值 -->
6 <input v-model.trim="msg">

 

九　　事件

　　v-on指令用来监听DOM事件，并在事件触发时执行一些JavaScript代码。

　　

　　1，用法

1 <button v-on:click="counter += 1">Add 1</button>
2 <p>{{ counter}}</p>
3 ************************************************ 4 data:{ 5  counter:0 6 }

　　虽然v-on指令能够直接绑定JavaScript语句，但要实现稍复杂逻辑，使用Vue方法才是更好的选择。

 1 <button v-on:click="greet($event)">click me</button>
 2 ************************************************
 3 var vm = new Vue({  4     el:'',  5  data:{  6         name:'ren'
 7  },  8  methods:{  9         greet:function(event){//event：原生DOM事件对象
10              alert(this.name);//this：当前Vue实例,这里是vm
11  } 12  } 13 });

　　方法也能够直接用JavaScript调用：vm.greet()；

　　

　　2，事件修饰符

　　在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是很是常见的需求。尽管咱们能够在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

　　为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。以前提过，修饰符是由点开头的指令后缀来表示的。

• • 　　.stop 阻止事件冒泡
  • 　　.prevent 阻止默认行为
  • 　　.capture 使用捕获事件
  • 　　.self 事件源对象
  • 　　.once 仅执行一次的事件处理器
  • 　　.passive 不阻止默认行为，会是.prevent失效

　　事件修饰符是能够链式使用的，不过须要注意他们的顺序：

1 <!-- 阻止事件冒泡和默认行为，而后执行一些操做 -->
2 <a v-on:click.stop.prevent="doSomthing"></a>
3 <!-- 阻止事件冒泡和默认行为，不执行其余操做 -->
4 <form v-on:submit.prevent></form>

　　

　　3，系统修饰符

　　能够用以下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• • 　　.ctrl
  • 　　.alt
  • 　　.shift
  • 　　.meta （IOS的command 键，Windows的Win键）

1 <!-- Alt + C -->
2 <input @keyup.alt.67="clear">
3 <!-- Ctrl + Click -->
4 <div @click.ctrl="doSomething">Do something</div>

　　一个特别的修饰符：.exact，它用于精确的指定组合按键以触发相关事件。

1 <!-- 只要ctrl键被按下就会触发，无论有无其余按键 -->
2 <button @click.ctrl="onClick">A</button>
3 <!-- 有且只有 Ctrl 被按下的时候才触发 -->
4 <button @click.ctrl.exact="onCtrlClick">A</button>
5 <!-- 没有任何系统修饰符被按下的时候才触发 -->
6 <button @click.exact="onClick">A</button>

　　

　　4，鼠标修饰符

　　鼠标修饰符只有3个：.left、.right、.middle。这些修饰符会限制处理函数仅响应特定的鼠标按钮。

1 <!-- 只响应左键 -->
2 <button @click.left="onClick">A</button>
3 <!-- 只响应右键 -->
4 <button @click.right="onClick">A</button>
5 <!-- 只响应中键 -->
6 <button @click.middle="onClick">A</button>

 

　　关于Vue.js的基础应用就先介绍到这儿，下一次更新将带来Vue的核心：组件。