02插值语法

基本语法

Mustache语法

<div id="app">
    <h2>{{massage}}</h2>
    <h2>{{firstName+lastName}}</h2>
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{counter*2}}</h2>
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				massage: "你好",
                firstName:"kobe",
                lastName:"bryant",
                counter:200
			}
		})
	</script>
</body>

v-once指令

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的
该指令表示元素和组件(组件后面才会学习)只渲染- 次,不会随着数据的改变而改变

<h2 v-once>{{massage}}</h2>

v-html

该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染

	<h2>{{url}}</h2>  <!-- <a href="www.baidu.com">百度一下</a> -->
	<h2 v-html="url"></h2>  <!-- 百度一下 -->

v-text

都是用于将数据显示在界面中，但是通常只接受一个string类型

	<h2 v-text="massage"></h2>	<!--你好-->

v-pre

用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法

	<h2 v-pre>{{massage}}</h2> <!-- {{massage}} -->

v-cloak

在某些情况下,防止浏览器可能会直接显然出未编译的Mustache标签

<style>
	[v-cloak] {
		display: none;
	}
	</style>
</head>

<div id="app" v-cloak>
	<h2>{{massage}}</h2>
	<h2 v-once>{{massage}}</h2>
	<h2>{{url}}</h2> 
    <!-- <a href="www.baidu.com">百度一下</a> -->
	<h2 v-html="url"></h2> <!-- 百度一下 -->
	<!--你好-->
	<h2 v-pre>{{massage}}</h2> <!-- {{massage}} -->
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		//在vue解析之前，div里有一个属性c-cloak
		//在vue解析之后，div里没有一个属性c-cloak
		const app = new Vue({
			el: "#app",
			data: {
				massage: "你好",
				url: '<a href="www.baidu.com">百度一下</a>'
			}
		})
	</script>
</body>
posted @ 2021-11-08 22:46  天亮說晚安  阅读(44)  评论(0)    收藏  举报