Vue入门——认识Vue、Vue的指令、生命周期等

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，
vue.js和React.js发展速度最快，AngularJS还是老大。

   
   

   
   
1
2

node -v
   
   

   
   

npm install nrm -g

   
   

   
   
1

   
   

   
   
1

   
   

   
   
1

    
        {{name}}，非常帅！！！
    



    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

• 首先通过 new Vue()来创建Vue实例
• 然后构造函数接收一个对象，对象中有一些属性：
  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
    • name：这里我们指定了一个name属性
• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

打开页面查看效果：

更神奇的在于，当你修改name属性时，页面会跟着变化：

我们对刚才的案例进行简单修改：

    
        
        
            {{name}}，非常帅！！！有{{num}}位女神为他着迷。
        
    



    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5
        }
    });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

• 我们在data添加了新的属性：num
• 在页面中有一个input元素，通过v-model与num进行绑定。
• 同时通过{{num}}在页面输出

效果：

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

• input与num绑定，input的value值变化，影响到了data中的num值
• 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

我们在页面添加一个按钮：

点我
 
 

 
 

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
• 普通click是无法直接操作num的。

效果：

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})
 
 

 
 
1
2

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

• el
• data
• methods

等等

接下来我们一 一介绍。

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

• 1
• 2

然后创建Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})
 
 

 
 
1
2

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

    

 
 

 
 
1
2

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})
 
 

 
 
1
2
3
4
5

• name的变化会影响到input的值
• input中输入的值，也会导致vm中的name发生改变

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

html:

    {{num}}
    加

 
 

 
 
1
2
3

js:

var vm = new Vue({
    el:"#app",
    data:{
        num: 0
    },
    methods:{
        add:function(){
            // this代表的当前vue实例
            this.num++;
        }
    }
})
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥

beforeDestroy：该函数将在销毁实例前进行调用 。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新之前。

updated：组件更新之后。

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：

    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5
        },
        methods: {
            add: function(){
                this.num--;
            }
        },
        created: function () {
            this.num = 100;
        }
    });
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果：

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

        methods: {
            add: function(){
                this.num--;
                console.log(this);
            }
        },
 
 

 
 
1
2
3
4
5

控制台的输出：

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

格式：

{{表达式}}

 
 

 
 
1

说明：

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
• 可以直接获取Vue实例中定义的数据或函数

示例：

HTML：

{{name}}
 
 

 
 

JS:

var app = new Vue({
    el:"#app",
    data:{
        name:"Jack"
    }
})
 
 

 
 
1
2
3
4
5

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：

刷新页面：

使用v-text和v-html指令来替代{{}}

说明：

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

HTML:

    v-text: 
    v-html:

 
 

 
 
1
2
3

JS:

var vm = new Vue({
    el:"#app",
    data:{
        hello: "大家好，我是峰哥"
    }
})
 
 

 
 
1
2
3
4
5

效果：

并且不会出现插值闪烁，当没有数据时，会显示空白。

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

• input
• select
• textarea
• checkbox
• radio
• components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

举例：

html：

    Java
    PHP
    Swift
    
        你选择了：{{language.join(',')}}
    



    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型
• radio对应的值是input的value值
• text 和textarea 默认对应的model是字符串
• select单选对应字符串，多选对应也是数组

效果：

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

 
 

 
 
1

示例：

    
    增加一个
    
    减少一个
    有{{num}}个女神迷恋峰哥



    var app = new Vue({
        el:"#app",
        data:{
            num:100
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果：

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

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

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

• .stop ：阻止事件冒泡到父元素
• .prevent：阻止默认事件发生*
• .capture：使用事件捕获模式
• .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
• .once：只执行一次

阻止默认事件

    
    增加一个
    
    
    减少一个
    
    有{{num}}个女神迷恋峰哥



    var app = new Vue({
        el: "#app",
        data: {
            num: 100
        },
        methods: {
            decrement(ev) {
                // ev.preventDefault();
                this.num--;
            }
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果：（右键“增加一个”，不会触发默认的浏览器右击事件；右键“减少一个”，会触发默认的浏览器右击事件）

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

 
 

 
 
1

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

• 1
• 2
• 3
• 4

全部的按键别名：

• .enter*
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

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

• .ctrl
• .alt
• .shift

例如：

Do something

• 1
• 2
• 3
• 4

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

语法：

v-for="item in items"

 
 

 
 
1

• items：要遍历的数组，需要在vue的data中定义好。
• item：迭代得到的数组元素的别名

示例

    
        
            {{user.name}} - {{user.gender}} - {{user.age}}
        
    



    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        },
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果：

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

 
 

 
 
1

• items：要迭代的数组
• item：迭代得到的数组元素别名
• index：迭代到的当前元素索引，从0开始。

示例

    
        
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        
    
 
 

 
 
1
2
3
4

效果：

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
 
 

 
 
1
2

• 1个参数时，得到的是对象的属性值
• 2个参数时，第一个是属性值，第二个是属性名
• 3个参数时，第三个是索引，从0开始

示例：

    
        
            {{index + 1}}. {{key}} - {{value}}
        
    



    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'峰哥', gender:'男', age: 18}
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：

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

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例：

    

 
 

 
 
1
2

• 这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
• 这里我们绑定的key是数组的索引，应该是唯一的

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

 
 

 
 
1

示例：

    点我呀
    
    
        看到我啦？！
    
    
        看到我啦？！show
    



    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果：

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

修改v-for中的案例，添加v-if：

    
        
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        
    
 
 

 
 
1
2
3
4

效果：

只显示女性用户信息

你可以使用 v-else 指令来表示 v-if 的“else 块”：

    
        看到我啦？！if
    
    
        看到我啦？！else
    

 
 

 
 
1
2
3
4
5
6
7

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

    点我呀{{random}}
    
        看到我啦？！if
    
    
        看到我啦？！if 0.5
    
    
        看到我啦？！if 0.25
    
    
        看到我啦？！else
    



    var app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

演示：

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

Hello!

 
 

 
 
1

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

示例：

    
        
        点击切换
        
            你好
        
    
    
    
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码：

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    
    



    var app = new Vue({
        el: "#app",
        data: {
            title: "title",
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

效果：

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

数组语法

我们可以借助于v-bind指令来实现：

HTML：

    
    
    



    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

渲染后的效果：（具有active和hasError的样式）

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

 
 

 
 
1
2

和如下 data：

data: {
  isActive: true,
  hasError: false
}
 
 

 
 
1
2
3

结果渲染为：

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

数组语法

数组语法可以将多个样式对象应用到同一个元素上：

数据：

data: {
    baseStyles: {'background-color': 'red'},
    overridingStyles: {border: '1px solid black'}
}
 
 

 
 
1
2
3

渲染后的结果：

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：