Vue—指令

介绍

Vue.js的指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性；

内置指令

• v-text
  数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；

<div id="app">
    <div v-text="h1"></div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            h1:'<h1>完善<h1>'
        }
</script>

演示效果

• v-html
  类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性；

<div id="app">
    <div v-html="h1"></div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            h1:'<h1>完善<h1>'
        }
</script>

演示效果

• v-show
  根据表达式的真假来切换所绑定的dom的display属性

<div v-show="true">v-show Test</div>

div标签可见

<div v-show="false">v-show Test</div>

div标签不可见
v-show用于控制dom的显隐，实际是控制了dom的css的display属性

• v-if
  v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，当v-if="false"时，dom被直接删除掉；为true时，又重新渲染此dom；

• v-else
  v-else用来表示v-if=""的else情况

<div id="app">
    <div v-if="1>2">1>2t</div>
    <div v-else>!1>2</div>
</div>

• v-else-if

<div id="app">
    <div v-if="5==1+1">1+1</div>
    <div v-else-if="5==1+2">1+2</div>
    <div v-else-if="5==1+3">1+3</div>
    <div v-else-if="5==1+4">1+4</div>
    <div v-else>都不是</div>
</div>

综上 if， else， else if，都是用来控制显隐的

• v-for

<div id="app">
    <div v-for="list in List">{{list.name}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            List: [{
                    name: "tony",
                    age: "16"
                },
                {
                    name: "jack",
                    age: "18"
                },
                {
                    name: "tom",
                    age: "18"
                }
            ]

        }
    })
</script>

• v-on

缩写 @

参数：event

给dom添加一个事件监听

<div id="app">
    <div v-on:click="clickButton" v-text="buttonName"></div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            buttonName: "旧名字"
        },
        methods: {
            clickButton: function () {
                this.buttonName = "新名字"
            }
        }
    })
</script>

页面加载完成
点击div标签后

• v-bind

缩写 ：

参数 ： attr/Prop (optional)

用于将vue的值绑定给对应dom的属性值

<div id="app">
    <div v-bind:hidden="hiddenValue">v-bind test</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            hiddenValue:false
        }
    })
</script>

将vue的变量hiddenValue的值设置为true，那么div标签就会被隐藏；

• v-model
  建立双向数据绑定；

<div id="app">
    <input v-model="name">
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            name: "jack"
        }
    })
</script>

此时input中的值就和name属性形成了双向绑定，当一个值发生改变，另一个也随之改变；

v-model修饰符：

• v-model.lazy: 一般v-model绑定的数据都是实时同步的，加上这个修饰符可以等到change事件再同步另一个的值；
• v-model.number: 自动将输入的值转为数值类型
• v-model.trim: 自动trim

• v-slot

缩写：#

参数：插槽名（默认default）

插槽:Vue 插槽详细解析

<div id="app">
    <blog-post>
        <div v-slot:header>我是head</div>
        <div v-slot:footer>我是foot</div>
        <div>我啥也不是</div>
    </blog-post>
</div>

    Vue.component("blogPost", {
        template: `
            <div>
            <h4>blogPost Template</h4>
            <slot name="header"></slot>
            <slot name="footer"></slot>
            <slot></slot>        
            </div>
        `
    })

定义一个blogPost组件，在组件模板中添加了三个slot（卡槽），header，footer，default，在blogPost组件应用时，为他添加三个div的子dom，并通过v-slot为他们设置插槽名

还有几个不是很常用：

• v-pre
• v-cloak
• v-once