1.背景

最近搞了个小项目，写一些小的demo，涉及到bue，再来复习一下，做一些小的项目，多做积累，然后把书读薄，做到熟能生巧

脚手架文档：cli.vuejs.org/zh/

2.学习积累

2.1 Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

2.2 MVVM 模型

M:模型(Model) :对应 data 中的数据

V:视图(View) :模板

VM:视图模型(ViewModel) : Vue 实例对象

2.3 Object.defineProperty()的用法

2.4 事件的处理

@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

event.target和event.target.innerText)

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

2.5 vue组件的使用

Vue中使用组件的三大步骤：定义组件\注册组件\使用组件

2.6 使用 Vue 脚手架

第一步(仅第一次执行):全局安装@vue/cli。npm install -g @vue/cli
使用命令创建项目 vue create xxxx
启动项目, npm run serve
模板项目的结构

我把main.js 改成 console.log(666) 以后，再次 npm run serve就只打印666了

该文件是整个项目的入口文件

使用vue.config.js可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh，这个配置可以关闭代码的检查：lintOnSave:false

2.7 ref 与 props

ref作用:用于给节点打标识 , 读取方式:this.$refs.xxxxxx

props作用:用于父组件给子组件传递数据

props: ['name', 'age', 'setName']

props: {  
    name: String,

    age: Number,

    setNmae: Function 
}

2.8 如何引入插件

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

在main.js 中引入

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

2.9 style scoped属性的作用

写的样式只会在自己的组件内生效，不写的话，组件如果产生冲突，应该是按照引入的顺序，谁先引入谁生效

2.10 Vue 中的自定义事件

通过父组件给子组件传递函数类型的props实现：子给父传递数据

//绑定自定义事件

this.refs.student.$on('demo',this.getStudentName)

//触发Student组件实例身上的demo事件

this.$emit('demo',this.name,666,888,900)

//解绑一个自定义事件

this.$off('demo')

2.11 全局事件总线（GlobalEventBus）

一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线：

这个是在main.js 里面的
new Vue({
	......
	beforeCreate() {
         Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

事件总线使用
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
```
2. 提供数据：this.$bus.$emit('xxxx',数据)
3. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

2.12 消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
1. 安装pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
```
4. 提供数据：pubsub.publish('xxx',数据)
5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

2.13 nextTick

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

2.14 插槽

Template他能包裹元素，但是最终不生成真实的DOM元素 1. 默认插槽 2. 命名插槽 3. 作用域插槽

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意:插槽内容是在父组件中编译后, 再传递给子组件的

2.15 Vuex 开发环境搭建

首先在src/store/index.js 文件

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	
}
//准备mutations——用于操作数据（state）
const mutations = {
	
}
//准备state——用于存储数据
const state = {
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

在main.js 环境中引入

//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

核心概念

• State —— this.$store.state.xxx 取值

• Getter —— this.$store.getters.xxx 取值

• Mutation —— this.$store.commit(“xxx”) 赋值

• Action —— this.$store.dispatch(“xxx”) 赋值

• Module

底层原理

• State:提供一个响应式数据

• Getter: 借助 Vue 的计算属性 computed 来实现缓存

• Mutation: 更改 state 方法

• Action: 触发 mutation 方法

• Module: Vue.set 动态添加state到响应式数据中

2.16 状态data和属性props的区别

状态是组件自身的数据

属性是来自父组件的数据

状态的改变未必会触发更新

属性的改变未必会触发更新

2.17 计算属性

1.减少模板中计算逻辑

2.数据缓存

3.依赖固定的数据类型

2.17 computed和watch

computed能做的，watch都能做，反之则不行

能用computed就尽量用computed

2.18 npm install 和 npm run serve遇到的问题

npm ERR! EACCES: permission denied,解决方案

sudo chown -R jlgl ~/.npm

error:0308010C:digital envelope routines::unsupported

export NODE_OPTIONS=--openssl-legacy-provider

VUE实战入门