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:{

                    }

            })

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