Vue入门初体验

Vue可以说是现在最火的MVVM前端UI框架了吧，整体性能优于React，比Angular也更轻量，具体可参考官网对比其他框架
官方文档: https://cn.vuejs.org/v2/api/

Hello World

---

首先我们开始从学每门语言的hello world入门Vue吧
html代码，同angular一样，采用双大括号的形式实现数据绑定:

  {{ message }}

js代码，通过el获取到html的节点，向节点中插入data里的message的值:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJs'
  }
})

运行结果:

Hello VueJs

注:el指明了创建的Vue实例对象的作用域，data则是用于存储Vue实例的数据对象

双向数据绑定

---

双向数据绑定就是用表单控件的v-model指令实现通过表单里的内容改变，来让data里的数据改变，最后更新到页面上

{{ msg }}

渲染列表

---

v-for指令根据一组数组的选项列表进行渲染，这个很像js里的for in循环，in前面是自己定义的局部变量，in后面是要遍历的数组

    

        {{item}}
    

事件监听

---

使用v-on指令监控对应的事件，比如:

    
{{msg}}
    clickMe
    clickMe    //简写形式

当点击按钮时，data里的msg的字符串就会反转，再点击之后就会重新变回来
注:methods里的方法可通过创建的Vue实例对象调用

TodoList

---

    
    

        

            
            {{ item.text }}
            X
        
    

在html代码中用到了v-on:keyup.enter，这句代码意思是监听回车按钮敲击事件,如果敲击回车则执行后面的方法，下面的index是取得当前项的索引值传递到removeTodo方法中清除指定的项目
addTodo方法是将输入框输入的内容两边去掉空格，然后判断是否为空，如果不为空将这个字符串放到list数组里，并且清空输入框