Vue.js基本指令（1）

最新推荐文章于 2024-08-10 21:02:05 发布

冰冷的冰

最新推荐文章于 2024-08-10 21:02:05 发布

阅读量205

点赞数

文章标签： vue css html5 css3

本文链接：https://blog.csdn.net/buchishutiao/article/details/114276307

版权

在学习vue的基本指令之前，首先要知道vue作为javaScript框架，会有自己特有的模板语法，这些语法遵循规范的浏览器和HTML解析器，会借助插值、表达式、指令构成整个页面。
1.文本插值：
最基本的使用双大括号**{{}}。
只需要渲染一次数据，后续数据变化不再关心，可以通过v-once指令来实现。
也可使用v-text**指令代替{{}}。
v-html可以解析标签

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<p>{{title}}</p>
			<p v-once>{{title}}</p>
			<p v-text="title"></p>
			<p v-html="title"></p>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
				title:"<h1>hello</h1>"
			}
			
		})
	</script>
</html>

在这里插入图片描述
2.绑定类样式和内联样式
v-bind:对象绑定案例（可以使用简写**：**代替）

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#app{
				width: 600px;
				margin: 20px auto;
			}
			#app .border{
				width: 300px;
				height: 300px;
				border: solid 3px chartreuse;
			}
			#app .shadow{
				box-shadow: 0 0 10px black;
			}
			#app .background{
				background-color: aqua;
			}
			#app .hover{
			   transition:  all 1s 0s; 
			}
			#app .hover:hover{
			  width: 200px;
			  height: 200px;
			  background-color: hotpink;
			   transition:  all 1s 0s; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>
				<input type="checkbox" v-model="isborder"/>边框
				<input type="checkbox" v-model="ishover"/>动画
				<input type="checkbox" v-model="isbackground"/>背景颜色
				<input type="checkbox" v-model="isshadow"/>阴影
			</p>
			<div v-bind:class="{
				hover:ishover,
				border:isborder,
				background:isbackground,
				shadow:isshadow
			}">
				
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
			isborder:true,
			isshadow:true,
			isbackground:true,
			ishover:true,
			
			}
			
		});
	</script>
</html>

在这里插入图片描述
v-bind:数组绑定案例

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#app{
				width: 600px;
				margin: 20px auto;
			}
			#app .border{
				width: 300px;
				height: 300px;
				border: solid 3px chartreuse;
			}
			#app .shadow{
				box-shadow: 0 0 10px black;
			}
			#app .background{
				background-color: aqua;
			}
			#app .hover{
			   transition:  all 1s 0s; 
			}
			#app .hover:hover{
			  width: 200px;
			  height: 200px;
			  background-color: hotpink;
			   transition:  all 1s 0s; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>
				<input type="checkbox" v-model="isborder"/>边框
				<input type="checkbox" v-model="ishover"/>动画
				<input type="checkbox" v-model="isbackground"/>背景颜色
				<input type="checkbox" v-model="isshadow"/>阴影
			</p>
			<div v-bind:class="[
				isbackground,isborder,ishover,isshadow
			]">
				
			</div>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var em=new Vue({
			el:"#app",
			data:{
			isborder:"border",
			isshadow:"shadow",
			isbackground:"background",
			ishover:"hover",
			
			}
			
		});
	</script>
</html>

冰冷的冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基本指令（1）

在学习vue的基本指令之前，首先要知道vue作为javaScript框架，会有自己特有的模板语法，这些语法遵循规范的浏览器和HTML解析器，会借助插值、表达式、指令构成整个页面。1.文本插值：最基本的使用双大括号**{{}}。只需要渲染一次数据，后续数据变化不再关心，可以通过v-once指令来实现。也可使用v-text**指令代替{{}}。v-html可以解析标签<html> <head> <meta charset="utf-8" /> <t
复制链接

扫一扫