前言
上一篇介紹了Vue的基本概念，這一篇介紹一下Vue的基本使用。
一、搭建一個Vue程序
1.1 搭建Vue環境
搭建Vue的開發環境總共有三種方法：
- 引入CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
- 直接下載源碼引入
從官網中下載vue.js的源碼復制下來即可，然后在頁面中引入
地址：https://cn.vuejs.org/v2/guide/installation.html
點擊開發版本，直接復制到已經創建好的vue.js的文件當中即可。 - NPM安裝
1.2 構建一個Vue實例
1）el（掛載點）
創建一個Vue這個實例去接管頁面中的某個Element（元素）。也就是說el表明和頁面上
哪一個節點做綁定！
2）data
vue實例都有一些數據，我們把數據都存放在data中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue入門</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: '#root',
data: {
msg:'hello world'
}
})
</script>
</body>
</html>
創建一個vue的實例，讓這個vue的實例去接管頁面中id為root的內容，所以這個vue實例
就和id為root的dom做好了綁定。
二、掛載點，模板與實例之間的關系
2.1 掛載點
掛載點是Vue實例中el屬性對應的id所對應的一個dom節點。
這個就是掛載點2.2 模板
在掛載點內部的內容都稱之為模板內容。
<div id="root">
<h1>lance {{msg}}</h1>
</div>
其中：
<h1>lance {{msg}}</h1>
就是模板內容啦！
當然我們可以把模板內容寫在vue實例當中：
<body>
<div id="root"></div>
<script>
new Vue({
el: '#root',
template: '<h1>lance {{msg}}</h1>',
data: {
msg:'hello world'
}
})
</script>
</body>
所以說模板你可以寫在掛載點內部，當然也可以寫在vue實例的template屬性當中。
2.3 實例
其中new Vue({})其實就是創建一個Vue實例。
在實例中你需要指定一個掛載點，把模板寫好。vue會自動的根據你的模板和你的數據
自動生成要展示的內容。會把要展示的內容放到掛載點當中。
三、Vue中的計算屬性、偵聽器、計算屬性的set與get##
3.1 Vue中的計算屬性
1）前言
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{firstName}}{{lastName}}</div>
</div>
<script>
new Vue({
el: '#root',
data:{
firstName: '',
lastName: ''
}
})
</script>
效果：
問題：
<div>{{firstName}}{{lastName}}</div>這個很冗余。
2）常用場景
fullName是通過firstName和lastName計算而成的一個新的變量。
我們可以通過Vue的計算屬性來解決我們的需求，在Vue實例中添加一個computed屬性。
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: ''
},
computed: {
//什么時候執行：初始化顯示/相關data屬性數據發生改變
fullName: function(){
//計算屬性的一個方法，方法的返回值作為屬性值
return this.firstName+' '+this.lastName;
}
}
})
</script>
fullName是一個計算屬性，定義在computed里面表示它是一個計算屬性。
它是由firstName和lastName計算出來的。
計算屬性只有當里面參與計算的屬性各任意一個改變的時候才會去計算，否則使用上
此次計算的緩存。
3.2 偵聽器
1）需求
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<hr />
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
}
})
</script>
效果：
2）實現
首先在vue實例中定義一個偵聽器：watch。
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<hr />
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
firstName: function(){
this.count++
},
lastName: function(){
this.count++
}
}
})
</script>
效果：
其實監聽器的作用是，監聽某個數據的變化，一旦這個數據發生變化我就可以在監聽器中
做相應的業務處理。
當然在上面的例子中我們可以直接監聽fullName就可以了。
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
/* firstName: function(){
this.count++
},
lastName: function(){
this.count++
}*/
fullName: function(){
this.count++
}
}
})
</script>
3.3 計算屬性的set與get
1）實例
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
姓名1(單向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(單向): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
姓名3(雙向): <input type="text" placeholder="Full Name3" /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', //如果不定義的話，會造成vm.$watch的()方法會延遲一步
},
computed: {
//什么時候執行：初始化顯示/相關的data屬性發生變化
fullName1 (){//計算屬性中的一個方法，方法的返回值作為屬性值
console.log("111111111111111")
return this.firstName +' '+this.lastName;
}
},
watch: { //配置監視
firstName: function (value) { //監聽firstName的變化
console.log(this) //就是vue的實例：vm
this.fullName2 = value +' '+this.lastName;
}
}
});
//所有vm的實例方法都是以$開頭的。 注意：在function中可以最多可以傳兩個值一個是新的，一個是舊的。
vm.$watch('lastName',function (value) {
//更新 fullName2
this.fullName2 = this.firtName +' '+ value;
})
</script>
</body>
效果：
分析：
我們修改都是基於單向的，也就是我們只是修改姓、名這兩個文本框，
但是我們修改下面兩個文本框是不能實現同步的，那要怎么樣實現呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性和監聽</title>
</head>
<!--
1.計算屬性
在computed屬性對象中定義計算屬性的方法
在頁面中使用{{方法名}}來顯示結果
2.監視屬性
通過vm對象的$watch(或)watch配置來監視制定的屬性。
當屬性變化時，回調函數自動調用，在函數內部進行計算。
3.計算屬性高級
通過getter/setter實現對屬性屬性的顯示和監視
計算屬性存在緩存，多次讀取只執行一次getter計算。
-->
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
姓名1(單向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(單向): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
姓名3(雙向): <input type="text" placeholder="Full Name3" v-model="fullName3" /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', //如果不定義的話，會造成vm.$watch的()方法會延遲一步
},
computed: {
//什么時候執行：初始化顯示/相關的data屬性發生變化
fullName1 (){//計算屬性中的一個方法，方法的返回值作為屬性值
console.log("111111111111111")
return this.firstName +' '+this.lastName;
},
fullName3 :{
//什么是回調函數？ 1.你定義的 2.你沒有調用 3.但最終它執行了
//回調函數你要知道：什么時候調用？用來做什么？
// 回調函數 當需要讀取當前屬性值時回調，根據相關的數據計算病返回當前屬性的值
get(){
return this.firstName +' '+this.lastName;
},
//回調函數，監視當前屬性值的變化，當屬性值發生改變時回調，更新的屬性數據。
set(value){//value就是fullName3的最新屬性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: { //配置監視
firstName: function (value) { //監聽firstName的變化
console.log(this) //就是vue的實例：vm
this.fullName2 = value +' '+this.lastName;
}
}
})
//所有vm的實例方法都是以$開頭的。 注意：在function中可以最多可以傳兩個值一個是新的，一個是舊的。
vm.$watch('lastName',function (value) {
//更新 fullName2
this.fullName2 = this.firstName +' '+ value;
})
</script>
</body>
</html>
注意：計算屬性存在緩存，多次讀取只執行一次getter計算。
四、Vue強制綁定class和style
在應用界面中，當我們去點擊某個按鈕或者其他操作的時候，某個（些）元素的樣式是變化的。
class/style綁定就是專門用來實現動態樣式效果的技術。
4.1 class綁定
語法： :class='xxx'
- xxx是字符串
- xxx是對象
- xxx是數組
4.2 style綁定
:style = "{color: activeColor,fontsize: fontsize + 'px'}"
其中acticeColor/fontsize是data屬性
4.3 完整實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue強制綁定class和style</title>
<script src="js/vue.js"></script>
<style>
.aClass {
color: red;
}
.bClass {
color: blue;
}
.cClass {
font-size: 40px;
}
</style>
</head>
<!--
1.理解
在應用界面中，某個（些）元素的樣式是變化的
class/style綁定就是專門用來實現動態樣式效果的技術
2.class綁定： :class='xxx'
xxx是字符串
xxx是對象
xxx是數組
3.style綁定
:style = "{color: activeColor,fontsize: fontsize + 'px'}"
其中acticeColor/fontsize是data屬性
-->
<body>
<div id="app">
<h3>1.class綁定： :class= 'xxxx'</h3>
<p class="cClass" :class="a">xxx是字符串</p> //會有 兩個類名
<button @click='update'>點擊一下字符串</button>
<hr/> //對象中屬性值是css的類名，屬性值是布爾類型,true代表類名留下。
<p :class="{aClass : isA,bClass : isB}">xxx是對象</p> //只會顯示為 true的類名
<button @click='updateObj'>點擊一下對象</button>
<hr />
<p :class="['bClass','cClass']">xxx是數組</p>
<h3>2. style綁定</h3>
<p :style="{color: activeColor,fontsize: fontsize + 'px'}">style綁定</p> //style綁定的是對象
<button @click='updateStyle'>style綁定</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'green',
fontsize: '20'
},
methods: {
update() {
this.a = 'bClass';
},
updateObj() {
this.isA = false;
this.isB = true;
},
updateStyle() {
this.activeColor = 'red';
this.fontsize = 30;
}
}
})
</script>
</body>
</html>