vue中的组件，Component元素，自定义路由，异步数据获取

组件是Vue最强大的功能之一。
组件是一组可被复用的具有一定功能，独立的完整的代码片段，这个代码片段可以渲染一个完整视图结构
组件开发
如何注册组件？
第一步，在页面HTML标签中使用这个组件名称，像使用DOM元素一样。(通常是一个自定义元素)。

　　

第二步，使用Vue.extend方法创建一个组件
var MyComponent = Vue.extend({
　　// .........
})
在extend方法中接收一个对象.
这个对象是一个描述组件的对象，它具有Vue实例化对象上的属性方法，它还有一些特殊的属性
template：组件内部渲染模的板字符串
props：父组件向组件内部传入数据的引用

　　
　　 

想在template里用这个msg和inputVal
组件内部还没有这个msg和inputVal
v-bind是为了创造个js环境
所以将组件中的属性值引入组件内部通过props属性
var MyComponent = Vue.extend({
props:['msg','inputtext'],
//定义模板字符串
template: '

hello world!{{msg}}

'
})
第三步，使用Vue.component方法注册组件。
Vue.component('my-component', MyComponent)
eg:
//页面中使用组件

　　

// 定义组件
var MyComponent = Vue.extend({
　　//定义模板字符串
　　template: '

hello world!

'
})
// 注册组件
Vue.component('my-component', MyComponent)
//创建vue的实例化对象
new Vue({
　　el: '#app'
})
结果：

　　

hello world!

在vue的组件中他是一个独立个体，因此他的事件，数据等等要绑定在组件的内部不是vue的实例化对象
注意：
子组件向父组件通信，通过子组件实例化对象上的$dispatch方法实现
第一个参数表示消息的名称
从第二个参数开始表示子组件向父组件传递的数据
eg:
var MyComponent = Vue.extend({
　　template: '

hello world!

',
　　methods:{
　　toUpper:function(){
　　　　//具体的逻辑
　　　　//作用域 this指的是组件的实例化对象
　　　　this.$dispatch("abc",123)
　　}
　　}
})
为了接收子组件向父组件传送的消息。在父组件中订阅该消息 在events属性中定义这些消息
属性表示消息的名称
属性值是一个函数，表示处理消息的回调函数，参数是子组件发送消息时候传递参数，作用域 vue的实例化对象
new Vue({
　　el: '#app',
　　event:{
　　　　//接收子组件传递的数据 123
　　　　'abc':function(){
　　　　　　//作用域 vue的实例化对象
　　　　　　//参数就是[123] 
　　　　}
　　}
})

 Component元素

一旦向页面中渲染的时候，就会被删除，有一个属性叫做is属性，通过这个属性可以确定显示哪个组件，is是一个自定义属性，值是一个字符串，想让他的值是一个变量，要添加v-bind创建js环境。

　　

var app = new Vue({
　　el: '#app',
　　data: {
　　　　view: 'home'//显示home这个组件
　　}
})
自定义路由
Vue没有为我们提供路由，自己定义路由
路由规则比如home首页，list列表页，product详情页
‘’ 或者 #/home 进入home组件
#list/type/1 进入list组件
#/product/2 进入product组件
function router () {
　　// 根据hash不同决定渲染哪个页面
　　var str = location.hash;
　　str = str.slice(1);
　　str = str.replace(/^\//, '')
　　// 获取 / 前面的字符串
　　if (str.indexOf('/') > -1) {
　　　　str = str.slice(0, str.indexOf('/'))
　　}
　　var map = {
　　　　home: true,
　　　　list: true,
　　　　product: true
　　}
　　if (map[str]) {
　　　　app.view = str;
　　} else {
　　　　app.view = 'home'
　　}
}
// 页面进入的时候，会触发load事件
window.addEventListener('load', router)
// hash改变时候的事件交hashChange事件
window.addEventListener('hashchange', router)

 注意：在组件中定义数据，这些数据不能直接作为data的属性值，要放在该属性函数中作为返回值。这样才能成功设置绑定数据

在vue的实例化对象中写数据：data后面直接是个{} 就可以获取数据
var app = new Vue({
　　el: '#app',
　　data: {
　　　　view: ''
　　}
})
在组件中获取数据 数据作为data对象里面函数的返回值获取。
var HomComponent = Vue.extend({
　　data: function () {
　　　　return {
　　　　　　types: [
　　　　　　　　{id: 1, title: '美食', url: '01.png'},
　　　　　　　　{id: 2, title: '电影', url: '02.png'} 
　　　　　　]
　　　　}
　　}
})

异步数据的渲染

固定数据我们可以通过同步数据写在文件中
有时候，页面中一些数据，需要需要服务器端传递过来，这一类数据渲染，我们称之为异步数据的渲染
异步数据渲染什么时候请求数据？
当组件渲染完毕，会触发一个created方法，如果这个方法被调用说明这个组件被渲染了
var HomComponent = Vue.extend({
　　template: Util.tpl('tpl_home'),
　　data: function () {
　　return {
　　　　types: [
　　　　　　{id: 1, title: '美食', url: '01.png'},
　　　　　　{id: 2, title: '电影', url: '02.png'}
　　　　　　]
　　　　}
　　},
　　created: function () {
　　　　//作用域是组件的实例化对象
　　　　/////执行异步数据的获取发ajax
　　　　将数据保存在data中使用。往组件的实例化对象中data中添加
　　}
})

好文要顶 关注我 收藏该文