深入浅出vue1.0：起步

双向绑定

就是说视图和数据绑在一起，有一个变化了，另外一个也会变化
应用场景：各种表单啊~需要互动的有变化的地方~

渲染列表

使用v-for标签，在前台展示数据
应用场景：各种列表~

处理用户输入

先写触发条件，一般都是点击了什么（v-on:click="方法名"）
再写要执行的方法（要做什么）
应用场景：除了静态不变的，剩下都需要的好吗~

综合例子

html
    //要操作的对象
    <div id="app">
    //绑定模型 按键事件
      <input v-model="newTodo" v-on:keyup.enter="addTodo">
      <ul>
        //循环列表
        <li v-for="todo in todos">
           //文本插值 
          <span>{{ todo.text }}</span>
          //  指令的值 为绑定表达式（参数）
          <button v-on:click="removeTodo($index)">X</button>
        </li>
      </ul>
    </div>
    js
    //创建vue
    new Vue({
        //创建对象        
        el: '#app',//属性赋值     
        data: {
            newTodo: '',todos: [
                { text: 'Add some todos' }
            ]
        },//调用方法
        methods: {
            //定义方法一 添加todo
            addTodo: function () {
                //去掉空格
                var text = this.newTodo.trim()
                if (text) {
                    //加入数组
                    this.todos.push({ text: text })
                    //置空
                    this.newTodo = ''
                }
             },//定义方法二 删除todo
             removeTodo: function (index) {
                //删除
                 this.todos.splice(index,1)
             }
         }
    })

http://codepen.io/zd9027/pen/XdQYbb

吐槽

最初学前端用jq写了一坨，用vue几行就搞定了~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!