Vue 学习笔记（一）

Vue 学习笔记（一）

文章目录

• Vue 学习笔记（一）
• 一、Vue 概述
• 二、 搭建Vue环境
• 三、Vue 知识详解
• • 1. hello 小案例
  • 2. Vue 模板语法
  • • 1. 插值语法
    • 2. 指令语法
    • 3. 数据绑定
  • 3. data 与 el
  • 4. MVVM 模型
  • 5. 数据代理
  • 6. 事件处理
  • • 1. 事件的基本使用：
    • 2. 事件修饰符
    • 3. 键盘事件
    • 4. 鼠标事件
  • 7. 计算属性（computed）
  • 8. 监视属性（watch）
  • 9. 绑定样式
  • 10. 条件渲染
  • 11. 列表渲染
  • • 1. 基本原理
    • 2. key的原理
    • 3. 列表过滤
    • 4. 列表排序
    • 5. 更新时的一个问题
    • 6. Vue监测数据改变的原理_对象
    • 7. 模拟一个数据监测
    • 8. Vue.set的使用
    • 9. Vue监测数据改变的原理_数组
    • 10. 总结Vue数据监测

一、Vue 概述

Vue 官网

Vue 一套用于构建用户界面的渐进式JavaScrip 框架。Vue 可以自底向上逐层的应用

• 简单应用：只需一个轻量小巧的核心库。
• 复杂应用：可以引入各式各样的 Vue 插件。

Vue 的特点：

1. 采用组件化模式，提高代码的复用率，且让代码更好维护。（如下图：三个模块类似三个组件，我们修改只需在对应的组件里修改Html或JS文件即可）
   

2. 声明式编码，让编码人员无需直接操作 DOM ，提高开发效率。
   

3. 使用虚拟DOM + 优秀的Diff 算法，尽量复用 DOM 节点。

二、 搭建Vue环境

下载Vue
Vue分为开发版本（比较大的，会有很多警告和调试模式）和min版本的（体积小，适合用于生产环境的）。

下载Vue开发者工具（便于调试Vue）：它是浏览器的扩展程序

浏览器安装程序后：

三、Vue 知识详解

1. hello 小案例

    
    
    
    
    
        

            
hello,{{name}}
        
    
    
    

• Vue.config.productionTip = false 在我们访问页面的时候，会出现提示：
  

增加该注解后该提示后就能去除。

访问效果

