vue入门

js脚本
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

npm安装
npm install vue
npm install -g vue-cli

父子组件传值:

父组件传给子组件:
父组件 v-bind:a='aa'
子组件 props:['a']   props:{type:Number,required:true,default:1}

子组件获得父组件数据:
父组件  $children
子组件 this.$parent.attribute

子组件传给父组件:
父组件 子组件实例定义自定义事件:myevent_name
子组件 $emit(myevent_name,data)

父组件获得子组件数据:
子组件实例定义 ref='a'
父组件 this.$refs.a.attribute


非父子组件传值(同一个树结构):
广播(事件中心)
新建vue实例,创建js文件 newVue.js
vue中引用文件 import new from '../newVue.js'
发送方 new.$emit('name',data)
接收方 new.$on(name,function(data){})



provide/inject
非响应式,只有传递可监听对象,对象属性可响应的
父组件
data () {
    return {
        datas: []
    }
},
  provide () {
    return {
      datas: this.datas
    }
  },

任意深层次子组件
inject: ['datas']



不在同一颗树(router动态挂载)
localStorage
sessionStorage

<slot>默认内容</slot>
匿名插槽:   v-slot:default

v-slot   缩写#
具名插槽:带有命名name
child: <slot name='a'>默认内容</slot>
parent: <template v-slot='a'></template>

作用域插槽:子组件传值给父组件,可以使用解构赋值
child:
 <slot name='a' :message='message' @click="handleClick" :msg="msg">默认内容</slot>
parent:
<template v-slot:a="name_random" #a="{msg}">
  
  <button @click="$emit('handleClick', msg)">
    
  </button>
</template>

include exclude max

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件，比如 Profile！ -->
</router-view>

nextTick(()=>{
  doSomething()
})

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。保证子组件更新完毕,再执行方法

父beforeCreate —> 父created —> 父beforeMount —>
子beforeCreate —> 子created —> 子beforeMount —>
子mounted —> 父mounted

父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated

父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

<route-link to=""></route-link>
<route-view></route-view>

get传值(url ?): $route.query
router文件配置: /content      <route-link to=`/content?att=${value}`></route-link>

动态路由传值: $route.params
router文件配置: /content/:newid    <route-link to=`/content/${value}`></route-link>


路由跳转:
this.$router.push({path:'news',query:{} })
this.$router.push({name:'news',params:{} })


路由模式:
new router{
mode:''
hash模式 #
history模式
}

 @/router/index.js
{
     path: '/a',
     name: 'a',
     component:	A,
     meta : {                      //加一个自定义obj
   			requireAuth:true      //这个参数 true 代表需要登录才能进入A
     }
   }
/*to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 跳转页面
*/
import store from '@/assets/store'   //把这个userId获取过来
router.beforeEach((to,from,next)=>{
	if(to.meta.requireAuth){
		if(store.state.userId){
			next()
		}else{
			next({path:'/b'})
		}
	}else{
		next()
	}
})
router.beforeEach((to, from, next) => {
    //权限校验
    let pass = valid(to);
    if(!pass){
        return console.log('无权访问');
    }
    next();
});


afterEach 全局后置钩子
不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
})

lazy  v-model.lazy离开输入框时才同步数据
trim  v-model.trim去掉两边的空格==String.trim()
number v-model.number过滤非数字

stop   阻止冒泡事件
capture 事件捕获阶段执行
self  只在处于目标事件时执行
once  只执行一次的事件
prevent  阻止默认事件,如:a标签默认跳转,双击默认全选
left,right,middle  鼠标的三个按键触发事件

native  监听原生dom事件，非组件事件
keycode 键盘触发事件,常用于回车触发按钮事件