添加 list 组件
components/list.js
module.exports = {
template: require('../templates/list.html'), data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
},
ready: function () {
}
};
templates/list.html
<h1>List</h1>
<hr/><p>Hello List Page!</p>
<ul>
<li v-for="(index,item) in items">
${item.id} : ${item.name}
</li>
</ul>
v-for 也是 vue 的默认指令，是用来循环数据列表的。
现在开始执行 webpack –watch 命令进行监听，这样就不用每次敲 webpack 命令了。只要开发者每次修改 js 点了保存，webpack 都会自动构建最新的 bundle 文件。
浏览器里试试看：
index 页
点击 List Page 跳转到 list 页
Bingo！ 单页面两个组件之间跳转切换成功！
9. 组件生命周期
修改 **componets/list.js **
module.exports = {
template: require('../templates/list.html'), data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
},
//在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化
init:function(){
console.log("init..");
},
//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。
created:function(){
console.log("created..");
},
//在编译开始前调用。
beforeCompile:function(){
console.log("beforeCompile..");
},
//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
compiled:function(){
console.log("compiled..");
},
//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。
ready: function () {
console.log("ready..");
},
//在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。
