vue.js Day1

最新推荐文章于 2024-03-28 16:11:03 发布

夜雨_tbw

最新推荐文章于 2024-03-28 16:11:03 发布

阅读量224

点赞数

分类专栏： Day1 文章标签： vue JavaScript

本文链接：https://blog.csdn.net/weixin_45567242/article/details/103338784

版权

Day1 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01-vue的初体验

01- hollo vue.js

第一次接触vue，当然是写一个最简单的dome，在写之前，我们要安装vue，安装vue有三种方法，在官网可以看到，最初学习，建议使用CDN 首先下载好vue后把它保存在学习的文件夹中，然后在使用时候
直接使用标签对将他引入就可以了！首先使用一个变量或者常亮来实例化一下Vue，let（变量) / const(常量) {ES6语法}
命令式编程
原生js实践（命令式编程）
创建div元素，设置id属性
定义一个变量叫消息
将message变量放在div元素中显示
修改message数据
将修改的元素替换到div
声明式编程
vue写法（声明式）
创建一个div元素，设置id属性
定义一个vue对象，将div挂载在vue对象上
在vue对象内定义变量message，并绑定数据
将message变量放在div元素上显示
修改vue对象中的变量消息，div元素数据自动更改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<h1>{{message}}</h1>
		<h1>{{name}}</h1>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			//let(变量)/const(常亮)
			const app = new Vue({
				el:"#app",  //用于挂载要管理的元素
				data:{		//定义一些数据
					message:"你好！！！",
					name:"我是TBW"
				}
			})
		</script>
	</body>
</html>

02-列表展示

在开发中有大量的数据，有的展示而有的不展示，在原生JS中需要循环遍历顺序来替换div元素，在vue中使用v-for可以简答的遍历和生成数组元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in moves">{{item}}</li>
			</ul>
		</div>
		<script src="../js/vue.js" type="text/javascript"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					mess:"你好啊",
					moves:["银河补习班","大话西游","少年派","盗墓空间"]
				}
			})
		</script>
	</body>
</html>

{{item}}

在这里只使用了一个li就遍历出在vue中声明的一个数组在遍历时，他会将moves数组中的数据都循环出来并且一个一个保存在了key中，然后使用mustache语法在标签对中输出key 好像和for in 循环是一个意思。

03-vue计数器案例

定义vue对象并初始化一个变量counter= 0
定义两个方法add和sub，用于对counter++或count–
定义两个按钮对象，给按钮添加上点击事件
在vue对象中使用方法表示方法集合，使用v-on:click的关键字给元素绑定监听单击事件，给按钮分别绑定上单击事件，并绑定触发事件后变量函数add和sub。也可以在其中方法中直接使用表达式。例如：counter++和counter–。

<body>
		<div id="app">
			<h2>当前计数：{{conunter}}</h2>
			<!-- <button v-on:click="conunter++">+</button>
			<button v-on:click="conunter--">-</button> -->
			<button type="button" v-on:click="add">+</button>
			<button type="button" v-on:click="sub">-</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					conunter:0,
				},
				methods:{
					add:function(){
						console.log("add被执行")
						this.conunter++
					},
					sub:function(){
						console.log("sub被执行")
						this.conunter--
					}
				}
			})
		</script>
	</body>

el：他的类型是string 是用来决定vue实例会管理哪一个DOM元素
data：类型是object或者function 是vue实例对应的数据对象
methods：是用来定义属于vue的一些方法,可以在其他地方调用,也可以在指令中使用
在上面这个小案例中用两个button点击使h2中的数字变大或者变小使用v-on：click为按钮绑定单机事件v-on:click=“add” 中的add是在methods中的一个方法定义一个最初值counter = 0 在add方法中使用this.counter++ 那么他在单击后会执行add这个函数注意在methods中使用counter的时候要加this 只有使用this才可以访问到data中的数据对象。

02-插值的操作

