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>