Vue指令

v-once

• 当数据发生改变时，插值处的内容不会更新

指令示例：

<script>
    export default{
        data(){
            return{
                Uname:"游瑞",
            };
        },
        methods:{
            changeUname: function(){
                this.Uname = "袁可欣"
            }
        }
    }
</script>

<template>
  <p>name: {{Uname}}</p>
  <p v-once>name: {{Uname}}</p>
  <button @click="changeUname">更改名字</button>
</template>

v-html

• 让内容以html代码进行显示

指令示例：

<script>
    export default{
        data(){
            return{
                msg: "<h2>标题</h2>"
            };
        }
    }
</script>

<template>
  <span v-html="msg"></span>
</template>

TIP：可能会导致xss攻击

v-bind

• 动态绑定属性类容

指令示例：

<script>
    export default{
        data(){
            return{
                id: "id01"
            };
        }
    }
</script>

<template>
  <span v-bind:id="id">v-band绑定</span>
  <br />
  <span :id="id">v-band绑定 语法糖</span>
  <br />
  <span v-bind:[attrName]="id">v-bind 动态属性绑定</span>
</template>

<style>
#id01 {
    color: red;
}
</style>

v-on

• Dom事件绑定

指令示例：

<script>
export default{
    data(){
        return{
            num: 1
        };
    },
    methods: {
        add(){
            this.num = this.num + 1
        }
    }
}
</script>

<template>
    <p>{{num}}</p>
    <button v-on:click="add">+1 #Dom事件绑定</button>
    <button @click="add">+1 #语法糖</button>
</template>

v-model

• 数据双向绑定

<script>
export default{
    data(){
        return{
            mess: 1
        };
    },
}
</script>

<template>
    <div>
        <p>{{mess}}</p>
        <input type="text" v-model="mess">
    </div>
</template>

v-if

• 控制切换一个元素

<script>
export default{
    data(){
        return{
            isTrue: true
        };
    }
}
</script>

<template>
    <div>
        <p v-if="isTrue">{{isTrue}}</p>
        <button @click="isTrue = !isTrue">更该</button>
    </div>
</template>

v-for

<script>
export default{
    data(){
        return{
            arr: [],
            mess: 0
        };
    },
    methods:{
        pushMess(){
            this.arr.push(this.mess)
        }
    }
}
</script>

<template>
    <div>
        <p>{{mess}}</p>
        <input type="text" v-model="mess">
        <button @click="pushMess">submit</button>
        <ul>
            <li v-for="me in arr">{{me}}</li>
        </ul>
    </div>
</template>