vue.js从入门到深入再到随心而用———v-cloak等一系列指令的学习

本文链接：https://blog.csdn.net/qq_42147171/article/details/104901888

v-cloak的学习

这小节将会提到的指令：

这小节将会提到的指令：

1.v-cloak:利用插值插入
2.v-text:绑定标签中的全部文本
3.v-html：绑定整个标签的html
4.v-bind:绑定属性(缩写：英文的：)
5.v-on:事件绑定(缩写:@)
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*[v-bloak]{
				display: none;
			}*/
		</style>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<p v-cloak>{{msg}}</p><!--v-cloak解决插值表达式闪烁的问题-->
			<h4 v-text="msg"></h4>
			<!--默认t-text没有闪烁问题-->
			<!--v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空-->
			<div>{{msg2}}</div>
			<div v-text="msg2"></div>
			<div v-html="msg2"></div>
			 <!--v-bind是vue中提供的用于绑定属性的指令-->
			<input type="button" value="按钮" v-bind:title="mytitle+'sad'" />
			<!--注意v-bind指令可以被简写为一个英文的:-->
			<!--v-bind中可以写合法的js表达式-->
			<!--vue中提供了v-on事件绑定机制-->
			<input type="button" value="按钮" :title="mytitle+'sad'" />
			<input type="button" value="按钮" :title="mytitle+'sad'" v-on:click="show"/>
			<!--v-on（事件绑定）的缩写是@-->
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:'123',
					msg2:'<h1>哈哈，我是一个h1</h1>',
					mytitle:'自己定义的title'
				},
				methods:{
					show:function(){
						alert("hello");
					}
				}
			})
		</script>
	</body>
</html>