vue不用脚手架封装组件的方法

第一中：

	创建一个vue实例
		

		// mycom2 就是引入封装的公共组件			
		
	
	
	
	
	
		var app = new Vue({
			el: '#app',
			data: {},
			method: {},
		
		});
		//开始封装一个公共的组件
		Vue.component('mycom2', {
			template: '#tmp1'
		})

第二种封装一个私有的组件

	
	

		

			
		
	

			

	var SY = new Vue({
			el: '#SY',
			data: {},
			method: {},
			components: {
				// login 是组件名
				login:{
					template:'#tmp12'
				}
			}
		})

组件里封装 data 和方法
组件中的 data 有点不一样，实例中的 data 可以是一个对象 但是组件中的 data 必须是一个 方法 function 还必须在 function 方法中 return 返回一个对象

		

		//使用封装的组件
			
		
		
		//封装组件
			
		var app = new Vue({
			el: "#app",
			data: {},
			methods: {}
		})

		//封装的组件
		Vue.component('mycom1', {
			template: '#zujian',
			data: function() {
				return {
					msg:'1'
				}
				
			},
			methods:{
				dianji(){
					this.msg ++
				}
			}
		})