1.使用官方腳手架，獲取startup
$ npm install -g @vue-cli
$ vue create my-project
$ cd my-project
$ npm install
$ npm run dev
2.定位基礎(chǔ)練習(xí)的playground
# 在這里開始你的表演
src/components/HelloWorld.vue
3. html基礎(chǔ)模板語法
3.1 基礎(chǔ)數(shù)值綁定
html
<div>
<!-- html文本綁定 -->
<div>{{ message }}</div>
<!-- html 屬性值綁定 -->
<div :disabled="disabled"></div>
</div>
js
export default {
data() {
return {
message: 'hello world',
disabled: true,
}
}
}
輸出
<div>
<!-- html文本綁定 -->
<div>hello world</div>
<!-- html 屬性值綁定 -->
<div :disabled="true"></div>
</div>
3.2 分支模板
html
<div>
<div v-if="disabled">邏輯true</div>
<div v-else>邏輯false</div>
</div>
js
export default {
data() {
return {
disabled: true,
}
}
}
輸出
<div>
<div>邏輯true</div>
</div>
3.3 列表模板
html
<div>
<div v-for="item in items" :disabled="item.disabled" >
<div>{{ item.value }}</div>
</div>
</div>
js
export default {
data() {
return {
items: [
{ disabled: true, value: 1 },
{ disabled: false, value: 2 },
{ disabled: true, value: 3 },
]
}
}
}
輸出
<div>
<div disabled="true"><div>1</div></div>
<div disabled="false"><div>2</div></div>
<div disabled="true"><div>3</div></div>
</div>
3.4 模板事件處理——點(diǎn)擊事件
html
<div>
<!-- 使用@修飾符表示事件響應(yīng) -->
<div @click="handleClick(event)">click me {{ count }}</div>
</div>
js
export default {
data () {
return {
count: 1
}
}
// 在methods中處理響應(yīng)流程
methods: {
handleClick (event) {
// 此處為div被點(diǎn)擊之后出發(fā)的后續(xù)邏輯流程
// 通過this可以指向到data中的模板數(shù)據(jù)源，修改數(shù)據(jù)源，模板綁定數(shù)據(jù)自動(dòng)更新
this.count++
}
}
}
4. 【重要】基于vue(mvvm類)與jquery在開發(fā)思維模式中的轉(zhuǎn)化
全面顛覆原先面向dom操作的書寫方式，轉(zhuǎn)向面向諸如data()中的純粹數(shù)據(jù)的編程，dom的視圖更新，交給框架來自動(dòng)解決，由數(shù)據(jù)來驅(qū)動(dòng)。
