vue内置指令

最新推荐文章于 2024-07-02 09:49:13 发布

Gjanuary

最新推荐文章于 2024-07-02 09:49:13 发布

阅读量398

点赞数

分类专栏：前端学习记录文章标签： vue.js

本文链接：https://blog.csdn.net/Gjanuary/article/details/121684522

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的内置指令，如v-cloak隐藏未加载内容、v-text和v-html处理文本和HTML、v-once仅执行一次、v-pre提升编译效率，以及各种指令的实际应用场景和用法示例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue的内置指令</title>
	<script type="text/javascript" src="./vuebasic/vue.js"></script>
 
    <style>
        
       [v-cloak]{
            display:none;
       }
    </style>
</head>
<body>
  
    <div id="root">
        <!--
        cloak当vuejs没有加载完成，并且在这段代码的后端进行引入的时候，
            可以把这个v-cloak放到显示的元素中，在css中设置隐藏，这样
            浏览器就看不见没有解析的地方了，等vuejs加载完成之后，这个v-cloak，vue
            会自动删除，其它元素就能正常的显示了-->
        <p v-cloak>
            {{ seen }}
        </p>
        <!--v-text:会把你文本中的所有东西都当成字符串进行处理，
            所以html也不会生效会直接显示到相应的位置-->
        <!--下面的效果是一样的-->
        <p v-text="name"></p>
        <p>{{ name }}</p>


        <!--v-html使用可解析html的代码-->
        <p v-html="name"></p>


        <!--v-once只执行一次以后不在执行-->
        <div v-once>{{ inadd }}</div>
        <div>{{ inadd }}</div>
        <button @click="inadd++">点我增加</button>


        <!--
            v-pre：
            1.跳过所在节点的编译过程
            2.利用他跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译过程
        -->
        <div v-pre>我这里个div元素没有任何需要编译的地方我可以进行v-pre处理方便加快编译过程</div>

        
       
    </div>

	<script>
		Vue.config.productTip = false// 阻止启动时候提示生产错误
        new Vue({
            el:'#root',
            data:{
                name:'<h4>亚洲飞人刘翔</h4>',
                seen:'加载完毕！！',
                inadd:1
            },
           
        })
	</script>
</body>
</html>