开始想学点新的东西来拓展些视野和想法了，一直听说 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)
}
}
})
|
总结
几个例子看下来，稍微总结点规律出来
Js 能这么流行我想就在于，直接文本编辑，浏览器刷新就能看到效果，太快太直接了，不像用个 IDE 还得编译才能看到效果，快，真乃天下第一武功之精髓。