vue2 ​

/*
vue都学习什么东西？
1.vue.js 核心
2.devTools调试工具
3.vue cli 脚手架
4.vue router 路由
5.vuex  状态集中化管理工具
6.vue服务端渲染
7.elementui和vue联动 vue-element-admin
*/

/*
学习vue的过程
(1.学习框架如何使用，如何通过框架实现自己目标)
(2.尝试阅读框架的底层代码，源码，逐渐熟悉源码，能在源码上进行二次开发)
(3.熟读源码，熟练进行整合和二次开发)
(4.精通源码)
*/

// 如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。

// 用一个含有相同元素的数组, 去替换原来的数组是非常高效的操作。
this.arr = this.arr.filter(e => e);
// 或者用包装后的方法
this.arr.splice(oldValue, 1, newValue);

// vue中提供了一些方法，用于强制刷新，或者设置响应式。
this.$forceUpdate();

Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)

// 写法一： getter写法
computed:{
	fullName(){
		return this.firstName + '' + this.lastName
	}
}
// 写法二: getter配合setter写法
computed:{
	fullName: {
		getter(){
			return this.firstName + '' + this.lastName
		}
		setter(newValue){
			var names = newValue.split(' ')
		    this.firstName = names[0]
		    this.lastName = names[names.length - 1]
		}
	}
}
// 此时，如果设置了fullName的值，会同步修改this.firstName和 this.lastName
vm.fullName = 'John Doe';

data(){
	return{
		msg: '',
		answer: 'ddd'
	}
},
watch:{
	// 监听属性msg的变化
	msg: function(newValue, oldValue){
		this.answer = 'ddddd'
		console.log(newValue);
	}
}

watch:{
	msg: {
	    deep: true,//表示深度侦听
	    immediate: true,//表示立即侦听
	    handler(newValue, oldValue) {
	    	// 将原先的匿名函数，改为handler函数
	        if (oldValue) {
	            console.log(oldValue.name);
	        } else {
	            console.log(oldValue);
	        }
	        console.log('obj发生了变化');
	    }
	}
}

// 其中，obj的写法和vue实例的配置项一样
let Cobj = {
	template: `<h1>{{ msg }}</h1>`,
	data(){
		return{
			msg: 'ddd'
		}
	}
}
let Com1 = Vue.extend(Cobj)
// 例如new为组件实例,就可以跳过注册,直接使用
new Com1().$mount('#app')

// 当定义的一个对象，符合Vue实例的格式时，
// 注册时会被自动识别/转换为组件。
let com1 = {
	template: `<h1>{{ msg }}</h1>`,
	data(){
		return{
			msg: 'ddd'
		}
	}
}

let Com1 = {
	template: `<h1>{{ msg }}</h1>`,
	data(){
		return{
			msg: 'ddd'
		}
	}
}
// 使用Vue.component(name, obj)注册全局组件。
Vue.component('Coma',Com1)

// 使用选项components: {}注册局部组件
new Vue({
	components: {
		Coma: Com1
	}
})

export default {
	data(){
		return{ 
			msg: '我是消息'
		}
	},
	beforeCreate(){
		// 创建之前, vm实例即将创建
	},
	created(){
		// 创建实例后，可以操作实例的选项，但是未渲染模板，不能操作dom
	},
	beforeMount(){
		// 挂载之前，此时已经渲染好了模板，vnode -> node
	},
	mounted(){
		// 此时已经将真实dom挂载到了容器上。
	},
	beforeUpdate(){
		// 数据更新之前
	},
	Updated(){
		// 数据更新之后
	},
	beforeDestroy(){
		// 卸载之前
		// 即将卸载监听器选项，子组件，事件监听等等。
	},
	destroyed(){
		// 卸载之后
	}
}

// 以一个v-color指令为例
// html:   <span v-color:theme="mycolor">内容</span>
// 全局指令
Vue.directive('color',{
	bind: function(el,binding, vnode){
		// 只调用一次,用于作用一次的指令, 
		// 指令第一次绑到元素身上生效.
		// el: 被绑元素
		// binding: 指令相关的信息
			// binding.value 就是绑定值, v-color="mycolor"中的mycolor
			// binding.name 就是指令名称, v-color中的'color'
			// binding.arg 就是绑定时的传参,v-color:theme中的theme
			// binding.modifiers 就是绑定时的修饰符对象,v-color.foo中的{foo: true}
		// vnode: Vue编译生成的虚拟节点
		el.color = binding.value
	},
	inserted:function(el,binding,vnode){
		//...
	},
	update:function(el,binding,vnode){
		//...
	},
	componentUpdated:function(el,binding,vnode){
		// ...
	},
	unbind:function(el,binding,vnode){
		// ...
	}
})

export default {
		data(){
			return{

			}
		},
		directives: {
			color: {
				bind: function(el, binding){
					el.color = binding.value
				}
			}
		}
	}

Vue.filter('toLowerCase', function(value){
	return value.toLowerCase();
})
// 使用, 在{{}}中, 或者在v-bind中
// <span>{{ msg | toLowerCase }}</span>
// <input :value="msg | toLowerCase">

export default {
	data(){
		return {
			msg: 'dsFFWEsAsdadD'
		}
	},
	filters: {
		toLowerCase: function(val){
			return val.toLowerCase();
		}
	}
}

let myMixins = {
	data(){
		return{
			msg: 'aaaa',
			name: 'admin'
		}
	},
	methods: {
		handlerA(){
			console.log(this.msg)
			console.log(this.name)
		}
	}
}

export default {
	data(){
		return{
			name: 'test'
		}
	},
	mixins: [mixin], //选项合并
	created(){
		this.handlerA(); //aaaa   test
	}
}

