首页 > 其他分享 >Vue 2x 系列之(十六)内置指令

Vue 2x 系列之(十六)内置指令

时间:2024-02-29 19:44:55浏览次数:26  
标签:内置 插值 标签 2x cloak Vue 指令 节点

内置指令

我们学过的指令:
		v-bind	: 单向绑定解析表达式, 可简写为 :xxx
		v-model	: 双向数据绑定
		v-for  	: 遍历数组/对象/字符串
		v-on   	: 绑定事件监听, 可简写为@
		v-if 	: 条件渲染(动态控制节点是否存存在)
		v-else 	: 条件渲染(动态控制节点是否存存在)
		v-show 	: 条件渲染 (动态控制节点是否展示)

1. v-text

v-test不存在插值闪烁的问题

向其所在的标签插入文本,如果插入的文本是'你好'之类的标签字符串,不会解析标签,而是会直接作为普通文本使用【插值语法也是不会解析的】

v-text指令:
		1.作用:向其所在的节点中渲染文本内容。
		2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

插值语法:会存在插值闪烁的问题,比如在网速较慢时,页面在渲染出来之前会直接显示插值表达式【尚未复现该问题】

2. v-html【待补充】

v-html不存在插值闪烁的问题

向其所在的标签插入文本,如果插入的文本是'你好'之类的标签字符串,会解析标签

cookie的工作原理【Node.js】

cookie的本质就是字符串

3. v-cloak指令

v-cloak指令(没有值):
		1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
		2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}【Vue未解析之前的模板代码】的问题。
<head>
	<meta charset="UTF-8" />
	<title>v-cloak指令</title>
	<style>
		/* 属性选择器:选中所有标签中含有v-cloak属性的标签 */
		[v-cloak]{
			display:none;
		}
	</style>
</head>
<body>
	<!-- 准备好一个容器-->
	<!-- 模板的内容要么不展示,要么展示解析之后的内容,不允许展示未解析之前的模板内容 -->
	<div id="root">
		<h2 v-cloak>{{name}}</h2>
	</div>
  	<!-- 引入Vue -->
	<!-- 如果网速过慢导致该js一直获取不到,会阻塞后面的内容【JS阻塞】,导致Vue迟迟解析不了模板,用户就会看到解析之前的模板代码 -->
	<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>

<script type="text/javascript">
	console.log(1)
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	new Vue({
		el:'#root',
		data:{
			name:'尚硅谷'
		}
	})
</script>

注:引入外部js可以是head中也可以是body的最下方

4. v-once指令

v-once指令(没有值):
			1.v-once所在节点在初次动态渲染后,就视为静态内容了。
			2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能,也可用于显示data中数据的初始值。

5. v-pre指令

不需要读取动态数据的标签加v-pre

v-pre指令:
		1.跳过其所在节点的编译过程【Vue不再进行解析该节点,写的啥样就展示啥样】。
		2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。

标签:内置,插值,标签,2x,cloak,Vue,指令,节点
From: https://www.cnblogs.com/wzzzj/p/18045280

相关文章

  • Vue 2x 系列之(十九)Vue组件化编程
    Vue组件化编程一、对组件的理解什么是组件?组件的定义:​ 实现应用中局部【组件要拆的尽量细致】功能代码【对于前端来说,就是css+html+js】和资源【mp3、mp4、ttf、.zip...】的集合【组件是一个集合】与传统方式编程相比,组件化编程有什么优势?依赖关系不混乱、好维护、代码......
  • Vue 2x 系列之(十八)生命周期
    生命周期[函数]......
  • Vue 2x 系列之(二十)一些注意点
    一些注意点vue基础vue-cli:工程化开发vue-router:在Vue中实现前端路由vuex:应用足够复杂时,用于保管数据element-uivue3Angular==》React==》Vue生命周期函数中的this都是vm开发中自行向vm身上追加属性时【场景:比如methods中要访问mounted钩子中的变量】,避免追加敏感......
  • Vue2.x生命周期函数
    介绍Vue.js2.x中的生命周期函数是一系列钩子函数,它们允许你在Vue实例的不同阶段执行代码。这些生命周期钩子函数允许你在特定的阶段添加自定义逻辑,以便在应用程序生命周期的不同点执行操作。创建阶段1)beforeCreate(创建前):在Vue实例初始化之后,数据观测(dataobs......
  • Vue中组件和插件有什么区别?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、组件是什么回顾以前对组件的定义:组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度,在保持接口不变的......
  • Vue学习笔记25--过滤器(日期格式化)
    日期格式化日期格式化插件:https://www.bootcdn.cn/moment.js、day.js(轻量级moment.js)插件用法:双击day.js==>复制链接并访问==》另存为dayjs.min==》项目中引用https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md过滤器总结:定义:对要显示的数据进行......
  • Vue源码解读:响应式原理
    Vue一大特点就是数据响应式,数据的变化会作用于视图而不用进行DOM操作。原理上来讲,是利用了Object.defifineProperty(),通过定义对象属性setter方法拦截对象属性的变更,从而将属性值的变化转换为视图的变化。在Vue初始化时,会调用initState,它会初始化props,methods,data,......
  • vue3笔记 computed计算属性
    计算属性有缓存的,方法没有缓存下列的计算案例是只读的,不可修改的 上述代码为只读属性,优化后<scriptsetuplang="ts">import{ref,computed}from'vue'letname=ref("zhang")letxing=ref("sang")console.log(name.value)letfullName=compute......
  • vue——使用yarn安装electron依赖时报错:RequestError: read ECONNRESET
    参考:1.Electron安装报错RequestError:readECONNRESEThttps://blog.csdn.net/qq_33835370/article/details/123612429?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-123612429-blog-122476584.235^v43^control&spm=1......
  • vue中draggable使用记录
    NPM或yarn安装方式yarnaddvuedraggablenpmi-SvuedraggableUMD浏览器直接引用JS方式<scriptsrc="https://www.itxst.com/package/vue/vue.min.js"></script><scriptsrc="https://www.itxst.com/package/sortable/Sortable.min.js"></scri......