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 不会 触发这个钩子。 attached:function(){ console.log("attached.."); }, //在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。 detached:function(){ console.log("detached.."); }, //在开始销毁实例时调用。此时实例仍然有功能。 beforeDestroy:function(){ console.log("beforeDestroy.."); }, //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，所有的子实例也已经被销毁。如果有离开过渡，destroyed 钩子在过渡完成之后调用。 destroyed:function(){ console.log("destroyed.."); } };
在浏览器里执行了看看：
首次进入 List 页面的执行顺序如下：
此时点一下浏览器的后退，List Component 会被销毁，执行顺序如下：
这是官方的生命周期的图：
10. 父组件与子组件
在很多情况下，组件是有父子关系的，比如 list 列表组件有个子组件 item
components/item.js
module.exports = { template: require('../templates/item.html'), props:["id","name"], ready: function () { } };
templates/item.html
<p>我是subitem： ${id} - ${name}</p>
修改 list 组件，添加 item 的引用
components/list.js
//引用item组件 import item from "./item"; module.exports = { template: require('../templates/list.html'), data:function(){ return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]}; }, //定义item组件为子组件 components:{ "item":item }, ready: function () { } };
templates/list.html
<h1>List</h1> <hr/> <p>Hello List Page!</p> <ul> <li v-for="(index,item) in items"> <!--使用item子组件，同时把id,name使用props传值给item子组件--> <item v-bind:id="item.id" v-bind:name="item.name"></item> </li> </ul>
浏览器里试试看：
子组件成功被调用了
11. 组件跳转传参
组件之间的跳转传参，也是一种非常常见的情况。下面为列表页，增加跳转到详情页的跳转，并传参 id 给详情页
修改路由 routes.js