01-Mustache语法`

在vue对象挂载的dom元素中，{{}}既可以直接写变量，又可以写简单表达式。因为{{}}像胡须，又叫大括号语法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<div id="app">
			<h2>{{message}}</h2>
			<h2>{{message}},田博文</h2>
			<!-- mustacht语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
			<h2>{{firstname + listname}}</h2>
			<h2>{{firstname + "" + listname }}</h2>
			<h2>{{firstname}} {{listname}}</h2>
			<h2>{{counter * 2}}</h2>
		</div>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					message:"你好啊",
					firstname:'kobe',
					listname : 'bryant',
					counter:100
				}
			})
		</script>
	</body>
</html>

02-v-once指令的使用

v-once指令后面不需要跟任何表达式表示元素和组件只会渲染一次，不会随着数据的改变而改变变为静态数据（非响应式数据）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">{{message}}</div>
		<div id="app" v-once>{{message}}</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！"
				}
			})
		</script>
	</body>
</html>

03-v-html指令的使用

如果从服务器返回一个url地址那么，Mustche语法是不能够正常接收并且使用的这时vue为我们提供了一个指令 v-html指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}}
			<h2>{{url}}</h2>
			<h2 v-html="url"></h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！",
					url:'<a href = "http://www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

4v-per指令的使用

v-pre用于跳过这个元素的编译过程，用于显示原本的Mustache语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{message}}</h2>
			v-pre用于跳过这个元素和他子元素的编译过程，用于显示原本的Mustache语法
			<h2 v-pre>{{message}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！"
				}
			})
		</script>
	</body>
</html>

5.v-click指令的使用

他的作用是来解决页面闪烁的问题
在vue解析之前,div中有一个属性v-cloak
在vue解析之后,div中没有一个属性v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>{{message}}</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			//cloak 斗篷
			//在vue解析之前,div中有一个属性v-cloak
			//在vue解析之后,div中没有一个属性v-cloak
			setTimeout(function(){
				const app = new Vue({
					el:'#app',
					data:{
						message:"你好！"
					}
				})
			},1000)
		</script>
	</body>
</html>

v-bind的基本使用

某些时候我们并不想将变量放在标签内容上，像这样

是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样

引入图片是希望动态获取图片的链接，此时的imgURL不会在变量URL上附加变量，而是链接到网址，如果要更改其性能为变量，需要使用到一个标签v-bind:，像这样，而且这里也不能使用Mustache语法，类似，这也是错误的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 这里不可以使用mustache语法
			正确的做法是使用v-bind指令 -->
			<img v-bind:src="imgurl" >
			<a v-bind:href="ahref">百度一下</a>
			
			<!-- 语法糖的写法 -->
			<img :src="imgurl" >
			<a :href="ahref">百度一下</a>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！",
					imgurl:'https://s.cn.bing.net/th?id=OJ.4RwyvSVUB0aLaQ&w=75&h=75&pid=MSNJVFeeds',
					ahref:"http://www.baidu.com"
				}
			})
		</script>
	</body>
</html>

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

如下我们希望点击按钮来动态改变H2的文字颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <h2 class="active">{{message}}</h2>
			<h2 :class="active">{{message}}</h2> -->
			<h2 v-bind:class="{active:red,line:blue}">{{message}}</h2>
			<!-- <h2 v-bind:class="{类名1:布尔值,类名2:布尔值}">{{message}}</h2> -->
			<button v-on:click="btn">点我</button>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！",
					// active:'active'
					red : true,
					blue:true
				},
				methods:{
					btn:function(){
						this.red = !this.red
					}
				}
			})
		</script>
	</body>
</html>

两个定义变量active状语从句：red，在DOM的元素中使用:class={active:red}，此时绑定的class=‘active’，red为真，活性显示，定义方法的变化（）绑定在按钮上，点击按钮this.red= !this.red，控制的Dom是否元素有class='active’的属性。

v-bind绑定style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- <h2 :style="key[属性名]:value[属性值]">{{message}}</h2> -->
			<!-- <h2 :style="{fontSize:'100px'}">{{message}}</h2> -->
			<h2 :style="get()">{{message}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:"你好！",
					daxiao:'100px',
					yanse:'blue'
				},
				methods:{
					get:function(){
						return {fontSize:this.daxiao,color:this.yanse}
					}
				}
			})
		</script>
	</body>
</html>

作业v-for和v-bind的结合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red{
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-on:click="btn(index)" v-for="(item,index) in move" v-bind:class="{red:changeRed == index}">{{index}}{{item}}</li>
			</ul>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					move:['银河补习班','海王','进击的巨人'],
					changeRed:0
				},
				methods:{
					btn:function(index){
						this.changeRed = index;
					}
				}
			})
		</script>
	</body>
</html>

计算属性

计算属性的基本操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{firstname + "" + lastname}}</h2>
			<h2>{{getfullname()}}</h2>
			<h2>{{fullname}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					firstname:"Lebron",
					lastname:'james'
				},
				computed:{
					fullname:function(){
						return this.firstname + " " + this.lastname
					}
				},
				methods:{
					getfullname(){
						return this.firstname + " " + this.lastname
					}
				}
			})
		</script>
	</body>
</html>

computed 计算属性和methods属性一样但是计算属性有个好处就是在调用的时候不用加小括号

计算属性的复杂操作

现在有一个副本数据书，里面包含许多书对象，数据结构如下：

boosk:[
				{id:110,name:'unix编程',price:119},
				{id:110,name:'深入理解计算机原理',price:120},
				{id:110,name:'呵呵呵',price:121},
				{id:110,name:'嘿嘿嘿',price:123},
    	]

要求计算出这几本书的总价格？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>总价格：{{totalprice}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					boosk:[
						{id:110,name:'unix编程',price:119},
						{id:110,name:'深入理解计算机原理',price:120},
						{id:110,name:'呵呵呵',price:121},
						{id:110,name:'嘿嘿嘿',price:123},
					]
				},
				computed:{
					totalprice:function(){
						let result = 0
						for(let i=0;i<this.boosk.length;i++){
							result += this.boosk[i].id
						}
						return result
					}
				}
			})
		</script>
	</body>
</html>

计算属性的setter和getter属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{fullname}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					firstname:"kobe",
					lasename:'bryant'
				},
				computed:{
					//简写,省略了get方法
					// funllname: function(){
					// 	return this.firstname + '' + this.lasename
					// }
					//计算属性一般没有set方法,只读属性
					fullname:{
						// set:function(newvalue){
						// 	const names = newvalue.split(" ");
						// 	this.firstname = names[0];
						// 	this.lasename = name[1];
						// },
						get:function(){
							return this.firstname + '' + this.lasename
						}
					}
				}
			})
		</script>
	</body>
</html>

计算属性和methods的对比

如果使用methods的话

如果同样的一个效果要执行多次那么它也会跟着你调用的次数增加，如果很多的话，会影响程序的运行速度相反如果使用computed计算属性的话相同的东西他只会调用一次，不会重复调用，会提高代码的性能

<body>
		<div id="app">
			<!-- 直接拼接,语法过于繁琐 -->
			<h2>{{firstname}}{{lasename}}</h2>
			<!-- 通过定义methods   函数调用 -->
			<h2>{{getfullname()}}</h2>
			<!-- 通过computed -->
			<h2>{{funname}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					firstname:"kobe",
					lasename:'bryant'
				},
				methods:{
					getfullname:function(){
						
						return this.firstname + '' + this.lasename
					}
				},
				//把要做一些变化的数据展示到页面的时候  要使用computed属性,因为你改了数据他也只会执行一次,会提高效率
				//而methods属性你调用他几次他就执行几次 会极大的降低运行速度
				computed:{
					funname:function(){
						return this.firstname + '' + this.lasename
					}
				}
			})
		</script>
	</body>