Vue.js应用基础

 

一　　简介

 

　　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支持多种方式安装， 3 //本地 4

 

二　　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发生变化，都会执行其绑定的函数。watch属性还可以监听像url地址这样的，无法通过原始DOM事件监听的东西。

　　

　　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 
 4 <div id="app">
 5     <p v-html="html">p>
 6 div>
 7 <script>
 8     var obj = {
 9         name:'ren',
10         html:''
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指令。

1 <div v-bind:class="myClass">div>
2 

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

1 <a v-on:click="eventHandler">linka>
2 

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

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

　　指令的作用是当指令绑定的表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

　　如果Vue提供的指令不够用，你还可以自定义Vue指令，用以实现某些特殊的功能。

1 // 注册一个全局自定义指令 `v-focus`
2 Vue.directive('focus', {
3   inserted: function (el) {
4     el.focus()
5   }
6 })

　　方法的第一个参数是自定义的指令名称，第二个参数是一个对象，对象中可以是一些钩子函数，所有钩子函数的第一个参数固定是绑定的DOM元素，依据不同的钩子函数，还可以传递其他不同的参数。这些钩子函数将规定绑定了该指令的元素在不同时期内将要实现的功能。

　　上面的例子简单的创建了一个使DOM元素在插入HTML文档后自动获取焦点的指令。需要注意的是，定义指令名称时不需要v-前缀。更多关于自定义Vue指令的信息，请移步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">formbutton>
2 

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

 

　　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 

 

四　　计算属性和侦听器

 

　　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 
{{reversedNmae}}
15 //计算属性专门用于处理数据计算，需要指定返回值

　　

　　2，侦听器

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

 1 
 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 

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 

 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 

2 ***************************************
3 data:{
4     class1:'myClass',
5     class2:'yourClass'
6 }

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

1 

2 *****************************************************************
3 data:{
4     isclass1:true,
5     isclass2:false
6     class3:'myClass'
7 }
8 //通过三元运算动态的绑定也可以和静态绑定组合使用

　　

　　2，绑定内联样式

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

1 

2 ************************************************
3 data: {
4   myColor: 'red',
5   fontSize: 30
6 }

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

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

1 

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

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

　　如果你想一次控制多个元素，那么你可以把条件指令作用到