脚本宝典收集整理的这篇文章主要介绍了vue（2），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

接着上篇文章

一、有关VUE语法的相关学习（vue 版本3.0.4）

（1）{{}}：大胡子语法、插值语句

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

---

（2）内置指令  
    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>

   2、控制指令（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>

    3、属性指令    
       -通过该指令可以绑定元素的属性  
       -形式：v-bind:"属性名"="模型变量"

    //v-bind
    <div v-bind:class="myClass">kid</div>
    //简写
    <div :class="myClass">kid</div>
    

    4、事件绑定指令  
       -形式：v-on:"事件名"="方法名()" 此处的括号可加可不加

    <div v-on:click="myMethod()"></div>
    //简写
    <div @click="myMethod()"></div>
    //绑定的事件里面的括号可以写也可以不写，本人推荐还是写

    5、修饰符（官网还有许多修饰符）  
       -形式：v-on:"事件名"."修饰符"="方法名()"

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

    6、v-for  
       -通过循环遍历数组，生成多个相同列表项

    7、v-model
    8、侦听属性
    9、计算属性
    10、备注    

    //指令当中允许使用表达式
    <div v-bind:style="'margin-top:'+num+'px'"></div>

（3）组件
（4）路由
（5）过渡动画
（6）自定义指令

脚本宝典总结

以上是脚本宝典为你收集整理的vue（2）全部内容，希望文章能够帮你解决vue（2）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。