day1学习vue2笔记 vue指令

 系列文章目录

day1学习vue2笔记 vue指令

day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios

day3 vue2 学习笔记 vue组件

day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法

day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints

day6 vue 学习笔记 vue-router路由

---

目录

1、什么是vue

     1、构建用户界面

    2、框架

2、vue的两个特性

  1、数据驱动视图

   2、双向数据绑定

  3、vue 调试工具 vue-devtoos

  4、指令的概念

1、内容渲染指令

 2、 属性绑定

3、事件绑定指令

4、双向绑定指令

5、条件渲染指令

6、列表渲染指令

总结

1、什么是vue

1、构建用户界面

2、框架

2、vue 的两个特性

1、数据驱动地图：

2、双向数据绑定

3、vue指令

1、内容渲染指令

2、属性绑定指令

3、事假绑定

4、双向绑定事件

5、条件渲染指令

6、列表渲染指令

---

1、什么是vue

     1、构建用户界面

• 用vue往html页面中填充数据，非常方便

    2、框架

• 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务逻辑功能
• 要学习vue，就是在学习vue框架中规定的用法
• vue的指令，组件（是对UI结构的复用）、路由，Vuex、vue组件库

只有把上面的掌握，才有开发vue项目的能力

---

2、vue的两个特性

  1、数据驱动视图

• 数据的变化会驱动视图的自动更新
• 好处：程序员只管吧数据维护好，那么页面结构会被vue自动渲染出来

   2、双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据

• js 的变化会被自动渲染到页面上
• 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双向绑定的底层原理是MVVM（model：数据源，View：视图，ViewModel：vue实例）

---

  3、vue 调试工具 vue-devtoos

ghrome浏览器  安装 vue-devtools:


FireFox 浏览器 安装 cue-devtools:
https://addons.mozilla.org/firefox/downloads/file/3975216/vue_js_devtools-6.2.1.xpi

---

  4、指令的概念

指令（Directives） 是vue为开发者提供的模板语法，用于辅助开发者渲染页面结构的基本内容

vue中的指令按照不同的用途可以分为如下6大类：

1. 内容渲染指令
2. 属性绑定指令
3. 事假绑定指令
4. 双向绑定指令
5. 条件渲染指令
6. 列表渲染指令

注意：指令是vue开发中最基础、最常用、最简单的知识点

---

1、内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3种：

 v-text：

注意：v-text 指令会覆盖元素内默认的值

 {{}}: vue提供的 {{  }} 语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种{{}语法的专业名称是插值表达式（英文名为:Mustache)。在实际运用中用的最多，只是内容的占位符不会覆盖原有的内容

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算，例如：

v-html : v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令:

总结：

• v-text 缺点会覆盖元素内部原有内容
• {{ }}：插入表达式，在实际开发中用的最多，只是内容占位符，不会覆盖原有的内容
•  v-html ：作用可以把带有标签的字符串，渲染成为真正的HTML内容

	
		
		
	
	
		

			
{{username}}
			
测试v-txt
			
v-html
		
	
	
	

---

  2、 属性绑定

         注意点：差值表达式只能用在元素的内容节点中，不能用在元素的属性节点中，

1、使用 v-bind:  或者  :

正确用法：v-bind:是给元素添加属性的时候使用

一般情况可直接使用英文冒号  “  :  ”即可替代 v-bind:  进行: 来进行动态绑定值

在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

 

---

3、事件绑定指令

vue提供了v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下

1、v-on：用于绑定事件，简写为 @

	
		
		
	
	
		

			cont的值:{{count}}
			

			+1
			-1
		
	
	
	

 

在绑定事件的时候可以通过小括号来进行传参。

注意：原始的DOM对象有onclik,oninput,onkeyup等原生事件，替换为Vue的时间绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup  ---》 @clik,@input,@keyup ...原始事件将原来的事件加@去掉on即可

//不传参会接收到  事件对象 e ==》是一个鼠标事件
//如果传参了就会覆盖原来的 e
//解决有传参不覆盖e 对象
// vue 提供了一个内置的变量，名字叫 $event ，他是原生的 DOM 的事件对象 e

	
		
		
	
	
		

			cont的值:{{count}}
			

			如果count 是偶数那么将背景颜色改为红色
			+1
			-1
		
	
	
	

事件修饰符：一般在事件后边

	
		
		
	
	
		

			百度一下  ,阻止跳转到百度
			

			百度一下，vue提供的阻止跳转到百度
		
	
	
	
	
	

常见的时间修饰符

 阻止冒泡：点击里面的事假，不向外传播，里面的事件是里面的外面的是外面的

使用方法是在事件后面增加

按键修饰符：

 @keyup  :按键监听事件，@keyup.按键='方法',即可触发相应的事件，并在方法中处理相应的条件

---

4、双向绑定指令

vue提供了在 v-model 双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快算获取表单的数据。

	
		
		
	
	
		

			用户名
			
			

			密码
			
            
             
			

			登陆
		
	
	
	
	
	

•  input输入框:type=‘radio’   type='checkbox'   type='xxxx'
• select
• textarea

Vue 的指令与过滤器

v-modlel 指令的修饰符

为了方便对用户输入的内容进行处理，vue为 v-model 指令提供了3个修饰符，分别是

---

