1.9k words 2 mins.

# 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.4k words 1 mins.

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

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

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

# 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 =...
6.2k words 6 mins.

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

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

# 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,...
2.4k words 2 mins.

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

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