Nekoaimer

# 1.ref (reference 引用) 基本使用 App 为根组件 下面 Home 例子都被此组件引用 vue// App.vue <template> <div> <home></home> </div></template><script>import Home from "./Home.vue";export default { components: { Home,...

# 1.reactive 基本使用 App 为根组件 下面 Home 例子都被此组件引用 vue// App.vue <template> <div> <home></home> </div></template><script>import Home from "./Home.vue";export default { components: { Home,...

# 1. 首先 step 里面是没有 this 的 在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。 — coderwhy vue<template> <div></div></template><script>export default { setup() {...

# 1.mixins 基本使用 # demoMixin jsdemoMixin.jsexport const demoMixin = { data() { return { message: "你好呀，李银河" } }, methods: { foo() { console.log("demo mixin foo"); } }, created() {...

# 1.install & import vue/* 需要使用到的库 */npm install animate.css npm install gsapnpm install lodashmain.jsimport "animate.css" // 引入到 main.js# 2.animate 基本使用 vue// App.vue<template> <div class="app"> <div><button @click="isShow =...

# 1.transition 基本用法 v-enter-from：定义进入过渡的开始状态。在原始被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to：定义进入过渡的介绍状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡 /...

# 1.v-model 使用 methods 双向绑定 # App vue// App.vue<template> <div> <!-- <input v-model="message">--> <!-- 元素上使用 v-model 相当于做了两件事情：属性和事件 <input :value="message" @input="message = $event.target.value" /> -->...

# 1.beforeCreate、Created、beforeMount、mounted # App vue// App.vue<template> <div> <home></home> </div></template><script>import Home from "./Home.vue";export default { components: { Home,...

# 1.$refs # App vue// App.vue<template> <div> <!-- 绑定到一个元素上 --> <h2 ref="title">Neko</h2> <!-- 绑定到一个组件实例上 --> <home ref="Home"></home> <button...

# 1. 动态组件 用 if else 实现 # Home vue// Home.vue <template> <div> Home组件 </div></template><script> export default { name: "home", }</script><style scoped></style># About vue//...