1. vue基礎構成    

HTML: 
      <div id="app" v-on:click="doClick"> {{title}} </div>  
js: 
      var vm = new Vue({
          el: '#app', //例項 ，區域元素
          data: {
               title : 'Vue標題', //存放el用到的資料
            },
          methods: {
              doClick(){
                  //事件，方法
               }
            }
        });
 

2.  vue符號：      1). 雙向繫結資料： {{data}}     2). HTML標籤符號： v-text="data"， 類似於{{data}}                    :  v-html="msg", //可以將內容當html放置解析                    :  v-bind:, 繫結屬性，比如v-bind:title="the_title", 縮寫  :， 比如  :title,                    :  v-on:, 方法繫結， 例如v-onclick="doClick", 縮寫@, 例如 @click="doClick"3. 事件修飾符

   在事件後面新增修飾符， 比如@click.stop="clickFun"      .stop : 阻止冒泡      .prevent : 阻止預設行為， 如a標籤中有href連結， 該修飾符可阻止連結跳轉      .capture : 捕獲觸發事件      .self : 實現只有點選當前元素， 才會觸發事件。 不同於.stop， .self只阻止自己身上冒泡行為的觸發， 不會影響其他元素（比如父元素）的冒泡行為      .once : 只觸發一次事件4. 繫結樣式    1). 繫結class       1. 使用v-bind, 直接傳遞陣列          <div :class="['divStyle1', 'divStyle2']">       2. 使用三元表示式          <div :class="['divStyle1', flag ? 'divStyle2' : '']">          //js          data：{              flag: true          }       3. 使用物件來代替三元表示式          <div :class="['divStyle1', {'divStyle2' : flag}]">       4. 直接繫結物件          <div :class="classObj">          //js          data：{              classObj: {divStyle1 : true, divStyle2 : false}          }     2). 繫結行內樣式       1.  <div :style="{color: 'red', 'font-weight': 200}">

      2. 使用陣列           <div :style="[styleObj1, styleObj2]">           data: {               styleObj1: {color: 'red', 'font-weight': 200},               styleObj2: {'margin-top': '20px'}           }5. v-for       1. 迭代陣列         <p v-for="item in items"> {{item}} </p>         <p v-for="{item, i} in items"> 索引值：{{i}} </p>       2. 迭代物件         <p v-for="{val, key i} in user"> {{val}} </p>       3. 迭代數字         <p v-for="count in 10"> {{count}} </p>          //從1開始       4. 注意點： 在元件的使用v-for的時候，必須要有key屬性，且必須使用繫結的形式， 這是為了指定唯一的字串/數字型別        <p v-for="user in users" :key="item.id">           <input type="checkbox">            {{user.id}} --- {{user.name}}         </p>6. v-if / v-show       v-if： 每次都會重新刪除或建立元素。效能切換消耗較高       v-show: 每次不會進行DOM的刪除和建立操作， 只是切換元素的display:none樣式