VUE的常用指令?

1.文本插值: {{msg}}    v-html="msg"

<div id="*">{{msg}}</div> //不能解析msg值中的标签

<div id="*" v-html="msg"></div> //能解析msg值中的标签

2.绑定属性: v-bind

<a id="*" v-bind:href="url"></a>  //对href属性绑定变量url

<a id="8" :href="url"></a> //简写格式

3.条件渲染:v-if   v-else   v-else-if   v-show

<div v-if="num%3==0">div1</div>   //条件成立时则展示该标签

    <div v-else-if="num%3==1">div2</div>

    <div v-else="num%3==2">div3</div>

    <div v-show="flag">div4</div> //flag的值是false或者true

4.列表渲染:v-for

<ul>

        <li v-for="(name,index) in names">{{name}}{{index}}</li>

        //获取数组中的值和索引

    <li v-for="(value) in student">{{value}}</li>

        //获取对象中的属性的值

</ul>

    new Vue({ //核心对象

        el:"#div3",

        data:{ names:["张三","李四","王五"],

student:{name:"zhangsan",age:18}}});

5.事件绑定:v-on

<button v-on:click="change()">单击改变div的内容</button>

    <button @click="change()">单击改变div的内容</button>//属于第二种格式

//事件绑定核心对象

    new Vue({

        el:"#div4",

        data:{name:"黑马程序员"},

        methods:{change(){this.name="传智播客"}}});

6.双向数据绑定

<form autocomplete="off">

        //v-model 只能用在表单控件

        姓名：<input type="text" name="username" v-model="username">

        <br>

        年龄：<input type="number" name="age" v-model="age">

    </form>

//双向数据绑定

    new Vue({el:"#div5",

        data:{ username:"张三",age:18}});