Android开发学前端之Vue.js(1) Hello World

大家好,我是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:

1
2
3
4
5
6
7
8
9
<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部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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)
}
}
})

水水的结束前

是不是感受到js的简洁了…然后似乎也都能看懂!还有data-binding哦,还是双向的,想想我们输入的内容自动被设置到了newToDo,而更新后的todos则自动刷新了页面上的列表。而Android上如果想做到这个…我们得写多少东西。

Mark Zhai (翟一帆) wechat
欢迎您扫一扫上面的微信公众号,订阅我们的公众号!
坚持原创技术分享,您的支持将鼓励我继续创作!