二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）

 一、 发送AJAX请求


 1. 简介
    vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现
    axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
    
    参考：GitHub上搜索axios，查看API文档


 2. 使用axios发送AJAX请求


 2.1 安装axios并引入
    npm install axios -S
    也可直接下载axios.min.js文件


 2.2 基本用法  
    axios([options])  
    axios.get(url[,options]);
        传参方式：
            1.通过url传参
            2.通过params选项传参
    axios.post(url,data,[options]);
        axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，
        所以参数必须要以键值对形式传递，不能以json形式传参
        传参方式：
            1.自己拼接为键值对
            2.使用transformRequest，在请求发送前将请求数据进行转换
            3.如果使用模块化开发，可以使用qs模块进行转换
    
    axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

	
	
	
	
	
	


	

		发送AJAX请求

		GET方式发送AJAX请求

		POST方式发送AJAX请求
		

		


		GitHub ID： 
		获取指定GitHub账户信息并显示
		

		姓名：{{user.name}} 

		头像：
		
		


		向360搜索发送JSONP请求

		向百度搜索发送JSONP请求

	

 3. 使用vue-resource发送跨域请求


 3.1 安装vue-resource并引入    
    cnpm install vue-resource -S


 3.2 基本用法
    使用this.$http发送请求  
        this.$http.get(url, [options])
        this.$http.head(url, [options])
        this.$http.delete(url, [options])
        this.$http.jsonp(url, [options])
        this.$http.post(url, [body], [options])
        this.$http.put(url, [body], [options])
        this.$http.patch(url, [body], [options])  

	
	
	
	
	
	


	

		
		

			

				{{value}}
			
		
		
暂无数据....
	

 4. 练习
    百度搜索列表
    课后作业：
        1.只显示4条
        2.回车后在新页面中显示搜索结果




 二、Vue生命周期
    vue实例从创建到销毁的过程，称为生命周期，共有八个阶段
                

	
	
	
	


	

		{{msg}}
		


		更新数据
		销毁组件
	

 三、计算属性


 1. 基本用法
    计算属性也是用来存储数据，但具有以下几个特点：
        a.数据可以进行逻辑处理操作
        b.对计算属性中的数据进行监视


 2.计算属性 vs 方法
    将计算属性的get函数定义为一个方法也可以实现类似的功能
    区别：
        a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
        b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行


 3. get和set
    计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
    默认只有get，如果需要set，要自己添加

	
	
	


	

		
		 
{{msg}}
		 
{{msg2}}

		 
		 
{{msg.split(' ').reverse().join(' ')}}
		 
{{reverseMsg}}
		 修改值

		
		

		 测试
		
		
		 
{{num2}}
		 修改计算属性


	


	
	

 四、 vue实例的属性和方法


 1. 属性
    vm.$el
    vm.$data
    vm.$options
    vm.$refs

	
	
	


	

		{{msg}}
	
		
你好
		
世界
		


		
标题：{{name}}
	

	
	

 2. 方法
    vm.$mount()
    vm.$destroy()
    vm.$nextTick(callback)


    vm.$set(object,key,value)
    vm.$delete(object,key)
    vm.$watch(data,callback[,options])

	
	
	


	

		修改属性
		添加属性
		删除属性

		
	
		
{{user.name}}
		
{{user.age}}
	

	
	

	
	
	


	

		
		
{{name}}
		

		
		
		
{{age}}
		


		
		
{{user.name}}
	

	
	

 五、自定义指令
    分类：全局指令、局部指令


 1. 自定义全局指令
    使用全局方法Vue.directive(指令ID,定义对象)    


 2. 自定义局部指令

	
	
	


	

		
		更新数据

		
{{msg}}

		

		

		
	

	
	

 3. 练习
    拖动页面中的元素
    onmouseover onmouseout 
    onmousedown onmousemove  onmouseup

	
	
	
	


	

		
itany
		
网博
	

	
	

 六、过渡(动画)


 1. 简介
    Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
    本质上还是使用CSS3动画：transition、animation

	
	
	
	


	

		点我
		
		
			
网博
		
	

	
	

 2. 基本用法
    使用transition组件，将要执行动画的元素包含在该组件内
       
            运动的元素
               
    过滤的CSS类名：6个
    
 3. 钩子函数
    8个


 4. 结合第三方动画库animate..css一起使用
   
       

网博

        

	
	
	
	
	


	

		点我
		
		
			
网博
		
	

	
	

 5. 多元素动画
        

	
	
	
	
	


	

		点我
		
		
			
itany
			
网博
		
	

	
	

 6. 练习

    多元素动画    

	
	
	
	
	


	

		
		
		
			

				{{v}}