Vue 学习笔记

1. 特点

1.1. 特征

  • 支持JXS
  • 支持TypeScript

1.2. 优点

  • 入门容易
  • 学习成本较低
  • 官方中文文档

1.3. 缺点

  • 插件较少
  • 版本兼容导致语法混乱
  • CamelCase与kebab-case支持混乱

2. 语法

2.1. 应用/组件 

import { createApp } from 'vue';
const app = createApp({ // 实例化
  data: {test: 0},
  methods: {func() {}},
  computed: {test() {}}, // 计算
  watch: {test() {}}, // 监听
});
app.$data.test; // 数据
app.func(); // 方法
app.mount('#test'); // 挂载DOM
app.unmount(); // 卸载DOM
app.component('test', {}); // 组件
app.config = { // 配置
  errorHandler: () => {}, // 错误处理
  warnHandler: () => {}, // 警告处理
  globalProperties: {}, // 全局属性
  optionMergeStrategies: {test: (parent, child) => {}}, // 合并策略
  performance: false, // 开发选项
  compilerOptions: { // 编译选项
    isCustomElement: (tag) => true, // 自定义元素识别
    whitespace: 'condense', // 压缩空格
    delimiters: ['{{', '}}'], // 模板边界符
    comments: false, // 保留注释
  },
};
app.component('test', {
  created(element) {}, // 绑定
  beforeMount(elementl) {}, // 挂载前
  mounted(element) {}, // 挂载
  beforeUpdate(element) {}, // 更新前
  updated(element) {}, // 更新
  beforeUnmount(element) {}, // 卸载前
  unmounted(element) {}, // 卸载
}); // 标签
app.mixin({}), // 混合
app.provide('test', ''); // 注入
app.use(plugin); // 插件
app.version; // 版本号

2.2. 指令

指令说明
<v-text=”test”></><>{{test}}</>
<v-html=”‘<>test</>’”></><><>test</></>
<v-show=”false”></><style=”display: none;”></>
<v-if=”true”></>
<v-else-if=”false”></>
<v-else></>		判断
<v-for=””val in array””></>
<v-for=””(val, key) in array””></>
<v-for=””(val, key, index) in object””></>		循环
<v-on:test=””></>
<@test=””></>
<@[event]=””></>
<@test.stop=””></>
<@test.prevent=””></>
<@test.capture=””></>
<@test.self=””></>
<@test.once=””></>
<@test.{key}=””></>
<@test.left=””></>
<@test.right=””></>
<@test.middel=””></>
<@test.passive=””></>		绑定事件
<v-bind:test=”test” />
<v-bind=”{test: a, ‘test’: b}” />
<:test=”” />
<:[key]=”” />
<:class=”{test: “”}” />
<:class=”[class, class]” />
<:class=”[class, {test: “”}]” />
<:prop=”test” />
<:test.camel=”test” />
<:test.prop=”test” />
<:test.attr=”test” />		绑定原生对象
<v-model=”” />
<v-model.lazy=”” />
<v-model.number=”” />
<v-model.trim=”” />		绑定input,select,textarea
<v-slot=”” />
<v-pre></>不编译
<v-cloak></>编译结束再渲染
<v-once></>只渲染一次
<v-memo=”[test]”></>只有对象改变才渲染

2.3. 生命周期

beforeCreate() // 创建前
created() // 创建 完成实例初始化
beforeMount() // 挂载前
mounted() // 挂载 本组件渲染完成
beforeUpdate() // 更新前
updated() // 更新 重新渲染本组件
activated() // 激活 渲染时
deactivated() // 未激活 渲染时
beforeUnmount() // 卸载前
unmounted() // 卸载
errorCaptured(err: Error, instance: Component, info: string) => ?boolean // 错误
renderTracked(event: DebuggerEvent) => void // 被跟踪信息 重新渲染时
renderTriggered(event: DebuggerEvent) => void // 跟踪信息 重新渲染时

2.4. 组件

const app = Vue.createApp({components: {'TestTest': {}}}); // 局部注册
app.component('TestTest', {}); // 全局注册

const element = <Test test="">; // 静态值
const element = <Test :test="">; // 动态值
const component = {template: `<></>`}; // 模板
const component = {props: ['test']}; // 接收数据 // 使用 this.$props.test
const component = {props: {test1: Number, test2: {type: String, required: true}}}; // 接收数据 并验证

const element = <Test id="test">; // 根DOM值 继承属性
const element = <Test @click="">; // 根DOM值 继承事件
const component = {inheritAttrs: false}; // 禁用继承

const component = {emits: ['test']}; // 定义事件
const component = {emits: {test: {click: null}}}; // 定义事件 并验证

const element = <Test v-model:test="">;
const component = {emits: ['update:title'], template: `<@input="$emit('update:test', $event.target.value)" />`}; // 绑定值
const element = <Test val="" @test="$event">;
const component = {props: ['val'], template: `<@click="$emit('test', '')>{{ val }}</>` />`}; // 绑定事件

const element = <Test v-model.temp="test" />;
const component = {methods: {emitValue(e) {if(this.modelModifiers.test){}}}}; // 修饰符

const element = <Test><template v-slot:test></template><template v-slot:default></template></Test>;
const component = {template: `<><slot name="test"></slot><slot></slot></>`}; // 插槽

const component = {provide() {return {test: Vue.computed(() => '')}}}; // 提供
const component = {inject: ['test']}; // 注入

const element = <><keep-alive><component :is="Test"></component></keep-alive></>; // 动态组件

const component = defineAsyncComponent(() => new Promise((resolve, reject) => {resolve({})})); // 异步组件 声明
const component = defineAsyncComponent(() => import('Test.vue')); // 异步组件 导入

const component = {template: `<ref="test" />`, mounted() {this.$refs.test.click()}}; // 引用