1、創(chuàng)建vue實(shí)例
在vue中介紹了引用方法：https://cn.vuejs.org。此處下載了離線vue.js。
通過script標(biāo)簽引入vue.js，最好再head里引入，避免頁面抖屏。
原生js/jQuery處理節(jié)點(diǎn)的方法(手動處理DOM)：
//通過以下方法獲取root標(biāo)簽，定義到dom變量中
var dom = document.getElementById(“root”)
//在dom里加入內(nèi)容
dom.innerHTML=”hello world”
vue中的創(chuàng)建節(jié)點(diǎn)方法：
在DOM上面聲明，在id=“root”的標(biāo)簽里需要使用msg這個數(shù)據(jù)。然后在創(chuàng)建的vue實(shí)例中定義好msg數(shù)據(jù)，再通過el與dom進(jìn)行綁定，則可實(shí)現(xiàn)dom里msg的顯示。（vue實(shí)例與掛載點(diǎn)的綁定）
特點(diǎn)：在vue編寫時(shí)，不會有dom的操作，著重于數(shù)據(jù)的編寫。由vue來接管dom操作，來替換標(biāo)簽中的占位符。
2、掛載點(diǎn)、模板與實(shí)例
掛載點(diǎn)：
div標(biāo)簽（最外層）：（稱為）vue實(shí)例的掛載點(diǎn)
el（element元素）：與div標(biāo)簽的id對應(yīng)
掛載點(diǎn)作用：vue只會處理掛載點(diǎn)下面的內(nèi)容
一句話描述掛載點(diǎn)：vue實(shí)例中的el屬性對應(yīng)的id所對應(yīng)的dom節(jié)點(diǎn)
模板：
掛載點(diǎn)內(nèi)部的內(nèi)容（既可以寫在掛載點(diǎn)內(nèi)部，也可以寫在vue實(shí)例的template屬性里面。）
在掛載點(diǎn)下面的內(nèi)容，叫做模板內(nèi)容。模板還可以放在vue實(shí)例的template中編寫。
vue會自動結(jié)合模板+數(shù)據(jù)，形成最后在dom里顯示的內(nèi)容，放在掛載點(diǎn)中。
3、vue實(shí)例中的數(shù)據(jù)、事件和方法
{{}} 稱作插值表達(dá)式，意為將定義的數(shù)值插入到標(biāo)簽中
幾種不同的寫法：
v-text=“number” 綁定的是變量
v-html=“number”
v-on 綁定事件
v-on：click=“（）=>{alert（123）}” 綁定點(diǎn)擊事件，綁定箭頭函數(shù)（會報(bào)錯，未定義）：正確寫法：v-on：click=“handleClick”綁定方法 或者 @click...（v-on： 簡寫為 @）
方法定義在實(shí)例中的methods里，定義handleClick：function（）{alert（123）}
實(shí)現(xiàn)：點(diǎn)擊后將頁面中的hello變成world（在methods里面改變實(shí)例數(shù)據(jù)中的content）
使用this.content=“world”（this.content指的是vue實(shí)例下的數(shù)據(jù)content變量，算是一個簡短的別名）
vue的不同：
面向數(shù)據(jù)，而非面向DOM。當(dāng)數(shù)據(jù)改變時(shí)，DOM就改變了
實(shí)例里的數(shù)據(jù)展示、觸發(fā)方法
1、事件觸發(fā)，實(shí)現(xiàn)方法。
2、方法觸發(fā)之后，想讓頁面發(fā)生變化，只需要通過this.content改變vue實(shí)例中的數(shù)據(jù)。vue會監(jiān)聽到實(shí)例中數(shù)據(jù)的改變，從而更新模板，實(shí)現(xiàn)頁面更新。
3、content的寫法：
插值表達(dá)式：{{}}
<div v-text=“content”></div>
<div v-html=“content”></div>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<div id="root">
<div @click="handleClick">{{content}}</div>
</div>
<script>
new Vue({ //創(chuàng)建vue實(shí)例
el:"#root", //掛載點(diǎn)：讓vue實(shí)例接管頁面上id="root"的DOM節(jié)點(diǎn) #指的是id=""的DOM元素
data: {
content: "hello world"
},
methods: {
handleClick: function() {
this.content = "moira"
}
}
})
</script>
</body>
</html>
4、vue中的屬性綁定和雙向數(shù)據(jù)綁定
v-bind： 屬性綁定 （：）
v-on： 事件監(jiān)聽 （@）
v-model 雙向數(shù)據(jù)綁定 （通常在輸入框，動態(tài)綁定實(shí)例中的數(shù)據(jù)）
實(shí)現(xiàn)：
屬性綁定：綁定動態(tài)title
雙向數(shù)據(jù)綁定：一個title 一個輸入框 一個與輸入框數(shù)據(jù)綁定的顯示
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<div id="root">
<div :title="title">Hello World</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({ //創(chuàng)建vue實(shí)例
el:"#root", //掛載點(diǎn)：讓vue實(shí)例接管頁面上id="root"的DOM節(jié)點(diǎn) #指的是id=""的DOM元素
data: {
title: "text",
content: "this is the text"
}
})
</script>
</body>
</html>
5、vue中的計(jì)算屬性和偵聽器
computed：一個屬性由另外屬性數(shù)據(jù)計(jì)算而來（特點(diǎn)：若依賴屬性不變，則會使用緩存值，當(dāng)依賴屬性改變時(shí)才會重新計(jì)算、刷新，故計(jì)算屬性的性能高）
偵聽器：watch（） 監(jiān)聽數(shù)據(jù)變化，若數(shù)據(jù)變化，則可在偵聽器里實(shí)現(xiàn)業(yè)務(wù)邏輯
實(shí)現(xiàn)：
輸入姓、名，自動顯示成姓名。每次改變輸入，累加數(shù)值。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({ //創(chuàng)建vue實(shí)例
el:"#root", //掛載點(diǎn)：讓vue實(shí)例接管頁面上id="root"的DOM節(jié)點(diǎn) #指的是id=""的DOM元素
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName: function() {
this.count ++
}
}
})
</script>
</body>
</html>
6、v-if、v-show與v-for指令
v-for=“item of list” 循環(huán)list列表中的項(xiàng)，放入item中。最后可輸出item。
用v-for時(shí)，必須使用:key=“”（可以提升每一次渲染的效率。注意，每一次循環(huán)的key值不能一樣，可以用item也可以用index，視具體情況來定）
v-for=“(item,index) of list” 循環(huán)list數(shù)據(jù)列表，每一項(xiàng)數(shù)值放入item中，下標(biāo)放到index中
v-if：控制DOM的存在與否
v-show: 控制DOM的顯示與否
v-for：在DOM上循環(huán)顯示數(shù)據(jù)
：key 可以提交循環(huán)效率，每一次循環(huán)都要不同
item 內(nèi)容 index 下標(biāo)
實(shí)現(xiàn)：
一行文本：hello world
一個按鈕：toggle 點(diǎn)擊則更換顯示狀態(tài)
一個列表，顯示實(shí)例中的數(shù)組數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入門</title>
</head>
<body>
<div id="root">
<div v-show="show">{{msg}}</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({ //創(chuàng)建vue實(shí)例
el:"#root", //掛載點(diǎn)：讓vue實(shí)例接管頁面上id="root"的DOM節(jié)點(diǎn) #指的是id=""的DOM元素
data: {
msg: "Hello, World!",
show: true,
list: [1,2,3]
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
