首先，vue基礎js寫法

new Vue({  el:"#app",  //模型  data:{  },  filters:{  },  mounted:function(){    this.$nextTick(function(){    //初始化調用    });  },  computed:{    //實時計算  },  methods:{  }});

v-for

<li v-for="(item,index) in productList">  <div class="item-name">{{item.productName}}</div></li>

v-model

(實時更新)

<input type="text" value="0" disabled v-model="item.productQuantity"><div class="item-price-total">{{item.productQuantity}}</div>

v-bind

<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}"><!--可通過更改item.checked的值設置是否選中--><!--必須用v-bind 不可直接在class里面直接使用{{}}--><!--v-bind:class= 可簡寫為 :class= -->

filters過濾器的使用

1.html引用方式

<div class="item-price">{{item.productPrice | money('元')}}</div>

2.過濾器

filters:{  formatMoney:function(value,type){    return "￥"+value.toFixed(2)+ type;  }},

3.全局過濾器（寫在new Vue的外面）

Vue.filter("money",function(value,type){  return "￥"+value.toFixed(2) + type; //保留兩位小數 結果eg:￥19.00元});

調用methods中的方法：

@click="method(param)"http://或者@click="delFlag=false"@click="limitNum=addressList.length"

computed 實時計算

如下：默認顯示三條數據，點擊more 顯示所有

<li v-for="(item,index) in filterAddress"><div class="shipping-addr-more"><a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length">  more  <i class="i-up-down">   <i class="i-up-down-l"></i>   <i class="i-up-down-r"></i>  </i> </a></div>data:{    limitNum:3  },computed:{  filterAddress:function(){    return this.addressList.slice(0,this.limitNum);  }},

先提出一兩個經典的實例

1.以下實現了對循環卡片的點擊 選中

<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index"><!--其中currentIndex在js里需要定義-->

2.以下實現了對固定卡片的點擊 選中

<ul>  <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">   <div class="name">標準配送</div>   <div class="price">Free</div>  </li >  <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">   <div class="name">高級配送</div>   <div class="price">180</div>  </li> </ul> <!--其中shippingMethod在js里需要定義-->