接着上篇文章

一、有关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. 自定义指令