走进 vue 和 react 的世界

开始想学点新的东西来拓展些视野和想法了，一直听说 react 的大名，始终没有开始研究，借此机会来一段新的学习来充实下自己。

这两天微博刚好也看到有人用 vux 实现了一个类似微信设置的页面，查了下 vux 的 demo 完整性不错，又看了下 vue 官网的实例都很简洁明了，所以先入门 vue 然后再来看看 react 吧。

vue 入门

hello world

使用的方法很简单基本上就两部，当然如何还有美化的话，加上 css 样式就好了：

• 引入 vue.js 然后写 布局
• 然后写 vue 的脚本

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

双向绑定

第一次听说这个词，感觉有点高大上啊，让我们直接看下例子吧

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

看出来没，定位好标签，数据是可以用括号或者属性定义的方式来传的。

综合例子

稍微来个复杂的，有数据又有方法的。

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

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})

总结

几个例子看下来，稍微总结点规律出来

• {} 大括号取值
• v 前缀取值

Js 能这么流行我想就在于，直接文本编辑，浏览器刷新就能看到效果，太快太直接了，不像用个 IDE 还得编译才能看到效果，快，真乃天下第一武功之精髓。