vue

阻止默认--e.preventDefault(); --e.returnValue = false

<a href="http://www.baidu.com" @click.prevent/>百度一下</a>

<a href="http://www.baidu.com" @click="aaa($event)"/>百度一下</a>
methods:{
    aaa(event){
        event.preventDefault()
    }
}

阻止冒泡 -- e.stopPropagation()，--e.cancelBubble = true

<span @click="fn1">
    fn1--解构是fn1包裹fn2和fn3
    <p @click.stop="fn2">fn2</p>
    <p @click="fn3($event)">fn3</p>
</span>

fn1() {
    console.log(1);
},
fn2() {
    console.log(2);
},
fn3(event) {
    console.log(3);
    event.stopPropagation();
}

指令

v-html 可以解析标签

v-text 不解析标签

v-bind:属性名 绑定动态属性 简写 :属性名

v-on:click="事件名" 绑定事件 简写 @click

v-show

v-for

v-if

v-else-if

v-else

v-model

v-once 只渲染元素和组件一次

v-slot 插槽

插槽

默认插槽：当前组件引用的子组件内 直接写的代码会默认在当前组件显示

具名插槽：当前组件引用的子组件内 ↓

<Child>
    <template slot="home">
        <p>home的占位</p>
    </template>
</Child>

对应子组件内有的slot

<slot name="home"></slot>

自定义指令

全局指令

//main.js内 Vue实例之前
Vue.directive('color',{
   inserted(el,obj){
       //el 当前元素
       //obj对象内有 name是color value是指令的值
       el.style.color=obj.value
   }
})

html里
v-color="'red'"

组件内指令

//生命周期后续写
directives:('color',{
    inserted(el,obj){
        ......
    }
})

全局组件

//main.js Vue实例之前
import All from '../views/All'
Vue.component('my-all',All)

//组件里直接使用 <my-all></my-all>

vuex

新建store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{},
    getters:{},
    mutations:{},
    actions:{}
})

export default store

main.js里还要注册store

组件里使用

import {mapState} from 'Vuex'

computed:{
    ...mapState(['data'])
}

守卫

//全局前置守卫 拦截所有的路由 做登录判断
router.beforeEach((to,from,next)=>{
  next()
})

//全局后置守卫 设置document.title信息 没有next 不拦截路由
router.afterEach((to, from) => {})
//路由独享守卫
{
    path:"/home",
    component:Home,
    beforeEnter:(to,from,next)=>{
        next()
    }
}
//组件内守卫
beforeRouteEnter 没this 实例没创建
Update 路由变化执行
Leave   离开组件调用

class三元样式

:style="true?'border:5px solid red':null"