[vue]4-vue指令

插值操作

mustache

mustache翻译为中文的意思是 胡须、胡子 的意思 {{ }}

这里再简单说一下他的用法

    <div id="app">
        <!-- 插入标签和文字一块使用 -->
        <h1>hello {{name}}</h1>         
        <!-- 两个mustache -->
        <h2>{{name}} {{age}}</h2>
        <!-- 使用表达式 -->
        <h3>{{age * 6}}</h3>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                name: 'vue',
                age: 18
            }
        })
    </script>

注意：mustache语法内部不能放语句，官网给出的例子是这样

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

v-once

在某些情况下，我们可能不希望界面随意的跟随改变

这个时候，我们就可以使用一个Vue的指令 v-once:

该指令后面不需要跟任何表达式 (不像之前的v-for后面是跟表达式的)

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。代码如下：

    <div id="app">
        <h2 v-once>{{name}}</h2>	//只会渲染一次，不会修改
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                name: 'vue',
                age: 18
            }
        })
    </script>

v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML

代码如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示可以使用v-html指令

该指令后面往往会跟上一个string类型

会将string的html解析出来并且进行渲染

    <div id="app">
        <div>{{baidu}}</div>
        <div v-html="baidu">
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                baidu: '<a href="www.baidu.com">百度</a>',
            }
        })
    </script>

v-text

v-text作用和Mustache比较相似：

• 都是用于将数据显示在界面中,但是这个变量会把里面其他的东西覆盖掉

例如这个标签里面有其他的文字，

• 这些文字就会被覆盖掉v-text通常情况下，

• 接受一个string类型

    <div id="app">
        <div v-text="smile">哈哈</div>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                smile: '笑什么',
            }
        })
    </script>

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

比如下面的代码：第一个h2元素中的内容会被编译解析出来对应的内容

第二个h2元素中会直接显示{{message}}

    <div id="app">
        <div v-pre>{{smile}}</div>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                smile: '笑什么',
            }
        })
    </script>

v-cloak

cloak: 斗篷

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

有些情况下，我们希望某个标签，在刚开始的时候不解析，我们可以加上cloak

表示，没有解析到下面的data的时候不展示这个标签

只有解析到下面的标签的时候这个cloak才会消失，标签也就会展示

前面也说过，vue会先把本来的标签显示在页面

本来的标签里面可能大多数是{{}} 这种mustache语法

    <div id="app">
        <div v-cloak>hello {{world}}</div>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                world: '世界',
            }
        })
    </script>

绑定属性

上面的属性属于插值操作，场景主要是将获取到的数据放到页面展示，但是有时候我们希望某些值是动态的，我们就可以用v-bind来进行动态绑定。

比如 a标签的href属性

img 的src属性

v-bind

​ v-bind绑定属性

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

    <div id="app">
        <div v-cloak>hello </div>
        <!-- 动态渲染图片,这个src是data里面的src -->
        <img :src="src" alt="">
        <!-- 官网中还有这种写法，也就是src也可以动态，但是这种场景用的不多 -->
        <img v-bind:[link]="src" alt="">
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                link: 'src',
                src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg',
            }
        })
    </script>

v-bind有一个对应的语法糖

也就是简写方式在开发中，我们通常会使用语法糖的形式

因为这样更加简洁。简写方式如下：

<img :src="src" alt="" />
//对比一下
<img v-bind:src="src" alt="" />

​ v-bind绑定class

很多时候，我们希望动态的来切换class

比如：当数据为某个状态时，字体显示红色。

当数据另一个状态时，字体显示黑色。

绑定class有两种方式：

对象语法

数组语法

对象语法的含义是:

class后面跟的是一个对象。

对象语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>    //控制是否显示这个类名
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

给出一个用法四的例子

    <div id="app">
        <div :class="message">
            哈哈
        </div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isMain: true,
                isHeader: false
            },
            computed: {
                message: function (){
                    return {
                        header: true,
                        main: this.isMain && !this.isHeader
                    }
                }
            }
        })
    </script>

v-bind 绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候，比如font-size

我们可以使用驼峰式 (camelCase) fontSize

或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定方式一：对象语法

    <div id="app">
        <!-- 如果是字符串加单引号 -->
        <div :style="{color: 'red', fontSize: '40px'}">哈哈</div>
        <!-- 如果是变量，什么都不用加 -->
        <div :style="{color: color, fontSize: fontSize + 'px'}">嘿嘿</div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: 40
            },
        })
    </script>

绑定方式二：数组语法

​ 包含计算属性写法，其实官网中vue对于计算属性很推崇，确实，在很多地方很方便。

    <div id="app">
        <div :style="[{color: 'red'}, {fontSize: '40px'}]">哈哈</div>
        <div :style="[style]">嘿嘿</div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: 40
            },
            computed: {
                style: function (){
                    return {
                        color: 'red',
                        fontSize: '40px'
                    }
                }
            }
        })
    </script>

自定义指令

自定义指令，顾名思义，就是自己定义的指令，上面讲到的指令都是vue内部定义好的，但是在某个场景中或许我们需要自己定义指令，应用到某个特殊场景，自定义指令正好可以满足我们的需求。

​ 举个自动聚焦的例子

directive：指令，命令

自定义指令的语法是

​ Vue.directive('指令名‘， 配置项)

使用自定义指令的时候 v-指令名

inserted 被指令绑定的元素插入到真实dom的时候自动执行（什么叫被指令绑定的元素？这个指令在哪用，就指的是谁）

全局指令

    <div id="app">
        <input type="text" v-haha="name">
    </div>
    <script>
        //使用Vue.directive调用的指令，称为全局指令
        Vue.directive('haha', {
            // 里面是一个函数，第一个参数，是当前dom， 第二个参数是当前指令的信息
            inserted(el, directive) {
                console.log('元素插入', el, directive)
                el.focus();
            }
        })

        let app = new Vue({
            el: '#app',
            data: {
                name: '王一'
            },
        })
    </script>

使用该指令，页面加载的时候就可以自动获取焦点

局部指令

    <div id="app">
        <input type="text" v-focus="name">
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                name: '王一'
            },
            directives: {
                // 指令名
                'focus': {
                    inserted(el, directive) {
                        console.log('局部指令', el, directive)
                        el.focus();
                    }
                }
            }
        })
    </script>