vueJs 2.0学习笔记（一）

一个基本的了解

处理用户输入

    通过v-on可以绑定一个事件监听事件。所有的对DOM的操纵都是有vue自己完成的。

HTML：

<div id="app">            <p>{{msg}}</p>            <button v-on:click="reverseClick">反转</button>        </div>

JS：

    var app = new Vue({                el:"#app",                data:{                    msg:"你好世界"                },                methods:{                    reverseClick : function(){                        this.msg = this.msg.split('').reverse().join('');                    }                }            })

    以上代码实现了语句的反转

PS:属性后面跟冒号。方法是methods定义。

    通过v-model可以实现表单输入。

HTML：

<div id="app">            <p>{{msg}}</p>            <input type="text" v-model="msg" />        </div>

JS：

var app = new Vue({                el:"#app",                data:{                    msg:"你好世界"                },                methods:{                    }                }            })

组件化应用构建

    首先我们理解一下什么叫组件，组件就是数据和方法的简单封装。比如库，框架，插件等它们都属于组件，不过它们是更为复杂的数据和方法的封装。    而在vue中，组件是你自己预先定义的一个vue的实例。

实例：
HTML：

<div id="app">            <p>{{msg}}</p>            <input type="text" v-model="msg" />            <ol>                <!--todo对象是一个动态的变量-->                <!--item in list实现对text的循环-->                <todo-item v-for="item in list" v-bind:todo=item v-bind:key=item.id></todo-item>            </ol>        </div>

JS：

Vue.component('todo-item',{                    //props是传递属性用的                    props:['todo'],                    template:'<li>{{todo.text}}</li>'                })            var app = new Vue({                el:"#app",                data:{                    msg:"你好世界",                    list:[                    {id:0,text:'足球'},                    {id:1,text:'篮球'},                    {id:2,text:'羽毛球'}                    ]                },                methods:{                    }            })

    个人认为组件化的优势在于更模块化了，代码的逻辑更严谨，代码更简洁优美。