02-Vue的基础语法（插值操作）

最新推荐文章于 2024-09-13 14:34:15 发布

一朵野花压海棠

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量202

点赞数 1

文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_37831545/article/details/107345259

版权

代码规范：缩进4个空格、2个空格（更规范）
插值操作：

1、Mustache语法（也就是双大括号）

例如：{{message}}
(Mustache语法中,不仅仅可以直接写变量，还可以写简单的表达式)

		<div id="app" >
			<h3>{{message}}</h3>
			<h3>{{message}}，李四</h3>
			<h3>{{firstName + lastName}}</h3>
			<h3>{{firstName +' ' +lastName}}</h3>
			<h3>{{firstName}}  {{lastName}}</h3>
			<h3>{{counter * 2}}</h3>
      <!--Mustache语法中,不仅仅可以直接写变量，还可以写简单的表达式-->
		</div>		
	<script>
		new Vue({
			el:'#app',
			data:{
				message:'你好！',
				firstName:'zhang',
				lastName:'san',
				counter:123
			}
		})
	</script>

运行结果：
在这里插入图片描述

2、v-once ：（后面不用跟任何表达式）

例如：
作用：该指令表示元素和组件只渲染一次，后面不会随着数据的改变而改变。

		<div id="app">
			<h3>{{message}}</h3>
			<h3 v-once>{{message}}</h3>
			<!--v-once：（后面不用跟任何表达式）作用：该指令表示元素和组件只渲染一次，后面不会随着数据的改变而改变。-->
		</div>
	<script>
		new Vue({
			el: '#app',
			data: {
				message: 'Hello Coderwhy',
			}
		})
	</script>

运行结果：
在这里插入图片描述

3、v-html：（通常情况下，后面跟string 类型：）

例如：
作用：将服务器请求到的HTML代码，进行解析并显示和渲染相应的内容

		<div id="app" >
			<h3 v-html="url"><h3>
           <!--将服务器请求到的HTML代码，进行解析并显示和渲染相应的内容-->
		</div>		
	</body>
	<script>
		new Vue({
			el:'#app',
			data:{
				url:'<a href="http://www.baidu.com">百度</a>'
			}
		})
	</script>

运行结果:
在这里插入图片描述

4、v-text：（通常情况下，后面跟string 类型）

例如：hello!
作用：v-text的作用与Mustache比较相似：都用于将数据显示在界面中。
注意：v-text使用时不太灵活，在上面例句拼接时，他会覆盖后面（hello!）的内容。

		<div id="app">
			<h3 v-text="message"></h3>
				<h3 v-text="message">，hello!<h3>
				<!--v-text的作用与Mustache比较相似：都用于将数据显示在界面中。
        注意：v-text使用时不太灵活，在上面例句拼接时，他会覆盖后面（hello!）的内容。-->
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				message: '你好呀！'
			}
		})
	</script>

运行结果：
在这里插入图片描述

5、v-pre：（后面不用跟任何表达式）

例如： {{message}}  结果显示： “ {{message}} ”
作用：用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

	<div id="app">
	<h2> {{message}} </h2>
	<h2 v-pre> {{message}} </h2>
	<!--用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。-->
	</div>
	</body>
    <script>	
	new Vue({
		el:'#app',
		data:{
			message:'你好！'
		}
	})

运行结果：
在这里插入图片描述

6、v-cloak：（cloak:斗篷）

例句： {{message}}
作用：直接显示未编译的Mustache标签，（在vue解析之前，p有v-cloak属性，在vue解析之后，p没有v-cloak属性）

<style type="text/css">
		[v-cloak]{
			display: none;
		}
	</style>
	<body>
	<div id="app">
	  <h3>{{message}}</h3>
	  <h3 v-cloak>{{message}}</h3>
		<!--在vue解析之前，h3有v-cloak属性
		在vue解析之后，h3没有v-cloak属性-->
	</div>
	</body>
    <script>	
		setTimeout (function(){
			new Vue({
				el:'#app',
				data:{
					message:'你好！'
				}
			})
		},1000)
</script>