1.基本标签语法

指令 说明 指令 说明
<标签>{{变量名/js语法}}</标签> 普通数据绑定 <标签 v-bind：/:> 标签属性数据绑定
<标签 v-once > 仅渲染一次 <标签 v-on：/@事件> 监听事件
<标签 v-html=”html”> 输出html <标签 @事件.stop> 阻止冒泡
表单的双向绑定 <标签 v-for=”item in nav” key=’唯一标识’> for循环,key必须是唯一标识（索引）
<标签 v-if=”条件”><标签 v-else> 不是false,0,’’,null,undefind,NaN，才渲染 <标签 v-show=”条件”> 和if区别是，不管真假都渲染，控制display

2.常用对象绑定标签（用于html中绑定一个数据对象）

  1. <div>{{vail}}</div><!--在html中输出-->
  2. <div :class="'active':Isavtive">  <!-- Isavtive为真,类active生效 -->
  3. <div :class="[activeClass,bgColorClass]"> <!-- 多个class可以用数组,类名是activeClass,bgColorClass在data中对应变量值（字符串） --> 
  4. <div :style="{fontSize:size}">   <!-- {属性：变量} -->
  5. <div :style="[styleObject1,styleObject2]">   //多条属性,styleObject1,styleObject2在data中对应变量的值（对象）

3.JS常规结构

  1. new Vue({
  2.     el：'' ,    //dom节点
  3.     data:{},//数据
  4.   methods:{}//函数方法    
  5.     computed：{}//计算属性，详情见下
  6.     watch:{}//监听属性，详情见下
  7.     filter:{}    //过滤属性，详情见下
  8. })

3-1.计算属性

  1. computed：{//计算属性：惰性的,依赖于data中数据,存于缓存;
  2.       site:function(){}                                    //默认getter方法：当data中相对应的数据值发生变化，会调用相对应的技术属性;
  3.             site:{
  4.               get:function(){}                             //同上;
  5.           set:funtion(newvalue){},            //当页面数据变化，newvalue为变化之后的值
  6.       }
  7.   }

3-2.监听属性

  1. //能不用就不用，能用计算属性代替就用计算属性代替
  2. watch：{
  3.   msg(NewValue,oldValue){//当data中msg产生变化调用
  4.   }
  5. }

3-3.过滤属性

  1. //DOM
  2. {{name|toUpperCase}}
  4. //JS Vue中
  5. filter：{
  6.     toUpperCase(val){
  7.   }
  8. }