Vue.js是一套構建用戶界面的漸進式框架。

Vue只關註圖層，采用自底向上增量開發的設計。

通過盡可能簡單的API實現響應的數據，綁定和組合的視圖組件。

以下Vue案例，是v1.0.26版本

首先，先引入vue.js

<script src="vue.js"></script>

然後寫一個div開啟vue

<div id="div">
       {{a}}      //和angular一樣vue也是用模板標記將數據展示在頁面上的
</div>

接著寫js

window.onload = function(){
     
     //自定義過濾器：
     Vue.filter("todou",function(input){
           //小於10的數字前面加上0 , 大於10則返回
           return input<10 ? ‘0‘ + input : input;
     })
  
     
 
new Vue({             //定義vue對象
           el:"#div",        //el 是固定的參數，不能改
           data:{            //data:也是固定的參數
               //數據綁定的數據
                a:"welcome to Vue",
               //循環數據
               arr:[1,2,3,4,5,6]，
               json:{
                   a:‘apple‘,
                   o:‘orange‘,
                   p:‘pear‘,
                   b:‘banana‘
               },
               
               //過濾器的數據

str1: ‘welcome to Vue‘,
str2: ‘welcome to Vue‘,
str3: ‘WELCOME TO VUE‘,
arr: [1, 2, 3, 4, 5, 6, 7],

                iNum:1234,
             
                //自定義過濾器
                iNum:1,
                
                //轉義輸出
                msg:"<strong>字體加粗</strong>"

           },
           //點擊事件的數據
           methods:{
              add:function(){
                  //這裏的this指向new Vue 中的對象
                  this.arr.push(this.arr.length+1);
              }
           }
     });
}

當然Vue也有數據雙向綁定

v-model 來實現數據綁定

結合上面的js來實現

eg:

<input type="text" v-model="a"/>
<p>{{a}}</p>
<p>{{*a}}</p>    //*dataName  *不受數據改變的影響

循環：v-for

結合上文js來實現

<div id="div">
       <div v-for="item in arr">{{item}} {{$index}}</div>  //$index數組中的小方法,可以獲取元素的下標
</div>

循環一個json

<div id="div">
     <div v-for="item in json">{{item}}{{$index}}{{$key}}</div>

//另外一種寫法
     <div v-for="(key,value) in item">{{item}}{{key}}{{value}}</div>

</div> //$index 可以獲取下標 $key獲取鍵 

點擊事件 v-on:click=""[email protected]=""

還是結合上文js

//這裏用點擊按鈕往數組裏添加元素為例
<div id="div">
      <input type="button" value="添加" v-on:click="add()"/>
      //第二種寫法：

      //<input type="button" value="添加" @click="add()"/>

<ul> <li v-for="item in arr">{{item}}</li> </ul> </div>

過濾器：

結合上文js

<div id="div">
    {{iNum | currency ‘￥‘}} <br>
    {{str1 | capitalize}}<br>
    {{str2 | uppercase}}<br>
    {{str3 | lowercase}}<br>
    {{arr | limitBy 3}}<br>
</div>

自定義過濾器：

結合上文js

<div id="div">
    {{iNum1 | toDou}}
</div>

轉義輸出：

<div id="div">
    <!--轉義輸出-->
    {{{msg}}}
</div>

今天的Vue就講到這裏，希望能幫到大家！謝謝

vue入門