vue--学习（二）

一、Vue的性能为什么好

vue的性能非常好，是借助于它的虚拟dom和diff算法来实现的。

如果使用原生的js，那么修改页面元素时需要修改dom树上的节点，这样的性能是不会特别好。vue提出了虚拟dom的概念，虚拟一个dom树上的节点，在页面上用虚拟的dom通过diff算法进行修改，而不是改dom树上的节点，直到有需要时才会更新dom树，这样的性能会更好。所谓的diff算法就是在原dom节点上使用差额的比较，生成新的dom，性能更好。

二、计算属性

在一些应用场景下，不需要每次通过获取最新的数据，而只需要获取某个时间节点上不经常变化的数据，那么就可以使用计算属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>调用当前时间的方法：{{currentTime1}}</p>
			<p>当前时间的计算属性：{{currentTime2}}</p>
		</div>
	</body>
	<!--引入外部的vue.js文件，页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象，提供数据-->
	<script>
		var vm = new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{   
				
			},
			methods:{
				currentTime1:function(){
					return Date.now();//返回当前的时间
				}
			},
			computed:{ //计算属性
				currentTime2:function(){
					return Date.now();
				}
			}
		})
	</script>
</html>

在通过浏览器的控制台调用currentTime1()时，每次都是通过计算生成一个新的值。

但是通过浏览器控制台调用currentTime2计算属性时，只会获取页面打开时缓存的那一个值，而且每次都是一样的。这样的话性能比currentTime1()强很多。如果我们需要使用一些不经常变化，或某个时间节点相对固定的值，而不需要每次获取最新的值，比如财务统计的当前的开销值。那么就可以使用计算属性来提高效率。

三、watch的用法

可以在vue中设置watch来监听某个属性值的变化，一旦被监听的属性发生变化，方法被调用，方法中能获取新的值和老的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>watch</title>
	</head>
	<body>
		<div id="app">
			<p>调用当前时间的方法：{{currentTime1()}}</p>
			<p>当前时间的计算属性：{{currentTime2}}</p>
			<button type="button" v-on:click="increase()">add</button>
		</div>
	</body>
	<!--引入外部的vue.js文件，页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象，提供数据-->
	<script>
		var vm = new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{   
				count:0
			},
			methods:{
				currentTime1:function(){
					return Date.now();//返回当前的时间
				},
				increase(){
					this.count++;
				}
			},
			computed:{ //计算属性
				currentTime2:function(){
					return Date.now();
				}
			},
			watch:{//watch监听count
				count:function(newValue,oldValue){
					console.log("new:"+newValue+",old:"+oldValue);
				}
			}
		})
	</script>
</html>

四、vue改变样式

1.通过class来绑定样式

<head>
		<meta charset="UTF-8">
		<title>下午</title>
		<style>
			.demo{
				width:100px;
				height:100px;
				background-color:gray;
				display:inline-block;
				margin:10px;
			}
			.red{background-color: red;}
			.green{background-color: green;}
			.blue{background-color: blue;}
			
		</style>
	</head>
	<body>
		<div id="app">
			{{attachRed}}
			<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}"></div>
			<div class="demo"></div>
			<div class="demo"></div>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					attachRed:false
				}
			});
		</script>
	</body>

vue通过给html标签的class属性绑定样式：

v-bind:class="{red:attachRed}"

如果attachRed是true那就表示绑定成功，否则就不会绑定

2.加入计算属性

<head>
		<meta charset="UTF-8">
		<title>下午</title>
		<style>
			.demo{
				width:100px;
				height:100px;
				background-color:gray;
				display:inline-block;
				margin:10px;
			}
			.red{background-color: red;}
			.green{background-color: green;}
			.blue{background-color: blue;}
  </style>
</head>
<body>
	<div id="app">
		{{attachRed}}
		<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}">				</div>
		<div class="demo" :class="divClasses"></div>
		<div class="demo"></div>
	</div>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				attachRed:false
			},
			computed:{
				divClasses:function(){
					return {//返回一个json对象
						red:this.attachRed,
						blue:!this.attachRed
					}
				}
			}
		});
	</script>
</body>

注意：

:class="divClasses"计算属性里面return的一个json对象，相当于在页面上展示的是：

<div class="demo" :class="{red:attachRed,blue:!attachRed}"></div>

所以，attachRed改变，这个div也会跟着变。

3.使用style属性