案例总结：

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
• root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
• root容器里的代码被称为【Vue模板】。
• Vue 容器和实例时一一对应的。
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用。
• {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

注意：new Vue 一个实例只能接管一个容器

    
    
    
    
    
        

            
hello,{{name}}
        
        

            
hello,{{name}}
        
    
    
    

效果：只能接管到匹配到的第一个容器

一个容器也只能被一个Vue实例操作，当出现多个实例时，会报错：

    
    
    
    
    
        

            
hello,{{name}}，{{adress}}
        
        
    
    
    

实例中的 data 属性，我们也可以进行设置层级，如：

效果如下：

2. Vue 模板语法

1. 插值语法

2. 指令语法

功能：

• 用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
• 比如 v-bind:href=“xxx” 或者 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
• Vue有很多指令，且形式都是：v-。此处我们只是拿v-bind举个栗子。

v-bind:[ 属性 ] = :[ 属性 ]

页面效果：

3. 数据绑定

Vue有两种数据绑定：

1. 单向绑定（v-bind）：数据只能从data流向页面。
2. 双向绑定：数据不仅能从data流向页面，还可以从页面流向data。

注：

1. 双向绑定一般都应用在表单类元素上（如input，select 等）。

2. v-model:value 可以简写为 v-model，因为v-model 默认收集的就是value值。

   初识Vue
   单向数据绑定:
   双向数据绑定:
   

           
           单向数据绑定: 
   
           双向数据绑定: 
   
   
           
           
   你好啊
       

3. data 与 el

data 的两种写法：

1. .new Vue 时候配置el属性
2. 先创建Vue实例，随后在通过vm.$mount(’#root’) 指定el的值。

data 的两种写法：

1. 对象式
2. 函数式

如何原则 data 的写法呢，目前两种写法都可以，以后学习到组件时，data 必须使用函数式，否则会报错。

注意： 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是 Vue 实例了。

    
    
    
    
    
        

            
hello,{{name}}
        
        
    
    
    

4. MVVM 模型

• M：模型（Model）：对应data 中的数据
• V：试图（View）：模板
• VM：试图模型（ViewModel）：Vue实例对象。
  
  虽然没有完全遵循MVVM模型，但是Vue的设计也收到了它的启发。因此在文档中经常会使用（ViewModel的缩写），这个变量名表示Vue实例。
  
  探索发现：

1. data中所有的属性，最后都出现在了vm身上。
2. vm 身上所有的属性 及 Vue原型上所有的属性，在Vue模板中都可以直接使用。
   
   

5. 数据代理

Object.defineProperty： 可以动态的个对象绑定属性并赋予值。

    
    
    
    
    
        

            
hello,{{name}}
        
        
    
    
    

数据代理： 通过一个对象代理对另一个对象中属性的操作（读/写），就给简单的小栗子：

    
    
    
    
    
        

            
hello,{{name}}
        
        
    
    
    

Vue 中的数据代理：

• Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
• Vue 中数据代理的好处：更加方便的操作data中的数据
• 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性

就比如：

    
    
    
    
    
        

            
hello,{{name}},{{adress}}
        
        
    
    
    

其中 {{name}} 和 {{adress}} 读取的是 vm 中的_data.name 和 _data.adress。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性

6. 事件处理

1. 事件的基本使用：

1. 使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名。
2. 事件的回调需要配置在methods对象中，最终会在vm上。
3. methods 中配置的函数，不要用箭头函数，否则 this 就不是 vm 了。
4. methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象。
5. @click=‘demo’ 和 @click=“demo($event)” 效果一致，但后者可以传参。

代码：

    
    
    
    
    
        

            
hello,{{name}}
            
            点我提示信息(不传参)
            点我提示信息(传参)
        
        
    
    
    

2. 事件修饰符

Vue中的事件修饰符：

1. prevent：阻止默认事件（常用）；

2. stop：阻止事件冒泡（常用）；

3. once：事件只触发一次（常用）；

4. capture：使用事件的捕获模式；

5. self：只有event.target是当前操作的元素时才触发事件；

6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

   事件修饰符

3. 键盘事件

Vue中常用的按键别名：

1. 回车 => enter
2. 删除 => delete (捕获“删除”和“退格”键)
3. 退出 => esc
4. 空格 => space
5. 换行 => tab (特殊，必须配合keydown去使用)
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta

1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
2. .配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）

Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

	
	
	
	


	
	

		
欢迎来到{{name}}学习
		
		
		
	

4. 鼠标事件

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

1. .left

2. .right

3. .middle

   事件的基本使用

   欢迎来到{{name}}学习

   点我提示信息1（不传参）

7. 计算属性（computed）

姓名案例_插值语法实现：

	
	
	
	


	
	

		姓： 


		名： 


		全名：{{firstName.slice(0,3)}}-{{lastName}}
		
		
	

姓名案例_methods实现：

	
	
	
	


	
	

		姓： 


		名： 


		全名：{{fullName()}}
                //fullName带括号表示将函数的返回值展示出来
	

计算属性：

1. 定义： 要用的属性不存在，要通过已有属性(Vue实例中的属性)计算得来。
2. 原理： 底层借助了Object.defineproperty方法提供的getter和setter。
3. 计算属性最终会出现在vm上，直接读取使用即可。不能写fullName.get（），没有这种写法。
4. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

计算属性里的get函数什么时候会执行呢？

1. 初次读取时会执行一次。
2. 当依赖的数据发生改变时会被再次调用。

计算属性优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

举个栗子：

	
	
	
	



	
	

		姓： 


		名： 


		测试： 


		全名：{{fullName}} 


		全名：{{fullName}} 


		全名：{{fullName}} 


		全名：{{fullName}}
		
	

8. 监视属性（watch）

监视属性watch：

• 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
• 监视的属性必须存在，才能进行监视！！

监视的两种写法：

1. new Vue时传入watch配置
2. 通过vm.$watch监视

深度监视：

1. Vue中的watch默认不监测对象内部值的改变（一层）。因为watch 如果监视的是对象，则对象地址改变时才会触发，对象里某个值改变是不是触发监听的，但是深度监视开启则可以触发监听。
2. 配置deep:true可以监测对象内部值改变（多层）。

注意：

1. .Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
2. 使用watch时根据数据的具体结构，决定是否采用深度监视。

举个栗子：

	
	
	
	



	
	

		
今天天气很{{info}} {{x}}
		
		切换天气
		切换天气
                

		深度监视按钮：
		
a的值是:{{numbers.a}}
		点我让a+1
		
b的值是:{{numbers.b}}
		点我让b+1
		{{numbers.c.d.e}}
	

computed和watch之间的区别：

1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。computed不可以，因为computed依赖返回值得到结果。而watch则是得到属性改变的结果。

两个重要的小原则：

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

举个栗子：

	
	
	
	



	
	

		姓： 


		名： 


		全名：{{fullName}} 


	

9. 绑定样式

1. css 样式

   写法:class=“xxx” xxx可以是字符串、对象、数组。
   字符串写法适用于：类名不确定，要动态获取。
   数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
   对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

   :style="{fontSize: xxx}“其中xxx是动态值。
   :style=”[a,b]"其中a、b是样式对象。

栗子：

	
	
	
	



	
	

		
		
{{name}}
 



		
		
{{name}}
 



		
		
{{name}}
 



		
		
{{name}}
 


		
		
{{name}}
	

10. 条件渲染

1. 1.v-if

   写法：
   (1).v-if=“表达式”
   (2).v-else-if=“表达式”
   (3).v-else=“表达式”
   适用于：切换频率较低的场景。
   特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2. v-show

   写法：v-show=“表达式”
   适用于：切换频率较高的场景。
   特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉，display：none

3. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

   条件渲染

11. 列表渲染

1. 基本原理

	
		
		
		
	
	
		
		
		

			
			
人员列表（遍历数组）
			

				

					{{p.name}}-{{p.age}}
				
			

			
			
汽车信息（遍历对象）
			

				

					{{k}}-{{value}}
				
			

			
			
测试遍历字符串（用得少）
			

				

					{{char}}-{{index}}
				
			
			
			
			
测试遍历指定次数（用得少）
			

				

					{{index}}-{{number}}
				
			
		

		

2. key的原理

	
		
		
		
	
	
		
		
		

			
			
人员列表（遍历数组）
			添加一个老刘
			

				

					{{p.name}}-{{p.age}}
					
				
			
		

		

3. 列表过滤

	
		
		
		
	
	
		
		

			
人员列表
			
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		

4. 列表排序

	
		
		
		
	
	
		
		

			
人员列表
			
			年龄升序
			年龄降序
			原顺序
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
					
				
			
		

		

5. 更新时的一个问题

	
		
		
		
	
	
		
		

			
人员列表
			更新马冬梅的信息
			

				

					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		

6. Vue监测数据改变的原理_对象

	
		
		
		
		
	
	
		
		

			
学校名称：{{name}}
			
学校地址：{{address}}
		
	

	

7. 模拟一个数据监测

8. Vue.set的使用

	
		
		
		
		
	
	
		
		

			
学校信息
			
学校名称：{{school.name}}
			
学校地址：{{school.address}}
			
校长是：{{school.leader}}
			

			
学生信息
			添加一个性别属性，默认值是男
			
姓名：{{student.name}}
			
性别：{{student.sex}}
			
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			
朋友们
			

				

					{{f.name}}--{{f.age}}
				
			
		
	

	

9. Vue监测数据改变的原理_数组

	
		
		
		
		
	
	
		
		

			
学校信息
			
学校名称：{{school.name}}
			
学校地址：{{school.address}}
			
校长是：{{school.leader}}
			

			
学生信息
			添加一个性别属性，默认值是男
			
姓名：{{student.name}}
			
性别：{{student.sex}}
			
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			
爱好
			

				

					{{h}}
				
			
			
朋友们
			

				

					{{f.name}}--{{f.age}}
				
			
		
	

	

10. 总结Vue数据监测

	
		
		
		
		
		
	
	
		
		
		

			
学生信息
			年龄+1岁 

			添加性别属性，默认值：男 

			修改性别 

			在列表首位添加一个朋友 

			修改第一个朋友的名字为：张三 

			添加一个爱好 

			修改第一个爱好为：开车 

			过滤掉爱好中的抽烟 

			
姓名：{{student.name}}
			
年龄：{{student.age}}
			
性别：{{student.sex}}
			
爱好：
			

				

					{{h}}
				
			
			
朋友们：
			

				

					{{f.name}}--{{f.age}}