有关VUE学习的经验（2）

接着上篇文章

一、有关VUE语法的相关学习（vue 版本3.0.4）
（1）{{}}：大胡子语法、插值语句

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

（2）内置指令

• 1、插值指令
  （1）使用该指令进行标签中内容的替换区别：
  v-text只是将content中的信息全以文本的方式显示
  v-html只是将content中的信息进行渲染的方式显示
  （2）v-html中如果存在标签就会渲染出来

    //content:"<a href="#">跳转</a>"
    v-text
    <sapn v-text="content"></span>
    //经过渲染后
    <span></span>
    v-html
    <span v-html="content"></span>

• 2、控制指令

    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、属性指令
  （1）通过该指令可以绑定元素的属性
  形式：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
  （1）通过循环遍历数组，生成多个相同列表项

• 7、v-model

• 8、侦听属性

• 9、计算属性

• 备注

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

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