VUE使用总结记录

目录

1、MVVM模式

2、v-if，v-else,v-else-if

3、v-show,v-else,v-else-if

4、v-on指令

5、v-bind指令

6、v-model双向数据绑定

7、计算属性与侦听器

---

 

---

 

---

1、MVVM模式

• vue是一个很火的js MVVM库，它是数据驱动和组件化的思想构建的。数据驱动，无须操作DOM，将DOM和数据绑定起来，一单绑定，DOM和数据保持同步，也就是双向数据绑定。
• mvvm 是model  view viewModel的简写，viewModel是vue的核心
• 使用vue的过程就是定义mvvm各个组成部分的过程

1. 定义view(视图)
2. 定义model（数据）
3. 创建一个vue实例（viewModel）,他用于连接view和model（实例）

2、v-if，v-else,v-else-if

• v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，不符合v-if条件的，就不会出现在dom中，不会被渲染到html中，后面跟着的v-else,v-else-if也不会被渲染
• expression是一个返回布尔值的表达式，也可以是一个布尔属性。
• v-if可以绑定在html元素上，也可以在template元素上使用v-if条件渲染分组。
• v-else必须跟在v-if或者v-else-if后面否则他不会被识别

1、语法：
v-if="expression"

2、直接绑定在html上：
{{age}}

3、放在template元素上：
	

4、v-if和v-else,v-else-if例子

	A 		


 	B


 	C


 	Not A、B、C

3、v-show,v-else,v-else-if

• 另外一个用于根据条件展示元素的选项，用法大致与v-if一致。
• 唯一不同的是，v-show属性元素会渲染并保留在dom中，只是简单的切换元素的css属性display.
• 如果元素使用了v-show，后面跟着这使用的v-else,v-else-if也在被渲染在DOM中，
• v-else必须跟在v-if或者v-else-if后面否则他不会被识别

4、v-on指令

• v-on指令用于给监听DOM事件，比如click事件
• v-on有两种调用方式：绑定一个方法（让事件指向方法的引用）；使用内联语句

  
       
  
       
  
         
          open
       
       
  
         
         Hi
       
       
  
         
         Hi
       
        
  
           
         Hi
       
    
       
  
           
         Hi
       
       
  
           
         Hi
       
   
       
  
           
         Hi
       
        
  
   

   

5、v-bind指令

•  属性绑定,v-bind:title可以简写成:title
• v-bind指令可以再其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是html元素的属性，例如：v-bind:class v-bind:src等等

• 动态地绑定一个或多个特性，或一个组件 prop 到表达式。

• 在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

• 没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

• 绑定计算属性，计算属性特性：只有被绑定的状态值发生变化时，则计算属性的值才会重新计算得出最新结果，因为计算属性会缓存计算结果。通过修改计算属性 computedClsObj 绑定的状态值，可以触发计算属性重新计算值，从而触发 UI 更新显示。

• 绑定数组：绑定数组的时候，数组元素可以是普通类型，如果需要绑定状态值来决定是否使用样式，则可以用三元符表达式最后取结果的值，也可以直接指定元素为对象。

• 绑定函数返回值

• 
  
  
  
  
  
  
  
  
  
  
  
   
  
  
  
  
  {{msg}}
  
  {{msg}}
  
  哈哈
  
  哈哈
  
  哈哈
  
  {{list.age}}
  
  {{list.age}}
  
  
  

  v-bind指令总结：绑定样式方式

• 类名 v-bind:class="focus"

• 类名数组 v-bind:class="['focus','shine']"

• 样式对象 v-bind:class="{'focus':true/false,'shine':true/false}"，这种方式会根据样式名来作为键的值来决定是否采用，如果为false,就不显示样式

• 对象数组 v-bind:class="[{'focus':true},'shine':false]"

• 绑定内联样式对象形式：v-bind:class="{background:'red'}"

• 数组形式：v-bind:style="[{background: 'red'}, {fontSize: '22px'}]"

6、v-model双向数据绑定

7、计算属性与侦听器

   

1.     computed：fullname属性，根据firstname,lastname属性计算而来，当firstname,lastname的值不改变的时候，fullname会上线上一个缓存的值
2. watch:侦听器，侦听一个值的变化，检测某个数据或者计算属性发生变化，在侦听器里面写自己的业务逻辑

    
    
    


    

        姓：
        名：
        
{{fullname}}
        
{{count}}
    
    

8、v-for指令

    
    
    


    

       
循环的时候加个key值，可以提高性能
       

           
{{item}}
       
       

           
 {{item}}