05 Vue组件

一、组件

1、fetch和axios

axios与fetch实现数据请求

(1)fetch（不是所有浏览器都支持，谷歌浏览器支持）
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。兼容性不好
polyfill: https://github.com/camsong/fetch-ie8

1.1 fetche使用




    
    fetch
    




    
    
        
            {{data.name}}

1.2 axios的使用：跟后端交互

需要解决跨域问题

后端给响应头添加res.headers['Access-Control-Allow-Origin']='*'




    
    Title
    

    









    电影名为：{{data.name}}
    导演：{{data.director}}

2、计算属性

把原来的函数，做成属性，只要原来函数中相关的值变化，属性才重新运算

2.1、通过计算属性实现名字首字母大写




    
    Title
    



    请输入名字：
    

    
    使用函数：{{upperName()}}
    
    使用计算属性：{{}}

2.2、通过计算属性重写过滤案例




    
    Title
    



    
    

    
        {{data}}

二、组件化开发基础

1、组件是什么？有什么用

扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html

2、组件注册方式

1 全局组件
	Vue.component
2 局部组件

# 总结
1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数

2.1、定义局部组件




    
    Title

2.2、定义全局组件




    
    Title
    



    全局组件

3、组件通信

1 父子组件传值 (props down, events up)
2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)
3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件
4 Ref  this.$refs.mytext
5 事件总线var bus = new Vue();* mounted生命周期中进行监听

3.1、父子通信之父传子

通过自定义属性实现




    
    Title
    



    ---->{{myText}}

3.2、父子通信之子传父(通过事件)

通过自定义事件传递




    
    Title
    



    
    
    {{myText}}

3.3、通过子传父控制字组件显示隐藏




    
    Title
    



    普通方式
    
    

    
    字传父方式

3.4、ref属性

ref放在标签上，拿到的是原生节点
ref放在组件上，拿到的是组件对象,
	通过这种方式实现子传父（this.$refs.mychild.text）
  通过这种方式实现父传子（调用子组件方法传参数）




    
    Title
    




    放在普通标签上
    --->{{myText}}
    
    

    
    放在组件上

4、动态组件

1  元素，动态地绑定多个组件到它的 is 属性
2  保留状态，避免重新渲染

4.1、基本使用

vue