vue中常见指令

一、视图输出指令    作用：把 model绑定到view

   v-text和v-html  

•  1. 默认 v-text 是没有闪烁问题的，v-text可以简写为{{}},并且支持逻辑运算
•  2. v-text会覆盖元素中原本的内容，但是 插值表达式 1这种，只会替换自己的这个占位符，不会把 整个元素的内容清空 
•  3. 默认 v-html 覆盖内部内容， 输出HTML

   v-text  实例

这个将不会随msg属性的改变而改变: {{ msg }}

   v-html  实例

二、属性绑定指令   作用：把model动态绑定view

  v-bind ：是 Vue中，提供的用于绑定属性(title)的指令

• 1. 直接使用指令v-bind

• 2. 使用简化指令  :

• 3. 在绑定的时候，拼接绑定内容：

  :title="btnTitle + ', 这是追加的内容'"

  实用实例

• 通常，我们会传给v-bind一个对象，这样我们可以动态地切换一些属性值，比如绑定Class或者Style，像这样：

  // isBlue是布尔值，blue类是否存在取决于isBlue是否为真
   
  
  // thisFont是变量，字体大小随thisFont而变化
   
  
  // 当然如果属性多的话，可以这样写
   
  // JS
  data () {
      return {
          styleBox: {
              fontSize: 20px,
              color: #ccc,
              ...
          }
      }
  }

  三、事件绑定指令   作用：把model动态绑定onclick

•  事件绑定机制，除了可以绑定click还可以绑定其他事件

• 简写：@ 

• 绑定控件事件到vm

• + .stop       阻止冒泡   
  + .prevent    阻止默认事件
  + .capture    添加事件侦听器时使用事件捕获模式
  + .self       只当事件在该元素本身（比如不是子元素）触发时触发回调
  + .once       事件只触发一次

• 实例

	    
	    

	      
	    
 
	
	    
	    有问题，先去百度
	
	    
	    

	      
	    
 
	
	    
	    

	      
	    
 
	
	    
	  	 有问题，先去百度 

四、v-model    作用：双向绑定，不再单纯 绑定到view,view的值改变同样会作用于model

•         唯一双向绑定指令
•         注意： v-model 只能运用在 表单元素中   input(radio, text, address, email....)   select    checkbox   textarea

  1. HTML 代码结构
  
  
  	      
  
      		
      		
      		  +
      		  -
      		  *
      		  ÷
      		
      		
      		
      		
  		  
  
  
  
  2. Vue实例代码：
  
  
  	// 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: '#app',
        data: {
          n1: 0,
          n2: 0,
          result: 0,
          opt: '0'
        },
  
        methods: {
          getResult() {
            switch (this.opt) {
              case '0':
                this.result = parseInt(this.n1) + parseInt(this.n2);
                break;
              case '1':
                this.result = parseInt(this.n1) - parseInt(this.n2);
                break;
              case '2':
                this.result = parseInt(this.n1) * parseInt(this.n2);
                break;
              case '3':
                this.result = parseInt(this.n1) / parseInt(this.n2);
                break;
            }
          }
        }
      });
  
  

  五、v-for和key属性

• 迭代数组-普通数组-对象数组

  
索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}



   
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}

• 迭代对象中的属性

值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}

• 迭代数字---count从1开始

这是第 {{i}} 个P标签

• 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

六、v-if和v-show

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。