通過(guò)三天對(duì)vue的學(xué)習(xí)，上手一個(gè)簡(jiǎn)單項(xiàng)目來(lái)加深理解。
安裝vue
方案一：<script>標(biāo)簽直接引入
- 你可以使用cdn直接引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
- 也可以通過(guò)官網(wǎng)下載vue.js文件
- 開發(fā)者版本（包含完整的警告和調(diào)試模式）：https://vuejs.org/js/vue.js
- 生產(chǎn)版本（刪除了警告）：https://vuejs.org/js/vue.min.js
- 新手應(yīng)該使用開發(fā)者版本因?yàn)榘暾木婧蛨?bào)錯(cuò)信息
方案二：使用vue-cli快速搭建項(xiàng)目
安裝vue-cli
確保電腦已經(jīng)安裝有g(shù)it和node
- 打開命令行，安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 安裝完成后可以檢驗(yàn)一下是否安裝完成
vue --version
- 在目標(biāo)文件夾下，創(chuàng)建一個(gè)vue項(xiàng)目
npm install -g @vue/cli-init
# 在這因?yàn)槭褂玫氖?.x版本，因此使用init功能創(chuàng)建。3.0版本方法可參考官網(wǎng)
vue init webpack my-project
需要補(bǔ)充的基礎(chǔ)知識(shí)
創(chuàng)建實(shí)例
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>todolist</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({ //我們主要通過(guò)new字符來(lái)創(chuàng)建一個(gè)Vue實(shí)例，在這里我們把新創(chuàng)建的實(shí)例放在對(duì)象vm上
el："#app",//el是element的簡(jiǎn)寫，代表創(chuàng)建的實(shí)例需要掛載于id為app的dom元素下
data: { //data屬性用于儲(chǔ)存
content:"Jack",
},
methods: { //方法寫在這里面
handleClick: function() {
alert("Jack")
}
}
})
</script>
</body>
</html>
數(shù)據(jù)
在data屬性中的數(shù)據(jù)怎么樣調(diào)用顯示呢？
可以直接在掛在的dom元素中添加{{變量名}}（差值表達(dá)式）獲取數(shù)據(jù)值。
<div id="app">{{content}}</div>
我們還可以通過(guò)v-html和v-text指令的方法來(lái)實(shí)現(xiàn)
<div id="app" v-text="content"></div>
<div id="app" v-text="content"></div>
在這里，這兩個(gè)指令在頁(yè)面顯示的內(nèi)容都是完全一樣的。但是他們有區(qū)別的。
如果我們將content的內(nèi)容修改一下，
content:"<h1>Jack<h1>"
我們會(huì)看到，v-text顯示的內(nèi)容為第一行。v-html的內(nèi)容為第二行。v-html并不會(huì)轉(zhuǎn)譯數(shù)據(jù)的內(nèi)容，但是v-text能將標(biāo)簽的內(nèi)容轉(zhuǎn)譯并顯示出來(lái)。使用差值表達(dá)式和v-text效果一樣。
<h1>Jack<h1>
Jack//以h1標(biāo)簽的格式顯示
值得補(bǔ)充的是三種模板語(yǔ)法“ ”或{{ }}中可按JavaScript語(yǔ)法書寫。
事件和方法
- v-on：綁定事件（可簡(jiǎn)寫為@ 例如：@click）
<div id="app" v-on:click="handleClick">{{content}}</div>
methods: { //寫在vue實(shí)例當(dāng)中，完整代碼可參考上面第一段代碼
handleClick: function() {
alert("Jack")
}
}
屬性綁定和雙向綁定
- 屬性綁定v-bind：
例如我們需要為標(biāo)簽綁定一個(gè)叫做item屬性的，屬性值為“hello world”
那么我們應(yīng)該寫為
<div v-bind:item="hello world">{{content}}</div>
//或者簡(jiǎn)寫為
<div :item="hello world">{{content}}</div>
- 雙向綁定v-model：
所謂雙向綁定就是既可以通過(guò)數(shù)據(jù)改變顯示值，也可以通過(guò)輸入改變輸入值來(lái)改變數(shù)據(jù)值，可以實(shí)現(xiàn)雙向數(shù)據(jù)改變。這個(gè)也是實(shí)現(xiàn)todolist項(xiàng)目很重要的一點(diǎn)。
雙向綁定看文字解釋的話，可能有點(diǎn)暈。那就將下邊的代碼加入掛載的標(biāo)簽下，看看頁(yè)面有什么效果（試著改變一下輸入框的內(nèi)容）
<input v-model="content"/>
<h1>{{content}}<h1>
v-for指令
我們用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。
這樣我們就可以通過(guò)改變數(shù)組數(shù)據(jù)來(lái)改變列表個(gè)數(shù)和內(nèi)容了，這是實(shí)現(xiàn)todolist列表項(xiàng)的關(guān)鍵。
<ul>
<li v-for="item of list"></li>
</ul>
//實(shí)例中
data:{
content:'',
list:['1','2','3','4','5']
}
通過(guò)v-for以上事例將可以渲染為五個(gè)li標(biāo)簽內(nèi)容分別1,2,3,4,5。
以上代碼等同于以下代碼
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