<head>
		<meta charset="UTF-8">
		<title>下午</title>
		<style>
			.demo{
				width:100px;
				height:100px;
				background-color:gray;
				display:inline-block;
				margin:10px;
			}
			.red{background-color: red;color: white;}
			.green{background-color: green;}
			.blue{background-color: blue;}
			
		</style>
	</head>
	<body>
		<div id="app">
			{{attachRed}}
			<input type="text" v-model="width"/>
			<input type="text" v-model="color"/>
			<div class="demo" @click="attachRed=!attachRed" v-bind:class="{red:attachRed}">点击</div>
			<div class="demo" :class="divClasses"></div>
			<div class="demo" :class="color"></div>
			<div class="demo" :class="[color,{red:attachRed}]">hahaha</div>
			<!-- <div class="demo" :style="{backgroundColor:color}"/> -->
			<div class="demo" :style="[myStyle,{height:width*2+'px'}]"></div>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					attachRed:false,
					color:"red",
					width:100
				},
				methods:{
					
				},
				computed:{
					divClasses:function(){
						return {//返回一个json对象
							red:this.attachRed,
							blue:!this.attachRed
						}
					},
					myStyle:function(){
						return {
							backgroundColor:this.color,
							width:this.width+"px"
						}
					}
				}
			});
		</script>
	</body>

在style属性中通过计算属性、数组设置多个属性的方式是多样式的设置。

五、vue中的分支语句

v-if
v-else
v-else-if
v-show： v-show是把dom元素的样式变成display：none或者block。这样的性能比v-if直接摘除dom元素要好很多。

<head>
		<meta charset="UTF-8">
		<title>分支语句</title>
		
	</head>
	<body>
		<div id="app">
			<div v-if="temp">
				今天周三，昨天去打了一场球，体力很强，差点扣了个篮。
			</div>
			<div v-else-if="temp1">
				今天周四，昨天去打了一场球，体力很强，差点扣了个篮。
			</div>
			<div v-if="show">
				周六要补课，开心！！！
			</div>
			---v-show---
			<div v-show="show">
				周六要补课，开心！！！
			</div>
			<button type="button" v-on:click="show=!show">点我点我</button>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					temp:true,
					temp1:true,
					show:true
				},
				methods:{
					
				},
				computed:{
					
				},
				watch:{
					
				}
			});
		</script>
	</body>

六、vue中的循环语句

通过v-for关键字来实现

<head>
		<meta charset="UTF-8">
		<title>循环语句</title>
		
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="n in args">  //获取args中的每一个元素并打印
					{{n}}
				</li>
			</ul>
            --------
			<ul>
				<li v-for="(n,i) in args" :key="i"> //i是数组元素的下标
					{{i}}=={{n}}
				</li>
			</ul>
			--------
			<ul v-for="stu in stus">
				<li v-for="(v,k,i) in stu">
					{{i}}--{{k}}--{{v}}   //i下标 k键 v值
				</li>
			</ul>
			<ul>
				<li v-for="n in 10"><a href="#">{{n}}</a></li> //1-10的数值
			</ul>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					args:["a","b","c","d"],
					student:{
						name:"zhangsan",
						age:20
					},
					stus:[
						{
							name:"zhangsan",
							age:20
						},
						{
							name:"lisi",
							age:21
						}
					]
				},
				methods:{
					
				},
				computed:{
					
				},
				watch:{
					
				}
			});
		</script>
	</body>

七、vue对象

1.对象的调用

在多个vue对象中，可以通过“.”方式来调用到对象的属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{title}}
		</div>
		
		<div id="app2">
			<button type="button" @click="changeTitle()">点我</button>
		</div>
	</body>
	
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		var v1 = new Vue({
			el:"#app",
			data:{
				title:"my title"
			}
		})
		var v2 = new Vue({
			el:"#app2",
			data:{},
			methods:{
				changeTitle:function(){
					v1.title = "change title"; //调用另一个对象的属性
				}
			}
		})
	</script>
</html>

2.对象的实例属性和实例方法

所谓的实例属性，通过v1.title和v1.show()调用的是对象的data里的属性和methods里的方法。但是vue对象里的el、data等等也是可以被调用到的，那就通过实例属性和方法的调用：

v1.$data
v1.$el
v1.$mount("#app3") //实现使用实例方法来动态绑定html中的元素
this.$refs.mybtn1 //调用一个标签里ref值是mybtn1的标签，在vue里使用ref会比id更多。
    // <button ref="mybtn1" id="btn" @click="btnclick">show</button>

vue对象动态绑定页面中的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实例属性</title>
	</head>
	<body>
		<div id="app">
			{{title}}
		</div>
		
		<div id="app2">
			<button type="button" @click="changeTitle()">点我</button>
		</div>
		<div id="app3">
			
		</div>
	</body>
	
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		var v1 = new Vue({
			el:"#app",
			data:{ //这里存放的是vue对象的普通属性。
				title:"my title"
			},
			methods:{
				show(){
					alert("hello vue");
				}
			}
		})
		
		var v3 = new Vue({
			template:"<h1>hello mount</h1>"
		})
		
		var v2 = new Vue({
			el:"#app2",
			data:{},
			methods:{
				changeTitle:function(){
					v3.$mount("#app3");//把v3绑定在div app3上
				}
			}
		})
		
	</script>
