Vue学习-模板语法

最新推荐文章于 2024-05-16 11:55:22 发布

小太阳的博客

最新推荐文章于 2024-05-16 11:55:22 发布

阅读量113

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/qq_44859314/article/details/105385776

版权

Vue学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

内容绑定

Mustache-插值操作

这个前面已经涉及到很多次了，也就是我们所说的双大括号

<div id="app">
	 <h2>{{content}}</h2>
	 <h2>{{content}},hello</h2>
	 <h2>{{firstName +" "+lastName}}</h2>
	 <h2>{{counter*2}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:"#app",
		data:{
			content:"你好之华",
			firstName:"Robbot",
			lastName:"Tom",
			counter:100
			}
		})
</script>

会有下面的效果：
在这里插入图片描述
mustache语法中不仅仅可以直接写变量，也可以写简单的表达式

插值操作-其他指令操作

v-once
*该指令后不需要跟任何表达式
*表示元素和组件只渲染一次，不会随着数据的改变而改变
*使用情况：不希望该条数据随页面响应时

<h2 v-once>{{content}}</h2>
<h2>{{content}},hello</h2>

v-html
*使用情况：我们希望解析出html进行展示
*该指令后面往往会跟上一个string类型
*会将string的html解析并进行渲染

<div id="app">
	<h2>{{url}}</h2>
	<h2 v-html="url"></h2>
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:"#app",
		data:{
			url:'<a href="http://www.baidu.com">百度一下</a>'
			}
		})
</script>

效果如下：
在这里插入图片描述
v-text
直接展示文本，也就是在上一章节中提到过的三种插值方法的比较。v-text并不常用。它的操作不灵活，容易对标签中的元素进行覆盖。

v-pre
pre标签：有什么样的内容，就将其原封不动的展示出来。
v-pre用于跳过这个元素和它子元素的编译过程，显示原本的mustache语法
*其后不加任何表达式
例如：

<div id="app">
	<h2>{{message}}</h2>
	<h2 v-pre>{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:"#app",
		data:{
			message:'你好之华'
			}
		})
</script>

效果如下：
在这里插入图片描述
v-cloak
因为浏览器是从上往下解析代码，可能会出现某些情况下，浏览器会显示出未编译的mustache标签。
v-cloak会在代码解析完整后自动消除：
在vue解析之前，div中有一个属性v-cloak;
在vue解析之后，div中没有一个属性v-cloak.
在页面加载完整前，设置属性样式为不可显示：

<style>
   	[v-cloak]{
   		display: none;
   	}
   </style>
   <body>
   	<div id="app">
   		<h2 v-cloak>{{message}}</h2>
   	</div>
   	<script src="js/vue.js"></script>
   	<script>
   		setTimeout(function(){
   			const app=new Vue({
   				el:"#app",
   				data:{
   					message:'你好之华'
   					}
   				})
   		},1000)
   	</script>
   </body>

我们用到此类标签的时候并不多，常用虚拟dom操作vue实例.

动态绑定属性

前面的指令的主要作用是将值插入到我们的模板内容中，但是除了内容需要动态决定外，某些属性也需要动态进行绑定。
比如动态绑定a标签的href属性
比如动态绑定img元素的src属性。

V-bind的基本使用

作用：动态绑定属性，可绑定一个或多个属性值，或者向另一个组件传递props值
缩写：：
一个例子：动态显示图片和地址

<div id="app">
	<img v-bind:src="imgurl" />
	<a v-bind:href="url">百度一下</a>
</div>
<script src="js/vue.js"></script>
<script>
		const app=new Vue({
			el:"#app",
			data:{		
				imgurl:'http://pic1.win4000.com/wallpaper/3/537d8ef8c2591.jpg',
				url:'http://www.baidu.com'
				}
			})
</script>

v-bind动态绑定class（对象语法）

<h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>

布尔值为true时类被加到标签上，当布尔值为false时类不会被加到标签上。
但是一般把布尔值放在data中定义:

<h2 v-bind:class="{active:isActived}">{{message}}</h2>
//vue实例中
data:{isActived:true}

多个class值不会覆盖。

也可以写在methods里面：

<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
//methods方法中
methods:{
	getClasses:function(){
			return {active:this.isActived,line:this.isLine}
			}
	}

v-bind动态绑定class（数组语法）

变量就不加单引号，字符串就加单引号
这部分的内容上一节有提到过，此处就不多做介绍了。

v-bind动态绑定style（对象语法）

<div id="app">
	<!-- <h2 :style="{key:(属性名):value(属性值)}">{{message}}</h2> -->
	<!-- '50px必须加上单引号，否定会当成一个变量去解析' -->
	<!-- <h2 :style="{fontSize:'50px'}">{{message}}</h2> -->
	<h2 :style="{fontSize:finalSize}">{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
		const app=new Vue({
			el:"#app",
			data:{
				message:'你好',
				finalSize:"100px"
				}
			})
</script>

同样也可以在methods里面设置属性。

v-bind动态绑定style（数组语法）

可以跟多个属性值

<div
	<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
		const app=new Vue({
			el:"#app",
			data:{
				message:'你好',
				baseStyle:{backgroundColor:'red'},
				baseStyle1:{fontSize:'100px'}
				}
			})
</script>

以上就是本次的内容啦~

小太阳的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习-模板语法

Mustache-插值操作这个前面已经涉及到很多次了，也就是我们所说的双大括号<div id="app"> <h2>{{content}}</h2> <h2>{{content}},hello</h2> <h2>{{firstName +" "+lastName}}</h2> <h2&gt...
复制链接

扫一扫