3-1 Vue實(shí)例
vue實(shí)例是根實(shí)例系宜，組件也是vue實(shí)例运敢，所以說頁面是由很多vue實(shí)例組成的
data()： 以
destroy()：用于銷毀vue實(shí)例蠕蚜，但是之前的數(shù)據(jù)和方法并沒有被銷毀
var app = new Vue({
el:'#root',
data:{
message:'hello world'
},
methods: {
handleClick(){},
},
watch:{
},
computed:{
}
})
3-2 Vue實(shí)例生命周期
//生命周期函數(shù)就是vue實(shí)例在某個(gè)時(shí)間點(diǎn)自動執(zhí)行的函數(shù)
var app = new Vue({
el:'#root',
data:{
inputValue:''
},
beforeCreate: function () {
console.log('beforeCreate');
},
created: function () {
console.log('created');
},
beforeMount: function () {
console.log(this.$el);
console.log('beforeMount');
},
mounted: function () {
console.log(this.$el);
console.log('mounted');
},
beforeDestroy: function () {
//app.$destroy()
console.log('beforeDestroy');
},
destroyed: function () {
console.log('destroyed');
},
beforeUpdate: function () {
//app.$data.inputValue = 1
console.log('beforeUpdate')
},
updated: function () {
console.log('updated')
}
})
3-3 Vue的模版語法
插值表達(dá)式{{}} ： 用{{輸入的值}}
v-指令 寫的是js表達(dá)式
v-text 就是innertext 其實(shí)就是 {{}}
v-html 就是innerhtml
v-指令 后面除了可以寫js名稱還可以加字符串捻撑，插值表達(dá)式也可以寫字符串
var app = new Vue({
el: '#root',
data: {
name: 'hello',
bigName: '<h1>hello</h1>'
}
})
{{name + ' world'}}
<div v-text="name + ' world' "></div>
<div v-html="name + ' world' "></div>
ps:v-html 會對bigName進(jìn)行轉(zhuǎn)義取具，字體變成h1字體大小其掂，而不會出現(xiàn)標(biāo)簽
3-4 計(jì)算屬性油挥、方法與偵聽器
計(jì)算屬性
computed屬性，因?yàn)樗菍傩钥畎荆栽谟貌逯当磉_(dá)式取值的時(shí)候不用加括號
computed：內(nèi)置變量緩存的功能深寥，當(dāng)data里面age變量更改時(shí)，如果不是計(jì)算屬性內(nèi)邊的變量更改贤牛，那么他就不會渲染computed內(nèi)部的變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
{{fullName}}
</div>
<script>
var app = new Vue({
el: '#root',
data: {
firstName: 'sunny',
lastName: 'fan',
age: 28
},
//計(jì)算屬性:內(nèi)置緩存（firstName惋鹅、lastName）
computed: {
fullName: function () {
console.log('計(jì)算了一次');
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
methods方法
因?yàn)槭欠椒ǎ圆逯当磉_(dá)式要用括號取值殉簸，
他不具有緩存變量的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
{{fullName()}}
</div>
<script>
var app = new Vue({
el: '#root',
data: {
firstName: 'sunny',
lastName: 'fan'
},
methods: {
fullName: function () {
console.log("計(jì)算了一次")
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
偵聽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偵聽器</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
{{fullName}} {{age}}
</div>
<script>
var app = new Vue({
el: '#root',
data: {
firstName: 'sunny',
lastName: 'fan',
fullName: 'sunny fan',
age: 28
},
watch: {
firstName: function () {
console.log('計(jì)算了一次');
this.fullName = this.firstName + " " + this.lastName
},
lastName: function () {
console.log('計(jì)算了一次');
this.fullName = this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
總結(jié)：我們可以通過methods闰集、computed、watch來實(shí)現(xiàn)fullName顯示的問題
computed和watch都具備緩存的功能
但是從代碼量的編寫程度來看般卑，computed屬性會更加方便和便捷一些武鲁。
3-5 計(jì)算屬性的getter和setter
computed屬性當(dāng)中有兩個(gè)方法，分別是：get 和 set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getter和setter</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<body>
<div id="root">
{{fullName}} {{age}}
</div>
<script>
var app = new Vue({
el: '#root',
data: {
firstName: 'sunny',
lastName: 'fan',
age: 28
},
computed: {
fullName: {
get: function () {
return this.firstName + " " + this.lastName
},
set: function (value) {
console.log(value);
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
</body>
</html>
3-6 Vue中的樣式綁定
class的對象綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class的對象綁定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<body>
<div id="root">
<div @click="handleChangeColor" :class="{activated:isActivated}">
hello world
</div>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
isActivated: false
},
methods: {
handleChangeColor: function () {
this.isActivated = !this.isActivated
}
}
})
</script>
</body>
</body>
</html>
class的數(shù)組綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class的數(shù)組綁定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.activated-one {
font-size: 20px;
}
.activated {
color: red;
}
</style>
</head>
<body>
<div id="root">
<div @click="handleChangeColor" :class="[activated,activatedOne]">hello world</div>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
activated: '',
activatedOne: 'activated-one'
},
methods: {
handleChangeColor: function () {
this.activated = this.activated === 'activated' ? "" : "activated"
}
}
})
</script>
</body>
</html>
style對象綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style對象綁定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<div @click="handleChangeColor" :style="styleObj">hello world</div>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
styleObj: {
color: 'black'
}
},
methods: {
handleChangeColor: function () {
this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
}
}
})
</script>
</body>
</html>
style的數(shù)組綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style數(shù)組綁定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<div @click="handleChangeColor" :style="[styleObj,{fontSize:'30px'},styleOne]">hello world</div>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
styleObj: {
color: 'black'
},
styleOne: {
fontWeight: 'bold'
}
},
methods: {
handleChangeColor: function () {
this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
}
}
})
</script>
</body>
</html>
3-7 條件渲染
v-if 蝠检、v-else-if沐鼠、v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V-if</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<h5>實(shí)例一:v-if</h5>
<template v-if="isShow">
hello world
</template>
<button @click="handleChange">{{toggleText}}</button>
<hr>
<h5>實(shí)例二:v-else</h5>
<div v-if="isShowTwo">
要是我顯示
</div>
<div v-else>
要么你顯示
</div>
<button @click="handleChangeRole">切換顯示</button>
<hr>
<h5>實(shí)例三:v-else-if</h5>
<div v-if="status==='A'">
A
</div>
<div v-else-if="status==='B'">
B
</div>
<div v-else-if="status==='C'">
C
</div>
<div v-else>
其他
</div>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
isShow: false,
toggleText: '顯示',
isShowTwo: true,
status: 'A'
},
methods: {
handleChange: function () {
this.isShow = !this.isShow;
this.toggleText = this.toggleText === '顯示' ? '隱藏' : '顯示'
},
handleChangeRole: function () {
this.isShowTwo = !this.isShowTwo;
}
}
})
</script>
</body>
</html>
用 key 管理可復(fù)用的元素
當(dāng)切換兩個(gè)input輸入框的時(shí)候，為了不然input框的輸入內(nèi)容被占用叹谁，所以我們通過設(shè)置input的key值來解決這個(gè)問題
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="userName-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-show
v-show很相似迟杂，只要設(shè)置值為true則顯示
v-if和v-show的區(qū)別
- v-show不能和v-else 和 v-else-if結(jié)合使用
- v-show 不管是ture還是fasle div元素都會渲染出來（false style的display:none）,如果如果有頻繁的切換，我們會首選v-show,減少對dom的頻繁操作
3-8 Vue列表渲染
v-for
<li v-for="(item,index) in list" :key="index">{{index}}--{{item}}</li>
<li v-for="(item,key,index) of userInfo" :key="index">{{key}}-{{item}}-{{index}}</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<ul>
<li v-for="(item,index) in list" :key="index">{{index}}--{{item}}</li>
</ul>
<ul>
<li v-for="(item,key,index) of userInfo" :key="index">{{key}}-{{item}}-{{index}}-</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
list: [
'hello',
'world'
],
userInfo: {
name: 'sunny',
age: 29
}
}
})
</script>
</body>
</html>
template可以當(dāng)一個(gè)空標(biāo)簽做為for循環(huán)渲染本慕，而這個(gè)template不會渲染到dom里面
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
為了防止子組件循環(huán)渲染出現(xiàn)dom結(jié)構(gòu)不對的情況，我們一般會通過is來給子組件命名
//html
<table>
<tbody>
<tr is="row" v-for="item in list" :title="item"></tr> //這個(gè)地方調(diào)用is屬性
</tbody>
</table>
//js
Vue.component('row', {
props: ['title'],
template: '<tr><td>{{title}}</td></tr>'
});
var app = new Vue({
el: '#root',
data: {
list: [
'hello',
'world'
]
}
})
更改數(shù)組值方法有哪些侧漓？
1.變異方法
push()锅尘、 pop()、 shift()、unshift()藤违、splice()浪腐、sort()、reverse()
2.替換數(shù)組
當(dāng)也可以創(chuàng)建一個(gè)新的數(shù)組顿乒，在通過
filter()议街、concat()、slice()
更改原始數(shù)組的值璧榄，再把更改后的數(shù)組替換舊的數(shù)組
3.set或者$set方法
Vue.set(app.userInfo,'age',22)
//或者
vm.$set(app.userInfo,'age',22)
4.Object.assign()或者_(dá).extend()
vm.userInfo = Object.assign({},vm.userInfo,{
sex:'男',
email:'fx35792@163.com'
})
ps:不可以通過數(shù)組下標(biāo)去更改數(shù)組的值
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的
3-9 Vue事件處理
監(jiān)聽事件特漩、方法處理、內(nèi)聯(lián)處理器中的方法
1.監(jiān)聽事件
通過v-on指令監(jiān)聽DOM事件骨杂，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>監(jiān)聽事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<button v-on:click="counter+=1">add 1</button>
<p>The button above has been clicked {{counter}} times.</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#root',
data: {
counter: 0
}
})
</script>
</body>
</html>
2.事件處理方法
但是在開發(fā)的過程中涂身，有時(shí)候直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個(gè)需要調(diào)用的方法名稱
<div id="root">
<button v-on:click="greet">greet</button>
</div>
<script>
const app = new Vue({
el: '#root',
data: {
name: 'sunny'
},
methods: {
greet: function (event) {
console.log(`hello ${this.name}`)
if (event) {
console.log(event.target.tagName)
}
}
}
})
</script>
3.內(nèi)聯(lián)處理器中的方法
除了直接綁定到一個(gè)方法搓蚪，也可以在內(nèi)聯(lián) JavaScript 語句中調(diào)用方法：
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('hello')">say hello</button>
const app = new Vue({
el: '#root',
data: {
name: 'sunny'
},
methods: {
say: function (val) {
console.log(`${this.name} ${val}`)
}
}
})
方法總通過傳遞參數(shù)$event蛤售，可以原始的DOM
<button v-on:click="warning('please input number',$event)">warning</button>
const app = new Vue({
el: '#root',
data: {},
methods: {
warning: function (val, event) {
if (event) event.preventDefault();
console.log(val)
}
}
})
4.事件修飾符
我們在開發(fā)個(gè)過程中經(jīng)常調(diào)用一些
event.preventDefault() //阻止事件的默認(rèn)行為
event.stopPropagation() //阻止冒泡的行為
而vue為了更好的讓我們關(guān)注業(yè)務(wù)邏輯代碼的編寫，它封裝了很多v-on修飾符來幫助我們完成上面那些工作妒潭。
-
stop//event.stopPropagation() -
prevent//event.preventDefault() captureselfoncepassive
更多
上一篇：第2章 Vue起步
下一篇：第4章 深入理解Vue組件
全篇文章：Vue學(xué)習(xí)總結(jié)
所有章節(jié)目錄：Vue學(xué)習(xí)目錄
