使用

基本使用

模板（插值，指令

computed和watch

class和style

条件

v-show是display：none v-if 是组件销毁重建

循环

要加唯一的key

事件

子调父方法

父调子方法

使用ref：this.$refs.one.oneSubmit()

事件修饰符

按键修饰符

表单修饰符

组件

生命周期

props

v-on和$emit

自定义事件

高级特性

自定义v-model

$nextTick

refs

slot

基本使用

具名插槽

动态组件

异步组件

keep-alive

mixin

directive全局指令

全局权限

const app = createApp(App)
// 实现全局指令
app.directive('auth', (el, binding) => {
  let auths = ['edit', 'delete'];
  let ret = auths.includes(binding.value);
  if(!ret){
    el.style.display = 'none';
  }
});
app.mount('#app')

<button v-auth="'edit'">编辑</button>

https

main.js

import * as http from '@/5_http.js'
//实现全局属性
app.config.globalProperties.$http = http;

get.js

function get(){
  console.log('get request');
}
export {
  get
}

install插件

main.js

//实现插件的初始化
import myplugin from './myplugin.js'
app.use(myplugin, { info: '配置信息' })

myplugin.js

import * as http from '@/5_http.js'
export default {
  install(app, options){
    console.log(options);
    app.config.globalProperties.$http = http;
    app.directive('auth', (el, binding) => {
      let auths = ['edit', 'delete'];
      let ret = auths.includes(binding.value);
      if(!ret){
        el.style.display = 'none';
      }
    });
  }
}