安裝
兼容性
Vue.js 不支持 IE8 及其以下版本塞蹭。Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。
審查和調(diào)試工具
Vue Devtools
npm
在用 Vue.js 構(gòu)建大型應(yīng)用時推薦使用 NPM 安裝讶坯，NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用番电。Vue.js 也提供配套工具來開發(fā)單文件組件。
# 最新穩(wěn)定版
$ npm install vue
命令行工具
Vue.js 提供一個官方命令行工具闽巩，可用于快速搭建大型單頁應(yīng)用钧舌。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程涎跨。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載洼冻、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目：
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴
$ cd my-project
$ npm install
$ npm run dev
介紹
聲明式渲染
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
app.message = 'hello world';
綁定 DOM 元素屬性：
<div id="app2">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
var app2 = new Vue({
el:'#app2',
data:{
message:'頁面加載于 '+new Date().toLocaleString()
}
});
app2.message='提示信息'
條件與循環(huán)
<div id="app1" v-cloak>
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
var app1 = new Vue({
el:'#app1',
data:{
seen:true
}
});
app1.seen = false
<div id="app2" v-cloak>
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app2 = new Vue({
el:'#app2',
data:{
todos:[
{text:'html5'},
{text:'css3'},
{text:'javascript'}
]
}
});
app2.todos.push({text:'jquery'})
app2.todos.push({text:'bootstrap'})
處理用戶輸入
<div id="app1" v-cloak>
<p> {{message}} </p>
<button v-on:click="reverseMsg" type="button">逆轉(zhuǎn)消息</button>
</div>
var app1 = new Vue({
el:'#app1',
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMsg: function(){
this.message = this.message.split('').reverse().join('');
}
}
});
<div id="app2">
<p>{{message}}</p>
<input v-model="message">
</div>
var app2 = new Vue({
el:'#app2',
data:{
message:'Hello Vue.js!'
}
});
組件化應(yīng)用構(gòu)建
<div id="app1" v-cloak>
<ol>
<!-- 創(chuàng)建一個 todo-item 組件的實例 -->
<todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
// 定義名為 todo-item 的新組件
Vue.component('todo-item',{
// todo-item 組件現(xiàn)在接受一個 "prop"隅很，類似于一個自定義屬性 這個屬性名為 todo撞牢。
props:['todo'],
template:'<li>{{todo.text}}</li>'
});
var app1 = new Vue({
el:'#app1',
data:{
list:[
{id:0,text:'html'},
{id:1,text:'css'},
{id:2,text:'javascript'},
]
}
});
