vue基础

1 Vue.prototype 详解及使用

在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName = 'My App'

这样 $appName 就在所有的 Vue 实例中可用了，

new Vue({

beforeCreate: function () {

console.log(this.$appName)

}

})

2 事件修饰符

• .stop：阻止事件继续传播

• .prevent：阻止标签默认行为

• .once：执行一次

• .self：使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

• .capture：使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

• .passive 告诉浏览器你不想阻止事件的默认行为

@click.stop="goDetails($event)"

3 computed 从缓存计算出结果 如果值没有变化就不会往下执行 而是直接返回 不支持异步

computed：{

computed1(){

return function(a){

return a+10

}

}

}

4 watch用来监听数据的变化，一旦发生变化可以执行一些其他操作 支持异步

需要在第一次绑定的时候也执行函数，则需要用到immediate属性

deep属性进行深度监听，设置deep：true，当对象的属性较多是，每个属性的变化都会执行handler

watch: { // 简单监听

pageSize(newVal, oldVal) {

console.log(newVal, oldVal)

},

person: { // 对对象进行深度监听

handler(nv) {

console.log(nv)

},

immediate: true,

deep: true

},

'person.name': { // 对对象的某一个属性进行深度监听

handler(nv) {

console.log(nv)

},

immediate: true,

deep: true

}

}

5 组件通信的5种方法

1. 通过 props 传递

props:{ type: String, default:'hello world', required: true}

2. 通过 $emit 触发自定义事件

子组件调用父组件方法

父组件 <mHome @showCityName="updateCityName" />

子组件 this.$emit("showCityName", data);

https://www.cnblogs.com/shenStudy/p/15327718.html

3. 使用 ref

父组件调用子组件方法 this.$refs.子组件的方法

4. EventBus

//配置全局事件总线 Vue.prototype.$EventBus = new Vue()

this.$EventBus.$emit("userInfo", this.user) // 发送用户信息

this.$EventBus.$on("userInfo", payload => { displayUser(payload); // 展示用户信息 })

this.$EventBus.$off('userInfo') // 销毁监听 }

5. Vuex

• state: 数据

• actions:可以包含异步操作

• mutations: 唯一可以修改state数据的场所

• getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）

• modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

https://www.jb51.net/article/264940.htm