通过一个官网的例子大致了解 Vuejs 简洁优雅的风格。

先看完整代码,非常简洁:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="todo-list-example">
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:title="todo"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
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
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
todos: [
'Do the dishes',
'Take out the trash',
'Mow the lawn'
]
},
methods: {
addNewTodo: function () {
this.todos.push(this.newTodoText)
this.newTodoText = ''
}
}
})

下面来分析一下:

HTML 模版

todo 输入框

先看 HTML 模板,做了一个 todo 输入框,一个列表:
todo 输入框做了这些事情:

  • 使用v-model双向绑定newTodoText,以便输入的同时修改数据;
  • 使用v-on绑定了一个keyup事件,带了enter修饰符(之前接触过的)表示只应用于回车键
  • HTML 原生属性placeholder定义了占位文字

todo 列表

<ul>列表的<li>项使用了自定义组件todo-item,用到了is特性。(上网搜了一下,这个应该是使用自定义组件的正确姿势。因为直接写结构的话会有一些限制,比如<ul>只能包含<li>元素),还有:

  • 使用v-for遍历todos数组:(todo, index) in todos
  • 使用v-bind绑定todo到title变量(这就是上面说的,和v-for代码解耦,因为对于组件来说,使用的是title这个有意义的变量)
  • 使用v-on绑定了一个remove事件:todos.splice(index, 1)——删除当前索引的元素

组件定义

这个就比较简单了,只有两个属性:

  • template定义模板,<button>绑定了一个点击事件,仅仅使用$emit(后面会详细了解)派发一个remove事件;
  • props接收一个title属性。

Vue 实例

  • el指定目标元素;
  • data 指定了默认的新todo为空值,todos列表3个项;
  • methods定义了addNewTodo方法,只操作数据:新todo推入todos,清空新todo。

所以Vue真的很简洁易懂,这么短短几十行代码,就实现了一个简单的todo应用,还有很优秀的思想,比如子组件的独立性,包括需要外部调用时传入数据,内部只派发remove事件,具体操作由调用者决定等等;还有只操作数据来引起DOM变化等等。