VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on

最新推荐文章于 2024-05-14 20:08:50 发布

敢问

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量505

点赞数

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

本文链接：https://blog.csdn.net/weixin_41040445/article/details/111054200

版权

VUE 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1、v-html、v-text、{{}}

上面三种都是渲染文本的方法，使用场景的区别

v-text和{{}}渲染结果类似，都是以文本类型进行渲染

区别：

1、{{}}在渲染结果之前，会有编译之前的文本显示，v-text没有这种现象

2、{{}}更加灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容

 <h1 v-text = "a">数值不显示</h1>
        <h1 >数值是{{a}}---</h1>

3、{{}}和v-text的渲染方式和v-html有本质的不同，v-html会识别模板

<div id="app">
        <p v-text = "a">数值不显示</p>
        <p >数值是{{a}}---</p>
        <div v-html="b"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100,
                b : "<h1>v-html</h1>"
            }
        })
    </script>

2、v-cloak

v-cloak指令的作用是Vue示例渲染后关联结束

{{}}插值语法在遇到网络延迟的时候会显示编译之前的文本

可以使用v-cloak结合css解决{{}}渲染难题

<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div id="app">
        <p v-cloak>{{a}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            }
        })
    </script>
</body>

[v-cloak]css选择器是html结构中有v-cloak的属性，有这个属性设置display：none；，又因为v-cloak指令在Vue的实例加载完之后关联结束，所以就需要这个元素的隐藏状态，元素就会显示，这样造成的结果要么显示空白，要么显示编译后的文本

3、v-once

v-once的作用是只会渲染对应文本一次，数据跟新不会引起视图更新，目的是为了优化页面性能

<div id="app">
        <p v-once>{{a}}</p>
        <button @click="add">++</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            },
            methods:{
                add(){
                    this.a++;
                    console.log(this.a)
                }
            }
        })
    </script>

v-once使用场景：没有动态的元素内容，比如一些文章，固定标题

4、v-pre 跳过编译的过程直接显示元素内部的文本，特点是跳过大量的没有指令的节点

 <p v-pre>{{a}}</p>

浏览器显示的就是没有编译之前的文本内容，v-pre属性的优点，优化页面的加载性能

5、v-on

v-on的作用是给元素添加监听事件，可简写为@

JavaScript元素的事件监听都可以在Vue中使用

JavaScript事件监听和Vue事件监听
JavaScript	onclick	ondblclick	onmouseenter	onmouseleave	onmousemove	onmouseout	onblur	onfocus	onkeydown
Vue	v-on:click \|\| @click	v-on:dblclick \|\| @dblclick	v-on:mouseenter \|\| @mouseenter	v-on:mouseleave \|\| @mouseleave	v-on:mousemove \|\| @mousemove	v-on:mouseout \|\| @mouseout	v-on:blur \|\| @blur	v-on:focus \|\| @focus	v-on:keydown \|\| @keydown

<div id="app">
        <p >{{a}}</p>
        <button @click="add">++</button>
        <button v-on:click="minus">--</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            },
            methods:{
                add(){
                    this.a++;
                    console.log(this.a)
                },
                minus(){
                    this.a--
                }
            }
        })
    </script>

Vue 方法必须写在 methods 里

原生的JavaScript事件方法不能和vue混用

同名方法后面的会覆盖前面的

methods:{
                add(){
                    this.a++;
                    console.log(this.a)
                },
                add(){
                    this.a +=10
                },
                minus(){
                    this.a--
                }
            }

a每次会加10

方法中传入参数

<div id="app">
        <p >{{a}}</p>
        <button @click="add(5)">++</button>
        <button v-on:click="minus(5)">--</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            },
            methods:{
                add(num){
                    this.a += num;
                    console.log(this.a)
                },
               
                minus(num){
                    this.a -= num;
                }
            }
        })
    </script>

如果方法中没有传入值，默认输入会有该方法的事件参数

<button @click="add">点击加1</button>
//方法名称
methods:{
    add(event) {
        console.log(event)
    }
}

敢问

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on

1、v-html、v-text、{{}}上面三种都是渲染文本的方法，使用场景的区别v-text和{{}}渲染结果类似，都是以文本类型进行渲染区别：1、{{}}在渲染结果之前，会有编译之前的文本显示，v-text没有这种现象2、{{}}更加灵活，中间是可以添加内容的，v-text只能渲染data中的数据，中间不允许插入内容 <h1 v-text = "a">数值不显示</h1> <h1 >数值是{{a}}---</h1>
复制链接

扫一扫