vue（2）

接着上篇文章

1、有關VUE語法的相關學習（vue-cli 版本3.0.4）

1. {{}}：大鬍子語法、插值語句

   <div>{{content}}</div>

---

1. 內置指令

   • 插值指令

   • 使用該指令進行標籤中內容的替換區別

     <span style="margin-left:40px">
             v-text只是將content中的信息全以文本的方式顯示
         </span><br>
         <span style="margin-left:40px">
             v-html只是將content中的信息進行渲染的方式顯示
         </span><br>

     v-html中若是存在標籤就會渲染出來

     //content:"<a href="#">跳轉</a>"
         v-text
         <sapn v-text="content"></span>
         //通過渲染後
         <span></span>
         v-html
         <span v-html="content"></span>

   • 控制指令（MD中代碼指令標識須要先後換行，不然有BUG）

     v-if
         v-else-if
         v-else
         //v-if是經過控制元素添加刪除實現顯示隱藏
         <div v-if="bool1">tmo</div>
         <div v-else-if="bool2">jack</div>
         <div v-else="bool3">lily</div>
         v-show
         //v-show是經過控制元素的dispaly屬性控制顯示隱藏
         <div v-show="bool">jhon</div>

   • 屬性指令

     • 經過該指令能夠綁定元素的屬性

     • 形式：v-bind:"屬性名"="模型變量"

       //v-bind
           <div v-bind:class="myClass">kid</div>
           //簡寫
           <div :class="myClass">kid</div>

   • 事件綁定指令

     • 形式：v-on:"事件名"="方法名()" 此處的括號可加可不加

       <div v-on:click="myMethod()"></div>
           //簡寫
           <div @click="myMethod()"></div>
           //綁定的事件裏面的括號能夠寫也能夠不寫，本人推薦仍是寫

     • 修飾符（官網還有許多修飾符）

       • 形式：v-on:"事件名"."修飾符"="方法名()"

         <form v-on:submit.prevent="mySubmit()"></form>

   • v-for

     -經過循環遍歷數組，生成多個相同列表項

   • v-model
   • 偵聽屬性
   • 計算屬性

   • 備註

     //指令當中容許使用表達式
         <div v-bind:style="'margin-top:'+num+'px'"></div>

2. 組件
3. 路由
4. 過渡動畫
5. 自定義指令