Vue基础语法笔记

最新推荐文章于 2023-03-05 19:49:37 发布

海面有风

最新推荐文章于 2023-03-05 19:49:37 发布

阅读量399

点赞数 2

分类专栏： Vue学习笔记文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_44659458/article/details/107787154

版权

Vue学习笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、创建第一个Vue实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue入门</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script>
			new Vue({
				el:"#root",//与id为root进行绑定
				data:{
					msg:"hello world"
				}
			})	
		</script>
	</body>
</html>

二、挂载点和模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>挂载点 模板</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<!--Vue挂载点 <div id="root"></div> -->
		
		<!--模板(挂载点下的内容)-->
		<!--实现1-->
		<div id="root">
			<h1>hello {{msg}}</h1>
		</div>
		<!--实现2-->
		<div id="root">
			<!--在Vue中定义的template-->
		</div>
		
		<script>
			new Vue({
				el:"#root",//与id为root进行绑定
				template:'<h1>hello {{msg}}</h1>',//模板内容
				data:{
					msg:"hello world"
				}
			})
			
		</script>
	</body>
</html>

三、实例中的数据，事件和方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数据 事件 方法</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<!--获取Vue中的数据-->
		<div id="root">
			<h1>{{number}}</h1>
		</div>
		
		<div id="root">
			<h1 v-text="number"></h1>
		</div>
		
		<div id="root">
			<h1 v-html="number"></h1>
		</div>
		
		<!--v-text  v-html的区别
			v-html会将某些标签不进行转义
			v-text会进行转义，文本是什么就显示什么
		-->
		<!--绑定事件-->
		<div id="event">
			<div @click="handleClick">{{number}}</div>
			<!--v-on:也可以简写成@-->
		</div>
		
		<script>
			
			new Vue({
				el:"#root",//与id为root进行绑定
				data:{
					msg:"hello world",
					number:123
				}
			})	
			
			new Vue({
				el:"#event",
				data:{
					number:123
				},
				methods:{
					handleClick:function(){
						//修改Vue中的数据
						this.number="321"
					}
				}
			})	
		</script>
	</body>
</html>

四、Vue中的属性绑定和双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性绑定 双向数据绑定</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<!--属性绑定-->
		<div id="event">
			
			<!--v-bind:可以简写成:-->
			<div :title="'dell lee '+title">hello world</div>
			
			<!--双向数据绑定-->
			<input v-model="content"/>
			<div>{{content}}</div>
		</div>
		<script>
			new Vue({
				el:"#event",
				data:{
					title:"this is hello World",
					content:"this is content"
				}
			})
		</script>
	</body>
</html>

五、Vue中的计算属性和侦听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性与侦听器</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="event">
			姓<input v-model="firstName" />
			名<input v-model="lastName" />
			<div>{{fullName}}</div><!--通过计算属性显示全名-->
			
				
			<!--侦听器(每当修改一次姓或名时count+1)-->
			<div v-text="count"></div>
			<div v-text="fullcount"></div>
		</div>
		<script>
			new Vue({
				el:'#event',
				data:{
					firstName:'',
					lastName:'',
					count:0,
					fullcount:0
				},
				computed:{
					/*
					 computed是指一个属性通过另外一个或多个属性计算而来
					 如果属性没有发生改变，则使用上次缓存的计算 的数据，只有当一个属性或多个属性改变时才会执行计算
					 * */
					fullName:function(){
						return this.firstName + ' '+this.lastName
					}
				},
				watch:{//侦听器
					firstName:function(){
						this.count++
					},
					lastName:function(){
						this.count++
					},
					fullName:function(){
						this.fullcount++
					}
				}
			})
		</script>
	</body>
</html>

六、v-if v-show v-for指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-if v-show v-for指令</title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!--v-if为真时显示 假时隐藏 v-show也是一样
				区别是
				     v-if:为假时，是直接将该标签在节点树将该标签删除
				     v-show:为假时，是将该标签增加一个属性为display:none   
			-->
			<div v-if="show">hello world</div>
			<!--点击按钮将hello world属性进行显示和隐藏-->
			<button @click="handleClick">toggle</button>
			
			<!--v-for(循环遍历list)-->
			<ul>
				<!--每一次遍历list会将该位置的内容赋值给item
					必须设置key值 可以提高渲染效率 且每一个key值不一样
				-->
				<li v-for="item of list" :key="item">{{item}}</li>
				<!--这里key可以直接使用item 如果item中的值有一样的则不可以
					此时，应该将 v-for改成(item,index) key为index(如果该集合需要经常排序则不适用)
					index指的是下标
				-->
			</ul>
		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					show:true,
					list:[1,2,3]
				},
				methods:{
					handleClick:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>

欢迎访问我的个人博客

海面有风

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础语法笔记

一、创建第一个Vue实例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue入门</title> <script src="vue/vue.js"></script> </head> <body> <div id="root">{{msg}}</div> &lt
复制链接

扫一扫