前言：

 本篇文章主要讲解了Vue实例对象的创建、常用内置指令的使用、自定义组件的创建、生命周期（钩子函数）等。以及个人的心得体会，汇集成本篇文章，作为自己对Vue基础知识入门级的总结与笔记。

 其中介绍了使用Vue框架创建一个简单的学生列表实现增加和删除数据信息的功能，对自己初次了解Vue的基础知识做一个检验是个不错的选择。

文章篇幅较长，还请读者可以耐心看完（适合刚接触Vue框架的新人）

以下所有案例代码均在此模板下完成

 1 
 2 
 3 
 4   
 5   
 6   
 7   
 8   <--此时vue.js文件和案列文件处于同一目录-->
 9     
10     
11 
12     
13     <--在此处添加以下案列代码，即可实现其功能-->
14     <--具体如何插入代码可参考学生列表案例（下文第一个案例）-->
15         
16 
17 

一、学生列表案例的实现

案例概述：使用Vue数据绑定和事件处理等基础知识实现对学生列表中学生的添加和删除操作(动图演示)

1. 在table标签中编写具体表格结构代码。
2. 创建vm实例对象并定义students数组用来存储学生信息。
3. 在methods选项中定义事件处理函数add()添加学生信息。
4. 在methods中定义事件处理函数del()删除学生信息。

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

13     添加学生
14     删除学生

15     
16       
17         
18         
19         
20         
21       
22       
23         
24         
25         
26         
27       
28     
班级
姓名
性别
年龄
{{item.grade}}
{{item.name}}
{{item.gender}}
{{item.age}}
29   
30   
67 
68 

点击添加学生

重点代码分析;

1 // 删除 方法1
2         del () {
3           this.students.pop()
4         }
5  // 删除 方法2
6         // del (index) {
7         //   this.students.splice(index, 1)
8         // }
9       }

删除数据信息有两种实现方法

方法1中是默认从列表尾部删除一行数据信息

方法2中是按照splice(index, 1)中的参数从列表尾部删除一行或多行数据信息

二、Vue实例创建

1.如何创建Vue实例

通过new关键字实例化Vue({})构造函数。

1 

2.3methods基本概念

• pmethods属性用来定义方法，通过Vue实例可以直接访问这些方法
• p在定义的方法中，this指向Vue实例本身
• p定义在methods属性中的方法可以作为页面中的事件处理方法使用
• p当事件触发后，执行相应的事件处理方法

案例展示：

1. 编写初始页面结构。
2. 在methods选项中定义showInfo()方法，实现页面内容的更新。

 1 

 2     
 3     请单击
 4     
{{msg}}
 5   
 6                        

 单击页面中的“请单击”按钮，更新页面内容。

 2.4computed计算属性

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

案例展示：根据商品单价和数量计算出商品的总价格。

1. 首先编写总价格页面结构。
2. 在computed中定义totalPrice函数返回计算后的总价格。

 1 

 2     
总价格：{{totalPrice}}
 3     
单价：{{price}}
 4     
数量：{{num}}
 5     

 6       减少数量
 7       增加数量
 8     
 9   
10   

2.5watch状态监听                                                            

案例展示：通过watch获取cityName的新值和旧值。

1. 首先定义vm实例对象。
2. 在Vue配置对象中定义watch监听cityName属性。

 1 

 2     
 3     
 4   
 5   

在浏览器查看运行效果。

2.6filters过滤器                                                            

在页面中直接操作数据，返回最终结果。

案例展示：在插值表达式中使用filters过滤器，将小写字母转换成大写字母。

1. 编写初始页面结构。
2. 首先创建vm实例对象，并定义message初始数据。
3. 在vm中定义filters过滤器，并在filters中定义toUpcase()方法实现小写字母转大写字母。
4. 编写页面结构。
5. 定义vm实例对象。
6. 在vm实例对象中定义filters，并在filters中定义formatId()方法实现属性的过滤。

 1  

 2     
{{message | toUpcase}}
 3   
 4   

在v-bind属性绑定中使用filters过滤器。

三、Vue数据绑定

1.绑定样式

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。

案例展示：通过绑定data中的类名实现元素的样式。

1. 通过v-bind绑定类名，并设置类名的值为{box}和{inner}。
2. 在vm实例的data中定义box和inner的属性值分别是box和inner。

 1 
 2 
 3 
 4   
 5   
 6   
19   
20 
21 
22   

23     
我是box
24       
我是inner1
25       
我是inner2
26     
27   
28   
37 
38 

