文章5：vue（2）

接着上篇文章

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