如果要实现一个增删办事列表的功能，在不引用外部库与框架的情况下（不考虑兼容性），我们一般会写成下面这种形式。（输入框输入后，按下Enter键后，更新列表。）查看演示
<div>
<input id="input" />
<ul id="list">
<!-- <li>
<span></span>
<button>X</button>
</li> -->
</ul>
</div>
<script type="text/javascript">
var input = document.getElementById('input');
var list = document.getElementById('list');
function createNode(str) {
var div = document.createElement('div');
div.innerHTML = str;
return div.children[0];
}
var temp = '<li><span></span><button>X</button></li>'
input.addEventListener('keyup', function(event) {
if(event.keyCode == 13 && input.value) {
var newNode = createNode(temp);
list.appendChild(newNode);
var span = newNode.getElementsByTagName('span')[0];
var deleteBtn = newNode.getElementsByTagName('button')[0];
console.log(deleteBtn.parentNode);
span.innerText = input.value;
input.value = '';
deleteBtn.onclick = function() {
console.log(this.parentNode);
list.removeChild(this.parentNode);
};
}
});
</script>
使用Vue.js代码可以写成下面的形式。（使用Vue.js需下载引入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>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
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)
}
}
})
</script>
使用Vue写完最大的感受就是，整个过程没有直接操作DOM。只对数据进行操作就可以控制页面显示，并且，Vue对象层次划分清晰，比如上面，Vue对象里el选中容器，data存储数据，methods定义方法。
然后我发现，学习可以使用下面方法：学习一个新东西，先不管懂不懂，对着示例把代码码一遍，如果这个新工具是老工具的替代，也要使用老的方法实践一遍，然后进行对比，就会对新工具有更直观的感受。
对Vue体验过后，惊讶于它的简洁与强大，于是上网找能够使用Vue的练习。看到一个功能比较适合：添加书籍列表（没有进行数据检测） 查看演示
以下是代码：
<div id="book_store">
<table>
<thead><tr><td>书名</td><td>作者</td><td>价格</td><td>操作</td></tr></thead>
<tbody>
<tr v-for="item in list">
<td>{{ item.book_name }}</td>
<td>{{ item.author }}</td>
<td>{{ item.price }}</td>
<td><button v-on:click="removeBook($index)">删除</button></td>
</tr>
</tbody>
</table>
<div>
<h3>添加书籍</h3>
<p><label>书名<input type="text" v-model="new_book.book_name"></label></p>
<p><label>作者<input type="text" v-model="new_book.author"></label></p>
<p><label>价格<input type="text" v-model="new_book.price"></label></p>
<button v-on:click="addBook">添加</button>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#book_store',
data: {
new_book: null,
list: []
},
methods: {
addBook: function() {
var book_name = this.new_book.book_name.trim(),
author = this.new_book.author.trim(),
price = this.new_book.price.trim();
if(book_name && author && price) {
var book = {
book_name: book_name,
author: author,
price: price
}
this.list.push(book);
this.new_book = null;
}
},
removeBook: function(index) {
this.list.splice(index, 1);
}
}
});
</script>
运行上面代码会有警告，如图
这是因为在data里我将new_book设置为了null，因此浏览器在渲染页面的时候在data里找不到new_book.book_name等属性，于是程序替我们创建了这些对象属性并给出了警告。一个警告貌似无关紧要，但是在使用变量／属性前最好将它初始化。
关键字符：new Vue()、data、methods、v-*、{{}}
上面命名方式有点不一致，以后我将统一将变量使用下划线_连接，函数命名使用驼峰形式。这样名称既清晰又能区别函数与变量。
在下一篇我会提一点响应式相关的东西。先简单介绍下，在使用new Vue(options)创建Vue对象的过程中，会vue.js遍历该对象的data对象属性，并将它们转换为getter/setter以实现动态跟踪。而data对象也会从一个普通对象变成一个下面这种形式的对象：
由于构建data对象的过程设计一系列复杂的操作，所以后续如果直接使用data.property给data添加属性，这个属性并不会触发视图更新，因为它没有被转换为getter/setter。如图：
那么后续我们如何给data添加新的触发视图更新的属性呢？后面会从Vue的源码中找答案。
网友评论