vue笔记
1，事件修饰符。.native - 监听组件根元素的原生事件,主要是给自定义的组件添加原生事件
如果在一个组件上定义一个指令事件，必须要用.native。 如：<temp @click.native="Fun"><temp>
1-1，v-on:click.once=“Fun” //只有在第一次点击时会执行，再次点击不会起作用
1-2, 点击nav 只弹出1，阻止弹2
<header v-on:click='alert("1")' >
<nav v-on:click.stop="alert('2')" ></nav>
</header>
2，<p v-text="'hello ' + world"></p> = <p v-text="`hello ${world}`"></p>模板字符串，hello为字符串，world为变量
3，关于路由
Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ Vue.afterEach(function(to,form))/*在跳转之后判断*/ router.beforeEach((to,from,next)=>{ let tokenVlaue = localStorage.getItem('STORAGE_TOKEN'); if(!tokenVlaue){ if(to.name == 'Login'||to.name == 'Registered'||to.name == 'ForgetPassword'){ next(); }else{ next({ path: '/Login' }) } }else{ next(); } })
4，在 created 和 mounted 阶段，如果需要操作渲染后的视图，也要使用 nextTick 方法。
- v-show是css切换，v-if是完整的销毁和重新创建。
- 使用 频繁切换时用v-show，运行时较少改变时用v-if
- v-if=‘false’ v-if是条件渲染，当false的时候不会渲染
new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // cityName发生变化时执行，初始化时不执行 } } }) // 也可以在所监听的数据后面直接加字符串形式的方法名 watch: { cityName: 'nameChange' }
8-2, immediate和handler
new Vue({ el: '#root', data: { cityName: '' }, watch: { cityName: { handler(newName, oldName) { // immediate值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。 }, immediate: true } } })
8-3, deep 数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。
new Vue({ el: '#root', data: { cityName: {id: 1, name: 'shanghai'} }, watch: { cityName: { handler(newName, oldName) { // 设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，只需cityName.name即可 }, deep: true, immediate: true } } })
9, 动态属性添加。Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：
Vue.set(vm.someObject, 'b', 2)或者this.$set(this.someObject,'key',value) var app=new Vue({ el:"#app", data:{ arr:['北京','上海','天津','重庆'] } }); Vue.set(app.arr,0,'北京天安门'); Vue.delete(app.arr,0); // 此种修改相比app.arr[0]='北京天安门'会刷新视图
10,浅拷贝 Object.assign();
复制： var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 } 合并： var o1 = { a: 1 }; var o2 = { b: 2 }; var obj = Object.assign(o1, o2); console.log(obj); // { a: 1, b: 2 } console.log(o1); // { a: 1, b: 2}, 注意目标对象自身也会改变。具有相同属性的对象，同名属性，后边的会覆盖前边的。 // vue中使用：Vue组件可能会有这样的需求：在某种情况下，需要重置Vue组件的data数据。此时，我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取该组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态。另外Object.assign添加属性不会触发更新，可以创建一个新对象，让他包含原来的属性： this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
11, 组件通信：
11-1,父组件传值给子组件，在父组件内可通过 this.$children(this.$children[0].childMes可以得到子组件中 childMes变量的值，但不可给其赋值，赋值得通过data里的值改读取子组件中的值。props 是单向绑定，不可在子组件中赋值。如下，父组件将信息'message' 传到子组件childMessage中
//子组件 1，<script> export default { name: 'LeftNav', props: ['childMes'], } </script> //父组件 <Leftnav :childMes="message"></Leftnav> import Leftnav from '../common/LeftNavItem' components: { Leftnav },
11-2， 父组件向子组件传递事件方法，子组件通过 $emit 触发事件，回调给父组件。使用$parent可以访问父组件的数据
//子组件 <button @click="toParent">toParent</button> methods: { toParent() { //子组件通过 $emit 可以触发事件，并传递数据 this.$emit('mesFunc', 'from children'); // 第一个参数：父组件传递过来的事件 // 第二个参数：要传递到父组件的数据 console.log(this.$parent); } } //父组件 <Leftnav :childMes="message" @mesFunc="func"></Leftnav> // 将事件方法 mesFunc 传递到子组件 func(data) { this.name= data; }
11-3, 组件通信--中央事件总线使用来兄弟组件之间的相互通信，其实也可用于父子组件的相互通信
Vue.prototype.bus = new Vue(); // 每一次使用时候只需要 this.bus.$emit("....",'.....');
this.$parent.Bus.$on（'事件'，cb） this.$parent.Bus.$emit（'事件'，‘参数’）$root===$parent
