转载

Android开发学前端之Vue.js（一）

大家好，我是doge。噢不，我是markzhai。

其实一直对前端很好奇，在学校念书的时候，曾在各种项目里用过诸如PHP/RoR/Spring等Web框架搭过大小网站，但一方面很烦写css，另一方面js也就是写写很简单的东西（比如ajax和jquery刷新刷新东西），更多的还是在写业务逻辑，所以这两年看着推陈出新的前端技术和酷炫的效果，有一种自己从没学过的感觉。

在React Native出现后，更加让我觉得有必要再系统性学习一下js的新技术。而我的良师益友 - 大头鬼则屡次安利我Vue.js(发音 /vjuː/，类似 view)，同时阿里内部在推的weex也是基于Vue.js做的一套跨平台方案。于是决定，不管以后能不能用上weex，先学习一下Vue.js吧。

本系列的源码都在： HelloVue ，虽然其实大部分是官网上的例子，哈哈，不要鄙视我。

本系列的受众是对移动开发和基本的HTML知识有一定了解的童鞋。

例子

简单来说，html描述页面信息，css是style，而JavaScript则操作页面上的element。当然，因为我们要学的是Vue.js，所以不会接触到css。

先看 hello-world.html 的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>

除了熟悉的各个html标签外，我们看到了 , v-model , v-on:keyup.enter 等东西，这些便是Vue.js的了。

顾名思义猜测一下， v-model 应该是data-binding， v-on:keyup.enter 应该是键盘按下回车键时触发的函数， v-for 估计是遍历，则是注入model的字符串， v-on:click 嘛肯定是点击事件的函数啦。

然后我们来看看JavaScript部分：

new Vue({
  <!-- 嗯...作用域？就是html里的id -->
  el: '#app',

  <!-- data，包含了一个object和一个list？ -->
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },

  <!-- 那些触发的函数就在这里啦 -->
  methods: {
    <!-- addToDo从newToDo拿到trim后的字符串然后加到todo，清空input框 -->
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    <!-- 根据传入的index删除todo列表的对应项，为啥Java的for不能直接拿到当前index呢 -->
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})