5、条件渲染指令

条件渲染指令 用来复制开发者按需控制DOM 的显示与隐藏。缇欧爱安指令有如下两个，分别是：

v-if

v-show

	
		
		
		
	
	
		

			
			隐藏显示的内容 v-if 控制
			

			
			隐藏显示的内容 v-if 控制
			
			
		
	
	
	

 1、v-if   的原理是每次动态创建或移除元素从而实现元素的显示与隐藏

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

 注意： v-else-if 指令必须配合 v-if 指令使用，否则它将不会被识别！

	
		
		
		
	
	
		

			
			隐藏显示的内容 v-if 控制
			

			
			隐藏显示的内容 v-if 控制
			

			
				请选择
				优秀
				良好
				一般
			
			
v-else-if 的简单实例
			
优秀
			
良好
			
一般
			
请选择
			
		
	
	
	

2、v-show： 的原理是动态为元素添加或移除  display:none 这个样式，实现元素的显示与隐藏

小结：

1、v-show  的原理是动态为元素添加或移除  display:none 这个样式，实现元素的显示与隐藏

2、v-if 的原理是每次动态创建或移除元素从而实现元素的显示与隐藏

如果平凡的隐藏和显示  v-show  性能会更好；

如果刚进入以免的时候，某些默认不需要被显示，而且后期一不虚要被展示出来，此时  v-if 性能会更好；

在实际开发中，我一般用   v-if

---

6、列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 显示的特殊语法，其中：

items 是带循环的数组

item  是被循环的每一项

	
		
		
		
	
	
		

			

				

					
索引
					
id
					
姓名
					
性别
				
				

					

						
0
						
0
						
aa
						
男
					
					
					

						
{{index}}
 
						
{{item.id}}
 
						
						
{{list_arr[index].name}}

						
男
						
女
						
未知
					
				
			
		
	
	

v-for 指令还支持一个可选的第二参数，即当前想的索引。语法格式为(item,index) in item；

官方建议：只要要到  v-for  指令，那么一定要绑定一个  :key 属性 而且，尽量把 id 作为 key 的值，key的值类型，是有要求的，字符串或数字类型，key不能重复

---

总结

1、什么是vue

1、构建用户界面

• 用vue往html页面中填充数据，非常方便

2、框架

• 蹙额框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写子的业务逻辑功能！
• 要学习vue，就是在学习vue框架中规定的用法；
• vue的指令、组件（具体是对UI结构的复用）、路由、vuex、vue组件库；

2、vue 的两个特性

1、数据驱动地图：

1. 数据的变化会驱动视图自动更新；
2. 好处：程序员只用管吧数据维护好，那么页面结构会被vue自动渲染出来；

2、双向数据绑定

在网页中，form表单负责采集数据、ajax负责提交数据。

• js数据的变化、会被自动渲染到页面上
• 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双线工属具绑定的底层原理是MVVM（Mode数据源、View视图、ViewModel就是vue的实例）

3、vue指令

1、内容渲染指令

• v-text   指令的缺点：会覆盖元素内部原有的内容；
• {{}}      插值表达式：在实际开发中用的最多，只是内部的占位符，不会覆盖原有的内容
• v-html  指令的作用：可以吧带有标签的字符串，渲染成真正的HTML内容

2、属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中；

• 在vue中，可以使用  v-bind 指令，为元素的属性动态绑定值；
• 简写就是英文的 :
• 在使用v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如

这是一个div

3、事假绑定

• v-on :简写  @
• 语法格式为：

  
  
  
  methods:{
      add(){
      //如果在方法中需要修改data中的数据，可以通过this访问到
      this.count += 1;
      }
  }

• $event 的运用场景，如果默认的事件对象e被覆盖（有传参，无传参则可以直接使用），则可以手动传递一个 $event，例如：

  
  
  
  methods:{
      add(n,e){
      //如果在方法中需要修改data中的数据，可以通过this访问到
      this.count += n;
      }
  }

1、事件修饰符

1. .prevent  ：

   连接到....

2. .stop

   按钮

2、按键修饰符

• @keyup：按键修饰符，修饰按键按下松开事件；例如

4、双向绑定事件

v-model

v-model 的修饰符：

修饰符	作用	示例
.number	自动将用户输入的值转为数值类型
.trim	自动过滤用户输入的首尾空白自字符串
.lazy	在'change'时而非"input" 时更新

5、条件渲染指令

1、 v-if  ：原理是每次动态创建或移除严肃从而实现元素的显示与隐藏

2、 v-show ：原理是动态为元素添加或移除  display:none 这个杨思，实现元素的显示与隐藏

6、列表渲染指令

v-for  开发者基于一个数组来循环渲染一个列表结构，在使用 v-for 是就需要存在 :key 属性，其值建议为 id ,数据类型必须是字符串或数字类型，必须是唯一的。

key 的注意事项：

• key 的值只能是字符串或数字类型
• key 的值必须具有唯一性 （即：key的值不能重复）
• 建议把数据项  id  属性的值作为key的值（因为 id 属性的值是具有唯一性）
• 使用 index 的值当做 key 的值没有意义（因为 index 的值不具有唯一性）
• 建议使用 v-for 指令时一定要指定key 的值（既提升了虚拟，有防止了列表状态紊乱）