</html>

八、vue组件化

Vue的思想：万事万物皆组件。Vue组件设计好可以被复用。

要想使用组件，先得注册组件

1.组件的全局注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的全局注册</title>
	</head>
	<body>
		<div id="app">
			<mytitle></mytitle>
			<mytitle></mytitle>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		//组件的全局注册/本地（局部）注册
		Vue.component("mytitle",{
			data:function(){ //data 和原来的vue对象不一样，必须通过function+return的方式填充数据
				return {
					title:"hello component"
				}
			},
			methods:{
				show(){
					alert("hello!");
				}
			},
			//template是展示在前端页面上的内容。template里的内容必须有且只能有一个根标签
			template:"<div><h1>{{title}}</h1><button type='button' @click='show()'>dianwo</button></div>"
		})
		
		new Vue({
			el:"#app"
		})
	</script>
</html>

2.组件的本地注册

在vue对象内部注册组件，该组件只能被该vue对象绑定的div来使用，其他div不行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app1">
			<mytitle></mytitle>
		</div>
		<div id="app2">
			<mytitle></mytitle>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<script>
		new Vue({
			el:"#app1",
			//组件的本地注册
			components:{
				"mytitle":{
					data:function(){
						return {
							title:"hello"
						}
					},
					template:"<div>{{title}}</div>"
				}
			}
		})
	</script>
</html>

3.生命周期钩子函数

一个vue对象的生命周期中，不同的阶段会调用不同的生命周期钩子函数。

<html>
	<head>
		<meta charset="UTF-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app1">
			{{title}}
			<button type="button" @click="changeTitle">change title</button>
			<button type="button" @click="destroy">destroy</button>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		new Vue({
			el:"#app1",
			data:{
				title:"this is title"
			},
			methods:{
				changeTitle:function(){
					this.title= "new title";
				},
				destroy:function(){
					this.$destroy();
				}
			},
			beforeCreate(){
				console.log("beforeCreate")
			},
			created(){
				console.log("created")
			},
			beforeMount(){
				console.log("beforeMount")
			},
			mounted(){
				//向后端发送请求
				console.log("mounted")
			},
			beforeUpdate(){
				console.log("beforeUpdate")
			},
			updated(){
				console.log("updated")
			},
			beforeDestroy(){
				console.log("beforeDestory")
			},
			destroyed(){
				console.log("destory")
			}
		})
	</script>
</html>

九、使用vue脚手架来安装vue项目

1.安装node.js

https://nodejs.org/en/download/

2.安装vue-cli

在cmd中执行：

npm install vue-cli -g

3.使用vue-cli拉官方拉取一个项目模版

就好比是用maven勾选一个已存在的项目骨架创建一个webapp项目

创建好项目文件夹
在项目文件夹的地址栏中输入cmd，在cmd中使用如下命令，从vue-cli拉取官方的webpack-simple项目骨架

vue init webpack-simple 项目名称

做一些简单配置

4.运行骨架项目

安装淘宝npm镜像：cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

进入到项目文件夹内容部：myproject
执行cnpm install 安装依赖
执行 npm run dev 启动项目

5.项目结构

main.js 程序入口

App.vue

十、使用组件来创建项目

接下来要创建出这样的页面效果。

1.创建出Header、Content、Bottom三个组件并提供内容

2.在main.js中对组件进行全局注册

import Vue from 'vue'
import App from './App.vue'
import Header from "./components/header.vue";
import Content from "./components/content.vue";
import Bottom from "./components/bottom.vue";

Vue.component("Header",Header);
Vue.component("Content",Content);
Vue.component("Bottom",Bottom);

new Vue({
  el: '#app',
  render: h => h(App)
})

3.在App.vue中使用组件

<template>
  <div id="app">
    <Header></Header>
    <Content></Content>
    <Bottom></Bottom>
  </div>
</template>

<script>

export default {
  name: 'app',
  data :function() {
    return {

    }
  }
}
</script>

<style>
</style>

注意：也可以在app.vue中使用本地注册的方式,如下：

app.vue

<template>
  <div id="app">
		<Header></Header>
		<Content></Content>
		<Bottom></Bottom>
  </div>
</template>

<script>
	import Header from "./components/header.vue";
	import Content from "./components/content.vue";
	import Bottom from "./components/bottom.vue";
	
export default {
  name: 'app',
  data () {
    return {
      
    }
  },
  components:{
  	Header,Content,Bottom
  }
}
</script>

<style>

</style>

posted @ 2021-07-21 18:36 牛奶配苦瓜阅读(43) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

牛奶配苦瓜