npm install -g cnpm --registry=https://registry.npm.taobao.org 安裝淘寶鏡像
cnpm -v 查看cnpm版本
cnpm vue 裝vue
cnpm install -g vue-cli
（vue可以使用）
創(chuàng)建項目
vue init webpack my-frst-project
cd my-first-project
sudo cnpm install
cnpm install
npm run dev
data model層 vue用到的數(shù)據(jù)
methods可以去到data的數(shù)據(jù)
watch監(jiān)聽 數(shù)據(jù)
模板指令
<h1>{{title}}</h1>
<h1 v-text="title"></h1>
上面的代碼效果相同
數(shù)據(jù)渲染 從data 取數(shù)據(jù)
v-text
v-html
控制模板隱藏
v-if
v-show v-show="true/false "
循環(huán) 數(shù)組皇型，json
v-for {{$index}}索引， 循環(huán)json{{$key}} ,循環(huán)時還
可以用v-for"=(k,v) in json"
v-on事件綁定 方法寫在mothods中
v-bind 對元素屬性的操作溶诞，常用于對class的操作
小結(jié)
new 一個vue對象的時候你可以設置它的屬性水由，其中最重要的包括三個皮服，分別是data，methods，watch
其中data代表vue對象的數(shù)據(jù)篓冲，methods代表vue對象的方法李破，watch設置了對象監(jiān)聽的方法。
Vue對象里的設置通過html指令進行關聯(lián)
重要的指令包括
v-text 渲染數(shù)據(jù)
v-if控制顯示
v-on綁定事件
v-for 循環(huán)渲染等
示例
export default{} 等用于new Vue()
綁定class
1 對象 (是否添加isFinished作為li的類)
<li v-for="item in items" v-bind:class="{isFinished:item.isFinished}">{{item.label}}</li>
export default{
data : function(){
return {
title: "this is a todo list",
desc: "<span>test</span>",
items:[
{
label:'coding',
isFinished:true
},
{
label:'walking',
isFinished:false
}
],
liClass
}
}
}
2 數(shù)組 (同時渲染多個class)
<li v-for="item in items" v-bind:class="[liClass]">{{item.label}}</li>```
```javascript
export default{
data : function(){
return {
title: "this is a todo list",
desc: "<span>test</span>",
items:[
{
label:'coding',
isFinished:true
},
{
label:'walking',
isFinished:false
}
],
liClass:"this is a class name"
}
}
}
Paste_Image.png
<li v-for="item in items" v-bind:class="{isFinished:item.isFinished}" v-on:click="toogleClass(item)">{{item.label}}</li>
v-on的使用
methods:{
toogleClass:function(item){
item.isFinished = !item.isFinished
}
}
v-on:keyup.enter 同 v-on:keyup.13
簡寫：@keyup.enter
enter是修飾keyup的
