Vue的指令

最新推荐文章于 2024-05-16 23:40:36 发布

Tony_Starkis

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量67

点赞数

分类专栏： Vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/tony_starkis/article/details/120234787

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试Vue指令</title>
		<!-- 引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app" v-cloak>
			{{msg}}<br />
			{{msg}}<br />
			<!-- 数据驱动，双向绑定：改Model会影响View,改View会影响Model
			 v-model是Vue的指令，实现了双向绑定的功能
			 -->
			<input type="text" v-model="msg" />
			<!-- 解析数据，HTML代码 -->
			<p v-html="msg"></p>
			<!-- v-if指令用来做判断，条件满足才展示，不满足就不展示 -->
			<p v-if="person.age>=18">成年人</p>
			<p v-show="person.age>=18">成年人</p>
			<p v-if="type==='A'">优秀</p>
			<p v-else-if="type==='B'">良好</p>
			<p v-else-if="type==='C'">中等</p>
			<p v-else >错误 </p>
			<!-- v-for指令用来循环，可以循环数组，类似于JS里的for...in语法 -->
			<ol>
				<li v-for="i in arr" o >{{i}} </li>
			</ol>
			
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app",
				data:{
					msg:'hello vue',
					type:'A',
					person:{
						age:100
					},
					arr:[1,2,3]
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue指令</title>
		<!-- 引入vue.js -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 渲染区 -->
		<div id="app">
			<!-- 1.v-on指令用来给HTML元素加Vue事件，用:指定事件触发方式 -->
			<button v-on:click="show()">点我1</button>
			<button v-on:click="say('hi bro')">点我2</button>
			<button v-on:dblclick="say('hi vue')">点我3</button>
			<!-- 练习：计数器，点一次按钮就把次数++ -->
			<button v-on:click="count++">赞{{count}}</button>
			
			<!-- v-bind指令用来获取变量值 -->
			<a href="{{url}}">点我跳转1</a>   
			<a v-bind:href="url">点我可以看到观看你最想看的</a>
		</div>
		<!-- Vue对象 -->
		<script>
			new Vue({
				el:"#app",//挂载点
				data:{
					count:0,
					url:'https://www.bilibili.com/video/BV1R64y1d7pm?from=search&seid=10045310380533174503&spm_id_from=333.337.0.0'
				},
				methods:{
				    show(){//函数的简写形式
						alert(100);
				   },
				    say(a){
						alert(a);
				    }
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 组件Component</title>
		<!-- 1.导入Vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 数据渲染区 -->
		<div id="app">
			<!-- 使用组件 -->
			<hellocom></hellocom>
		</div>
		<div id="d1">
			<hellocom></hellocom>
			<person></person>
		</div>
		<script>
			//创建Vue组件:类似于扩展了HTML的标签
			//Vue.comonent(1,2)-1是组件名-2是组件的显示效果
			Vue.component('hellocom',{
				template : '<h1>你好 Vue组件</h1>',
			})
			<!-- 创建Vue对象 -->
			new Vue({
				el:'#app',
			})
			new Vue({
				el:'#d1',
				//局部组件
				components:{
					'person':{
						template:'<p>我是一个组件</p>'
					}
				}
			})
		</script>
	</body>
</html>

Vue.js的包要引用，把包复制到项目目录里面。

Tony_Starkis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的指令

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试Vue指令</title>  <script src="vue.js"></script> </head> <body>  <div i.
复制链接

扫一扫