2.内置指令

Vue官网（API — Vue.js (vuejs.org)）介绍的内置指令有14个，这里只介绍其中的8种常用指令。

2.1v-model双向数据绑定

v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。

案例展示：实现表单元素双向数据绑定。

 1 

 2     
 3   
 4   

2.2v-on监听事件

v-on是事件监听指令，直接与事件类型配合使用

案例实现：在vm实例的methods中定义事件处理函数showInfo()。

 1  

 2     
{{msg}}
 3     请单击
 4   
 5   

单击“请单击”按钮，页面中的内容发生更新。

2.3v-bind单向数据绑定

v-bind可以实现属性单向数据绑定

案例实现：将data中的msg初始数据绑定到页面中 。

 1  

 2     
 3   
  
 4   

2.4v-text插入文本内容

 v-text是在DOM元素内部插入文本内容

案例展示：在vm实例的data中定义msg初始数据。

 1  

 2     

 3   
 4   

2.5v-html插入包含HTML的内容

v-html是在DOM元素内部插入HTML标签内容

案例实现：将msg初始数据绑定到页面中。

 1 

 2     

 3   
 4   

2.6v-for列表渲染

 v-for可以实现页面列表渲染，常用来循环数组

案例实现：创建vm实例并在data中定义数组list。

 1 

 2     

 3       索引是：{{key}}，元素内容是：{{item}}
 4     
 5   
 6   

2.7v-if条件渲染和v-show显示隐藏

v-if用来控制元素显示或隐藏，属性为布尔值

案例实现： 创建vm实例并在data中定义isShow属性。

 1 

 2     
我是v-if
 3     显示/隐藏
 4   
 5   

单击“显示/隐藏”按钮，控值“我是v-if”的显示和隐藏。

                                    

四、Vue事件处理

1.事件监听  

v-on绑定事件：在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。

案列展示：使用按键enter修饰符监听按键

1. 在页面中定义表单元素input输入框。
2. 创建vm实例对象并在methods中定义submit()事件处理函数。
3. 在浏览器中查看运行效果。

 1 

 2     
 3   
 4   

  2.事件修饰符                                                            

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

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

2.1 .stop阻止事件冒泡

在前端开发中，复杂的页面结构需要很多事件来完成交互行为

默认的事件传递方式是冒泡，同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以就需要使用.stop修饰符阻止事件冒泡行为

案例展示：通过.stop修饰符实现阻止事件冒泡。

1. 在div元素内部定义按钮，分别为“事件冒泡”和“阻止事件冒泡”。
2. 创建vm实例并定义methods选项。
3. 在methods中定义doParent()和doThis事件处理函数。

 1  

 2     

 3       事件冒泡
 4       阻止事件冒泡
 5     
 6   
 7   

2.2.prevent阻止默认事件行为

HTML标签具有自身特性，例如，标签被单击时会自动跳转。在实际开发中，如果标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止标签的默认行为。

案例展示：通过.prevent修饰符阻止默认事件行为。

定义a标签，并设置href属性值为“https://www.baidu.com”。

1  

2     阻止默认行为
3     不阻止默认行为
4   
5   

2.3.capture事件捕获

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

1. 编写页面结构代码。
2. 创建vm实例对象，并定义methods选项。
3. 在methods中分别定义doParent()和doThis事件处理函数。

 1  

 2     

 3       事件捕获
 4     
 5   
 6   

2.4.self将事件绑定到自身，只有自身才能触发

事件修饰符.self用来实现只有DOM元素本身会触发事件。

1. 定义页面结构代码，并绑定单击事件。
2. 在methods中定义doParent()和doThis()事件处理函数。

 1 
 2 
 3 
 4   
 5   
 6     
10   
11 
12 
13   

14     
a
15       
b
16     
17     
c
18       
d
19     
20   
21   
34 
35 

2.5.once事件只触发一次

只触发一次事件处理函数

 1  

 2     只执行一次
 3   
 4   

五、Vue扩展组件

1.组件的定义

组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。

组件特性：

• 能够减少重复代码的编写，提高开发效率。
• 降低代码之间的耦合程度，使项目更易维护和管理。
• 根据业务逻辑实现复杂的项目功能。

案例展示：在根标签中，通过标签定义组件页面结构。

注册计数器组件。

 1 

 2     
 3     
 4     
 5   
 6   

2.局部注册组件                                                             

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。

1. 定义根标签。
2. 设置components选项中myComponent的属性值为com1。

 1 

 2     
 3   
 4   

3.template模板

Vue提供了