vue特点

mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template 
  
  
  
  
  
 ，data
  
  
  
  
  
  ，computed
 


 


 


 


 


 

，watch 
 
 
 
 
 
，methods) vue文档集中ue Vue生态丰富且简单 渐进式()

Veu和Dom开发思想

Dom开发思想：当我们需要在交互事件中改变视图时
   
   
   
   
   
   ，使用DOM选择器选中目标节点 
  
  
  
  
  
 、再使用DOM方法直接改变视图            。 Vue开发思想：当我们需要在交互事件中改变视图时
 

 

 

 

 

 
，先在data选项中声明一个合适的变量 

 

 

 

 

 

，再在交互事件中改变这个声明式变量即可            ，视图自动更新

 
 

 
 

 
 

 
 

 
 

 
 ，这是一种间接的操作 
  
 
  
 
  
 
  
 
  
 
  
。

常用的Vue指令有哪些

文本类指令：

{{}}文本插值：用于绑定节点的文本











。{{}}这种绑定值的方式会出现一闪而过的效果











，使用v-cloak来解决 
  
  
  
  
  
 。 v-text：用于绑定节点的文本                  ，大多数的时候
 
 
 
 
 
 
 
 
 
 
 
 ，可以和{{}}替换 
  
  
  
  
  
 。 v-once：用于指定节点的动态内容只绑定一次

















，当前节点中所对应的变量发生变化时视图不更新

 


 


 


 


 


 
。一般情况下            ，v-once只能和{{}}一起用 
 
 
 
 
 
。 v-once和v-cloak：都是不需要接受表达式来做为‘值’ 
   
   
   
   
   
  。 v-html：用于动态绑定的html节点
  
 
  
 
  
 
  
 
  
 
  
 ，相当于DOM中的innerHTML,这个指令默认已经做了“防xss攻击            ”的处理
 

 

 

 

 

 
。

动态属性指令：

v-bind：用于动态绑定节点的属性（比如：title 











，value 
  
  
  
  
  
 ，style等）

事件绑定指令：

v-on：用于给视图节点绑定各种js事件（比如：click
  
  
  
  
  
  ，keyup等）

v-on简写@　　

基本语法:<div @事件名.事件修饰符=事件处理></div>

v-on事件修饰符：.stop阻止事件冒泡
 


 


 


 


 


 

，.prevent阻止默认事件 
 
 
 
 
 
，.enter绑定键盘Enter键盘
 

 

 

 

 

 
。

表单绑定指令：

v-model：用于表单取值(表单双向绑定)　　比如：input
   
   
   
   
   
   ，select

基本语法：<input style="text" v-model.表单修饰符=变量>

v-model修饰符：.trim自动去除首尾空格　　.number隐式类型转换　　.lazy用于性能
 

 

 

 

 

 
，当表单失去焦点时再进行双向绑定            。

列表渲染：

v-for：用于渲染列表 

 

 

 

 

 

，对象            ，Number变量等 

 
 

 
 

 
 

 
 

 
 

 
。

渲染列表语法：<div v-for=(item,index) in array></div>

渲染对象语法：<div v-for=(value,key,index) in obj></div>

渲染Number变量语法：<div v-for=(num, index) in 5></div>

条件渲染：

v-show：用于显示或隐藏视图节点

 
 

 
 

 
 

 
 

 
 

 
 ，使用display:block / display:none 来实现的











。

v-if











，v-else-if                  ，v-else：用于显示或隐藏视图节点
 
 
 
 
 
 
 
 
 
 
 
 ，真正的移除或插入视图节点                  。

v-show和v-if的区别

v-if是节点的插入或移除

















，比较耗费性能；v-show只是通过样式来实现显示与隐藏            ，性能消耗低 
 
 
 
 
 
 
 
 
 
 
 
。

注意：不建议v-if和v-for一起使用；如果一定要一起使用
  
 
  
 
  
 
  
 
  
 
  
 ，在vue2中v-for优先级更好

















。

其它指令

v-pre：用于调试











，可以阻止vue编译器对指令的编译

v-slot：插槽

自定义指令

computed作用:

当指令的表达式比较复杂时
 

 

 

 

 

 
，我们建议使用计算属性来优化 

 

 

 

 

 

，提升视图模板中代码的可阅读性
  
  
  
  
  
  、可维护性 
  
  
  
  
  
 。

在Vue中
 
 
 
 
 
 
 
 
 
 
 
 ，计算属性能计算哪些性质的变量

data

















，vuex数据            ，$route
  
 
  
 
  
 
  
 
  
 
  
 ，计算一切__ob__的数据 
   
   
   
   
   
  。

如何让计算属性同时支持get/set功能