資訊專(zhuān)欄INFORMATION COLUMN
摘要：基礎(chǔ)安裝命令行工具提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。打開(kāi)瀏覽器的控制臺(tái)，并修改。自定義指令聚焦元素當(dāng)頁(yè)面加載時(shí)，元素將獲得焦點(diǎn)注意在移動(dòng)版上不工作?，F(xiàn)在讓我們完善這個(gè)指令注冊(cè)一個(gè)全局自定義指令當(dāng)綁定元素插入到中。
Vue基礎(chǔ) 安裝vue
npm install vue命令行工具(CLI)
Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。該工具提供開(kāi)箱即用的構(gòu)建工具配置，帶來(lái)現(xiàn)代化的前端開(kāi)發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：
# 全局安裝 vue-cli $ npm install --global vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 $ vue init webpack my-project # 安裝依賴(lài)，走你 $ cd my-project $ npm install $ npm run dev使用
引入vue.js
一、聲明和渲染Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：
{{ message }}
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
這里的數(shù)據(jù)和DOM已經(jīng)被綁定在一起，所有的元素都是響應(yīng)式的。打開(kāi)瀏覽器的控制臺(tái)，并修改app.message。你將看到上例相應(yīng)地更新.
二、指令指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性,它們會(huì)在渲染的 DOM 上應(yīng)用特殊的響應(yīng)式行為
1.條件與循環(huán)v-if
現(xiàn)在你看到我了
var app3 = new Vue({
el: "#app-3",
data: {
seen: true
}
})
這里面將seen:true改為seen:false可以讓現(xiàn)在你看到我了消失。
v-for
v-for 指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染一個(gè)項(xiàng)目列表：
- {{ todo.text }}
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{ text: "學(xué)習(xí) JavaScript" },
{ text: "學(xué)習(xí) Vue" },
{ text: "整個(gè)牛項(xiàng)目" }
]
}
})
在控制臺(tái)里，輸入 app4.todos.push({ text: "新項(xiàng)目" })，你會(huì)發(fā)現(xiàn)列表中添加了一個(gè)新項(xiàng)。
2、綁定事件監(jiān)聽(tīng)v-on
為了讓用戶(hù)和你的應(yīng)用進(jìn)行互動(dòng)，我們可以用 v-on 指令綁定一個(gè)事件監(jiān)聽(tīng)器，通過(guò)它調(diào)用我們 Vue 實(shí)例中定義的方法：
{{ message }}
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue.js!"
},
methods: {
reverseMessage: function () {
this.message = this.message.split("").reverse().join("")
}
}
})
3、表單輸入綁定
v-model
Vue 提供了 v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。
{{ message }}
var app6 = new Vue({
el: "#app-6",
data: {
message: "Hello Vue!"
}
})
4、元素顯示于隱藏
v-show
另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。用法大致一樣：
計(jì)算屬性Hello!
在Vue實(shí)例中添加computed:{}
下面是一個(gè)簡(jiǎn)單計(jì)算屬性例子-購(gòu)物車(chē):
鞋子:
數(shù)量:
小計(jì):{{sumB}}
總價(jià):{{Sum}}
鍵值修飾符
