Vue文档

Vue入门

1.Vue.js定义：

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用（即：可以在原项目基础上逐渐累加功能，需要什么功能便添加什么功能）。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。且不仅能够构建较大项目，也能够为较小的网页提供驱动。

2.安装

2.1直接用
		
		2.1.2.2 生产版本：
		
		2.1.2.3 如果需要使用原生 ES Modules,将以下构建文件加入即可：
		
			
	
	2.1.3：NPM模式：
		
		在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。命令行输入npm install vue即可。

Vue组件

1.组件的定义：

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

2.组件的使用：

2.1 注册组件:
	
	2.1.1 需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：
		
		var MyComponent = Vue.extend({
				
		})
			
	2.1.2 在Vue框架项目中，如果想要其他地方使用这个创建的组件，需要为组件命个名，定义全局变量：
		
		Vue.component('my-component', MyComponent)    //后面为参数
			
	2.1.3 命名之后即可在HTML标签中使用这个组件名称，像使用DOM元素一样。完整示例如下：
		
		html代码：
			
			

			    
			
			
		js代码：
			
			// 定义参数
			var MyComponent = Vue.extend({
			    template: '
This is component!
'
			})

			// 注册组件(组件名后可追加多个参数)
			Vue.component('my-component', MyComponent)

			// 创建根实例
			new Vue({
			    el: '#example'
			})
				
		输出结果：
			
			

			    
This is component!
			
				
	2.1.4 这样的话代码会比较冗余，其实可以在注册时进行定义：
		
		Vue.component('my-component',{
		    template: '
This is component!
'
		})
			
2.2 嵌套组件
	
	2.2.1 组件本身也可以包含组件，下面的parent组件就包含了一个命名为child-component组件，但这个组件只能被parent组件使用:
			
		//定义子组件参数：
		var child = Vue.extend({
			template: '
A custom component!
'
		});
			
		//定义父组件参数：
		var parent = Vue.extend({
		    template: '
Parent Component: 
',
		    components: {
                                //将定义的子组件参数追加至父组件参数
			    'child-component': child		
		    }
		});
			
		//最终调用父组件即可
		Vue.component('parent-component', parent);
			
2.3 动态组件
	
	2.3.1 多个组件可以使用同一个挂载点，然后动态的在他们之间切换。使用保留的元素，动态地绑定到它的is特性。下面的列子在同一个vue实例下挂了home、posts、archive三个组件，通过特性currentView动态切换组件显示：（实际开发中不建议直接操纵DOM元素）
			
		html代码：
			
			

			    Home
			    Posts
			    Archive
			    

			    
			
				
		js代码：
				
			var vue = new Vue({
					
			    el:"#dynamic",
					
		            data: {
		                currentView: "home"
			    },
					
			    components: {
					
			        home:{
				    template: "Home"
			        },
					
				posts: {
				    template: "Posts"
				},
					
				archive: {
				    template: "Archive"
				}
					
			    }
			});
				
		    document.getElementById("home").onclick = function(){
			vue.currentView = "home";
		    };
			
		    document.getElementById("posts").onclick = function(){
			vue.currentView = "posts";
		    };
			
		    document.getElementById("archive").onclick = function(){
			vue.currentView = "archive";
		    };
			
	2.3.2 深入响应式原理
		
		2.3.2.1 如何追踪变化：把一个不同对象传给vue实例作为data的选项，vue.js将遍历它的属性，用Object.defineProperty将它转换为getter/setter。这是ES5特性，所有vue.js不支持IE8或更低版本。
			 
		2.3.2.2 模板中每个指令/数据绑定都有一个对应的watcher对象，在计算过程中它把属性记录为依赖。之后当依赖的setter被调用时 ，会触发watcher重新计算。
				
		2.3.2.3 变化检测问题：vue.js不能检测到对象属性的添加或删除，属性必须在data上才能让vue.js转换它为getter/setter模式，才能有响应。
				
		2.3.2.4  初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。
			
2.4 插槽Slot:
	
	2.4.1 插槽的作用是为了更好的实现组件的组合，特别是父子组件的内容。插槽能够高扩展高复用的实现一个组件包裹另一个组件甚至是多个组件。插槽分为普通插槽和作用域插槽，其实两者很类似，只不过作用域插槽可以接受子组件传递过来的参数。
		
	2.4.2 作用域插槽的用法：
			
		1.在子组件中写slot插槽时，给上属性（这些属性能够被父组件拿到）
		
                    2.在父组件中渲染内容时一般写template标签，并且标签上有个scope属性，这个属性的值为一个对象，就是子组件的slot插槽上所有属性的集合。在父组件中就可以通过scope属性值这个对象操作子组件提供的数据。