npm install -g cnpm --registry=https://registry.npm.taobao.org        安裝淘寶鏡像
cnpm -v                 查看cnpm版本
cnpm vue                裝vue
cnpm install -g vue-cli

（vue可以使用）

創(chuàng)建項(xià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)時(shí)還

可以用v-for"=(k,v) in json"
v-on事件綁定 方法寫在mothods中
v-bind 對元素屬性的操作，常用于對class的操作

小結(jié)

new 一個(gè)vue對象的時(shí)候你可以設(shè)置它的屬性，其中最重要的包括三個(gè)，分別是data，methods，watch

其中data代表vue對象的數(shù)據(jù)，methods代表vue對象的方法，watch設(shè)置了對象監(jiān)聽的方法。

Vue對象里的設(shè)置通過html指令進(jìn)行關(guān)聯(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ù)組 (同時(shí)渲染多個(gè)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的