Vue.js使用(2)_vue 临时代码标记-CSDN博客

本文链接：https://blog.csdn.net/abcsxc258/article/details/113000777

接着上次的

v-slot 插槽具体插槽和作用域插槽,在组件调用以及显示时用到和template连用以后说到组件时具体说说

而且现在的slot slot-scop 都已经被废弃了

v-once 表示只作用一次,简单的来说比如你想设置一个抽奖按钮,只有一次抽奖机会,那么这个按钮就只会作用渲染一次, 以后是被当作静态内容的,当然这个指令现在不常用

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。就是把元素当静态内容展示,不需要编译过程比如
{{ this will not be compiled }}
显示的仍是{{ this will not be compiled }} 这个整体就是个静态html页面了

v-cloak 这个指令保持在元素上直到关联实例结束编译.举个例子就很明显
例如你网页源代码是用vue写的,有时候网络环境差,你用{{data}}显示一段内容
而data是你关联了一段内容的本来编译完了显示关联的内容的,而网速差会导致显示原生的{{data}}然后忽然变成你想展示的内容
使用v-cloak+css就能隐藏前面的原生内容

<div id="app" v-cloak>
    {{context}}
</div>


[v-cloak]{
    display: none;
}

连用就能隐藏展示前的原生内容

组件

<body>
		<div id="app">
			<input type="button" @click="handlclik" value="点击" />
			<first></first>
		</div>
	</body>
	
	<script>
		Vue.component('first',{
			template:`<div>{{data}}</div>`,
			data(){
				return{
					data:'这是一段组件插入',
				}
			},
			mthods:{
			
			}
		})
		
		
		var vue = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue',
			},
			methods:{
				handlclik(){
					console.log('点击')
				}
			}
		})
	</script>

组件开始那个first是个组件名称不同的是里面的data必须写成函数形式
里面的数据要return回来
然后你在主页面中你就能直接使用组件名称的标签了,显示的就是template里面的内容
template之前说过就是一个临时标签,加载网页的时候并不会显示,只会显示里面的内容,组件的引入是方便以后的样式插入与分离,方便重复利用

有了这些东西 vue.js已经差不多会使用了

以后会涉及到组件的封装,大家可以自己封装自己设计的组件方便重复利用