Vue 指令（常用）

Vue框架提供的语法，扩展了html标签的功能，大部分指令的值是js表达式，用于取代DOM操作

v-text和v-html

类似js中的innerText和innerHTML

• v-text更新标签中的内容，不解析内容中的html标签
• v-html更新标签中的内容，解析内容中的html标签

和插值表达式的区别：插值表达式更新该标签元素中的局部内容，而v-text更新的是全部内容

<div id="box1">
    <p>{{info}}  段落一</p>
    <p v-text="info">段落二被替换</p>
    <p v-html="info">段落三被替换</p>
</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            info:'<h3>这是一个三级标题</h3>'
        }
    })
</script>

v-if和v-show

根据表达式的boolean值进行判断是否渲染该元素

<div id="box1">
    <!-- flag为true显示该内容，false不显示-->
    <p v-if="flag">v-if指令</p>
    <p v-show="flag">v-show指令</p>
</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            flag:false
        }
    })
</script>

开发者工具查看网页代码：

• v-if有更高的切换开销

  • （不显示就直接是一个注释，初始加载更快，发生改变肯定要重新加载该标签，比较慢）

• v-show有更高的初始渲染开销

  • （不显示就给标签添加一个属性，发生改变只会修改该属性）

• 所以：

  • 如果flag会频繁的切换，使用v-show更好
  • 如果flag不会经常改变，使用v-if更好

v-on

v-on指令绑定DOM时间，并在事件被触发时执行一些JavaScript代码

语法:

v-on:事件名.修饰符="methods中的方法名"
//简写：
@事件名.修饰符="methods中的方法名"

修饰符：

• .left，点击鼠标左键时触发
• .right，点击鼠标右键时触发
• .once，只触发一次回调

可以给修饰符，也可以不写修饰符

<div id="box1">
    {{count}}
    <button v-on:click="fn1()">按钮1</button>
    <button @click.once="fn2()">按钮2只会执行一次方法</button>
    <button @click="count++">count++按钮</button>
</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            count:1
        },
        methods:{
            fn1:function (){
                console.log("fn1方法被调用了")
            },
            fn2:function (){
                console.log("fn2方法被调用了")
            }
        }
    })
</script>

v-for

可以用来渲染列表

v-for指令需要以site in sites 形式的特殊语法，sites是源数据数组，site是数组元素迭代的别名

格式：

1. v-for="(item,index) in 数组或集合"
   

   item：数组中的每个元素；index：数组中元素的下标

2. v-for="(value,key,index) in 对象"
   

   index：对象中每对key-value的索引，从0开始；key：键；value：值

示例：

<div id="box1">
    <table border="1px">
        <tr><th colspan="2">循环一个数组</th></tr>
        <tr  v-for="(item,index) in nameList">
            <td>{{index}}</td>
            <td>{{item}}</td>
        </tr>
    </table>
    <br>
    <table border="1px">
        <tr><th colspan="3">循环一个对象</th></tr>
        <tr  v-for="(value,key,index) in person">
            <td>{{index}}</td>
            <td>{{key}}</td>
            <td>{{value}}</td>
        </tr>
    </table>
    <br>
    <table border="1px">
        <tr><th colspan="4">循环一个对象数组</th></tr>
        <tr  v-for="(person,index) in personList">
            <td>{{index}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td>{{person.gender}}</td>
        </tr>
    </table>
</div>

<script>
    var app = new Vue({
        el:'#box1',
        data:{
            //姓名列表
            nameList:['孙悟空','猪八戒','沙和尚','唐僧'],
            //一个对象
            person:{name:'白骨精',age:99,gender:'女'},
            //包含多个对象的列表
            personList:[
                {name:'孙悟空',age:20,gender:'男'},
                {name:'猪八戒',age:15,gender:'男'},
                {name:'沙和尚',age:27,gender:'男'},
                {name:'唐僧',age:20,gender:'男'},
            ]
        }
    })
</script>

v-bind

绑定标签上的任意属性

语法：

v-bind:属性='值'
//简写：
:属性='值'

示例：

<div id="box1">
    <p v-bind:style="styleInfo" >段落一</p>
    <button onclick="app.fn1()">放大</button>
</div>
<script>
    var app = new Vue({
        el:'#box1',
        data:{
            num:18,
            styleInfo:'font-size:'+this.num+'px',
        },
        methods:{
            fn1:function (){
                this.num++;
                this.styleInfo='font-size:'+this.num+'px';
            }
        }
    })
</script>

v-model

表单元素上进行双向绑定

（双向数据绑定，vue对象中的数据发生变化，页面随之更新,即内存改变影响页面，页面改变影响内存）

<div id="app">
    <p>学号：<input type=text v-model="user.number">{{user.number}}</p>//输入框中内容改变页面显示内容随之改变
    <p>姓名：<input type="text" id="username" v-model="user.name">{{user.name}}</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            user:{name:'',number:''}
        }
    })
</script>