// 使用provde, 类似于data的写法, 返回一个对象或者方法给后代使用
data(){
	return{
		msg: 'dddd'
	}
},
provide: function(){
	return {
		msg: this.msg,
		updataMsg: function(){
			this.msg = 'aaaa'
		}
	}
}

// 使用inject, 类似于props写法, 使用父提供的数据
inject: ['msg','updataMsg']

// 在main.js中注册一个属性，作为事件总线
Vue.prototype.$EventBus = new Vue();

// 在A组件中，使用$on 订阅事件, 注册事件总线的事件，发送数据。	
this.$EventBus.$on('msg', '123')

// $on 注册订阅事件，同时发送数据
this.$EventBus.$on('sayHello','hello')

// $emit 触发总线的事件，发布事件，接收数据
this.$EventBus.$emit('sayHello',(data)=>{
	this.msg = data;
})

// 在B组件中，使用$emit, 触发事件总线的方法，接收数据。
this.$EventBus.$emit('msg', (data) => {
		this.msg = data;
})

// 在组件被销毁前，需要将事件监听移除，防止重复后创建监听
beforeDestory(){
	this.$EventBus.off('msg')
}

// main.js 使用插件
import MyPlugin from '@/plugin/MyPlugin'
Vue.use(MyPlugin, {message: 'hello'})
// 当Vue.use(MyPlugin)时, Vue会执行MyPlugin.install, 并且传入Vue 和options作为实参.


// src/plugin/MyPlugin/index.js
const install = function(Vue, options){
	// 使用Vue.extend({})创建出来的,
	// 都是组件构造器,
	// 需要注册或者new一下才能变为实例, 以使用或挂载.
	const ComponentConstructor = Vue.extend({
		data(){
			return{
				msg: options.message
			}
		}
	})

	// 注册全局方法
	Vue.prototype.$message = function(){
		// 创建组件实例,以便于直接挂载.
		const coma = new ComponentConstructor();
		coma.$mount()
		document.body.append(coma.$el);

	}

	// 也可以扩展已经有的单文件组件, 再注册一下,变为实例,且全局使用.
	const ComponentConstructor2 = Vue.extend(Message);
	// 也可以全局注册组件构造器, 注册为单个组件实例
	Vue.component('comb', ComponentConstructor2);
}

const MyPlugin = {
	install
}
export default MyPlugin

// 定义路由对象
// router/index.js
import VueRouter from 'vue-router'
// 引入VueRouter

const routes = [
	{
		path: '/',
		// 路由重定向
		redirect: '/home',
		beforeEnter: (from,to,next)=>{
			// 定义局部路由守卫.
			next()
		}	
	},
	{
		path: '/home', //路径, 路由信息之一
		name: 'home', //组件名, 路由信息之一
		component: ()=>imports('@/views/Home.vue'), //显示组件
		children: [  //子级路由
			{
				path: 'add',  //子级路由不加"/"
				component: ()=>imports('@/views/HomeAdd.vue'),
				meta: {  //路由元信息, 可以使用$route.meta.xxx获取
					icon: "add"
				}	
			}
		]
	}
]


// 创建路由实例对象
const router = new VueRouter({
	routes,
	mode: history,   //历史模式路由对象
})

// 定义路由的全局前置路由守卫
router.beforeEach((from, to, next) => {
	// 假设已经引入了getToken方法,用于获取是否有token
	if(to.path != '/login' && getToken()){
		next() //放行
	}
	next('/login')
})

// 将路由对象暴露出去
export default router


// 使用路由对象
// main.js
import router from '@/router'
import App from './App'

// 将路由对象,添加到配置项中
new Vue({
	render: (h)=>{
		h(App)
	},
	router
})

created(){
	// 添加新的路由规则
	this.$router.addRoute({
		path: '/about',
		name: 'about',
		component: ()=> imports('...')
	})

	// 添加新的路由规则到, 特定父级name的路由下面
	this.$router.addRoute('home',{
		path: '/del',
		name: 'del',
		component: ()=> imports('...')
	})
	// 删除name为del的路由
	this.$router.removeRoute('del');

	// 判断是否有个name为del的路由
	this.$router.hasRoute('del');

	// 获取一个包含所有路由的数组。
	this.$router.getRoutes()

	/*
	router.beforeEach((from,to,next) => {
		next()
	})
	*/

	console.log(this.$route.params)  //路由参数
	console.log(this.$route.meta)	//路由元信息
	console.log(this.$route.name)	//路由名称
	console.log(this.$route.path)	//路由路径
	console.log(this.$route.fullPath)	//路由全路径
}

// 分模块处理
// 每个模块有自己的state, mutations和actions(处理异步)
// 作用分别类似于data, methods
const moduleA = {
	state: {
		msg: 'hello'
	},
	mutations: {
		// state表示状态数据
		handleEdit(state, payload){
			state.msg = payload
		}
	},
	actions: {
		// context表示模块实例
		asynchandleEdit(context,payload){
			context.commit('handleEdit','olleh')
		}
	}
}
// 类似于计算属性
const getters = {
	UpperMsg: (state) => state.moduleA.msg.toUpperCase();
}

// 暴露store
const store = new Vuex.store({
	getters,
	modules: {
		moduleA: moduleA
	}
})

export default store

// main.js
import store from '@/store/index.js'
new Vue({
	store
})

// 使用store中的数据
// 提交mutations
this.$store.moduleA.commit('handleEdit', data);
// 分发actions
this.$store.moduleA.dispatch('asynchandleEdit', data);
// 使用state的数据
$store.moduleA.state
// 使用getters的数据
$store.getters.UpperMsg