VUE指令（一）

最新推荐文章于 2022-03-23 18:07:35 发布

B~~

最新推荐文章于 2022-03-23 18:07:35 发布

阅读量251

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Q111900/article/details/109223497

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue指令(一）

（一）v-once

1、该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

2、该指令表示元素和组件只渲染-次,不会随着数据的改变而改变。

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
        },
    })
</script>

（二）v-html

某些情况下,我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{}来输出,会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。可以使用v-html指令

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

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

<body>
    <div id="app">
        <h2 v-html="url"></h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
            url: '<a href="htpp://www.baidu.com">百度一下</a>'
        },
    })
</script>

（三）v-text

➢v-text作用和Mustache比较相似:都是用于将数据显示在界面中

➢v-text通常情况下,接受-个string类型

<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2>{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
        },
    })
</script>

（四）v-pre

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

比如下面的代码:

 第一个h2元素中的内容会被编译解析出来对应的内容
 第二个h2元素中会直接显示{{messagel}}

<body>
    <div id="app">
      <h2>{{message}}</h2>
      <h2 v-pre>{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
        },
    })
</script>

效果图：
在这里插入图片描述

（五）v-cloak

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

<body>
    <div id="app">
        <h2 v-cloak>{{message}}</h2>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //在vue解析之前，有v-cloak
    //解析后无v-cloak
    const app = new Vue({
        el: '#app',
        data: {
            message: 'as',
        },
        methods: {

        },
    })
</script>

（六）v-on

口作用:绑定事件监听器

口缩写:@

口预期:Function | Inline Statement I|Object

口参数:event

<body>
    <div id="app">
        <h2>{{counter}}</h2>
        <button @click="counter++">+</button>
        <button @click="decrement()">-</button>
        <!-- 调用方法，手动获取浏览器参数event对象：$event -->
        <button @click="btnclick(123,$event)">按钮</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            decrement() {
                this.counter--
            },
            btnclick(a, event) {
                console.log(a, event);
            }
        },
    })
</script>

（七）v-bind

■v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值

某些属性我们也希望动态来绑定。

➢比如动态绑定a元素的href属性

➢ 比如动态绑定img元素的src属性

这个时候,我们可以使用v-bind指令:

口作用:动态绑定属性

口缩写::

口预期: any (with argument) | Object (without argument)

口参数: attrOrProp (optional)

1）通过Vue实例中的data绑定元素的src和href

<div id="app1">
        <img v-bind:src="imgurl" alt="">
        <a :href="ahref">百度一下</a>
</div>

<script>
const app = new Vue({
        el: '#app1',
        data: {
            message: 'as',
            imgurl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599893806753&di=4d4dbb7a7ef43a6aa936ddf60be12ad9&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
            ahref: 'http://www.baidu.com'
        },
    })
</script>

2)动态绑定class（对象）

<div id="app2">
        <h2 :class="active">dfdsg</h2>
        <h3 :class="{actives:isactive,a2:isa2}">test</h3>
        <button @click="btn">按钮</button>
</div>

<script>
 const app = new Vue({
        el: '#app2',
        data: {
            message: 'as',
            active: 'actives',
            isactive: true,
            isa2: false
        },
        methods: {
            btn(){
               this.isactive = !this.isactive 
            }
        },
    })
</script>

3)动态绑定class（数组）

 <div id="app3">
        <h2 :class="['a','b','c']">{{message}}</h2>
        <h2 :class="getclass()">{{message}}</h2>
</div>

<script>
const app = new Vue({
        el: '#app3',
        data: {
            message: 'as',
        },
        methods: {
            getclass() {
                return ['a', 'b', 'c']
            }
        },
    })
</script>

4)动态绑定样式（对象）

<div id="app4">
        <h2 :style="{fontSize:'50px'}">{{message}}</h2>
        <h2 :style="{fontSize:size,color:color}">{{message}}</h2>
 </div>

<script>
const app = new Vue({
        el: '#app4',
        data: {
            message: 'as',
            color:'red',
            size: '100px'
        },
    })
</script>

5)动态绑定样式（数组）

 <div id="app5">
        <h2 :style="[baseStyle]">{{message}}</h2>
</div>

<script>
 const app = new Vue({
        el: '#app5',
        data: {
            message: 'as',
            baseStyle:{
                backgroundColor:'red',
                fontSize:'100px'
            }
        },
        methods: {

        },
    })
</script>

B~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE指令（一）

Vue指令(一）(一）v-once1、该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)2、该指令表示元素和组件只渲染-次,不会随着数据的改变而改变。<body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div></body><scrip
复制链接

扫一扫