第一个 vue项目

npm install -g cnpm --registry=https://registry.npm.taobao.org        安装淘宝镜像
cnpm -v                 查看cnpm版本
cnpm vue                装vue
cnpm install -g vue-cli

（vue可以使用）

创建项目

vue init webpack my-frst-project
cd my-first-project
sudo cnpm install
cnpm install
npm run dev

data model层 vue用到的数据
methods可以去到data的数据
watch监听 数据

模板指令

<h1>{{title}}</h1>
<h1 v-text="title"></h1>

上面的代码效果相同

数据渲染 从data 取数据
v-text
v-html

控制模板隐藏
v-if
v-show v-show="true/false "
循环 数组，json
v-for {{$index}}索引， 循环json{{$key}} ,循环时还

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

小结

new 一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch

其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。

Vue对象里的设置通过html指令进行关联

重要的指令包括
v-text 渲染数据
v-if控制显示
v-on绑定事件
v-for 循环渲染等

示例

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 数组 (同时渲染多个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的