随笔分类 - vue3
摘要：状态管理 src/views/Pinia.vue <script setup> import { ref } from "vue"; import { storeToRefs } from "pinia"; import { useCounterStore } from "../stores/cou
阅读全文
摘要：逻辑复用-组合式函数 src/views/ad/User.vue <script setup> import { useMouse } from "../../js/mouse.js"; import { useFetch } from "../../js/fetch.js"; import { r
阅读全文
摘要：组件 src/views/ad/Comp.vue <script setup> import { ref, provide, readonly, defineAsyncComponent } from "vue"; import DemoComp from "../../components/sim
阅读全文
摘要：响应式状态 src/views/basic/Reactive.vue <script setup> import { ref, reactive, computed, watch, watchEffect } from "vue"; //reactive 响应式对象 只能用于对象、数组和集合类型 c
阅读全文
摘要：事件绑定 src/views/basic/Event.vue <script setup> import { nextTick, ref } from "vue"; function clickA() { console.log("点击了a标签，点击事件传递到了外层p标签"); } function
阅读全文
摘要：表单相关 src/views/basic/Form.vue <script setup> import { ref } from "vue"; const message = ref("hello"); const checked = ref(); const checkedNames = ref(
阅读全文
摘要：模板语法 src/views/basic/Template.vue <script setup> import { ref, reactive, onMounted } from "vue"; //模板语法 const msg = "hello"; const rawHtml = "<span st
阅读全文
摘要：我的vue3学习之路总是学学停停，最开始在18年开发微信小程序，就发现小程序和vue的语法有些相似，然后就去看了vue2的文档，随后忙其它的事情就丢下了。 直到22年又开始捡起来vue3，有了组合式api，语法简明很多，然后又不知道忙什么丢下。。。 前段有些空时间，就把vue3的学习整理下，使用vi
阅读全文
摘要：表单输入绑定 <!-- 文本 (Text) --> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}</p> <!-- 多行文本 (Textarea) --> <textarea v-mode
阅读全文
摘要：vue3学习中被问到一个问题：怎么解决跨域？ 在vue之前的web中，解决跨域的问题最常用有效的方法服务器代码中添加Access-Control-Allow-Origin的响应header，告诉浏览器不阻拦当前地址的请求。假设服务器不允许修改响应header，还有一种称为jsonp的技术，http:
阅读全文
摘要：utils/http.js import axios from "axios"; const http = axios.create({ withCredentials: false, timeout: 30000, baseURL: "http://127.0.0.1:8000", headers
阅读全文
摘要：安装 #运行时依赖 package.json的dependencies npm install sweetalert2 --save #开发时依赖 package.json的devDependencies npm install sweetalert2 --save-dev 新建utils/swee
阅读全文
摘要：之前有使用过bootstrap做过一个简单的加载遮罩层，现把它加入到vue中。 加载遮罩层一般来讲整个app共用一个就可以，因此放到App.vue中，为不影响其它的业务逻辑，放到</template>标签前面 <script setup> import "bootstrap/dist/css/boo
阅读全文
摘要：使用自动化构建工具vite搭建新项目 #某个目录下执行 npm create vite@latest 按照提示初始化项目，并按照提示： cd vite-project npm install npm run dev 生成目录结构如下： 安装常用的类库 npm install vue-router -
阅读全文
摘要：Class 与 Style 绑定 在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class <!-- 对象语法 active 这个 class 存在与否将取决于 data property
阅读全文
摘要：应用 & 组件实例 //应用实例 const app = Vue.createApp({ data() { return { count: 4 } } }) //组件实例 const vm = app.mount('#app') console.log(vm.count) // => 4 生命周期
阅读全文
摘要：突发奇想要将vue3作为js库嵌入到html中使用，顺便学习下vue3的基础知识 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 方法有用 --> <!-- <script src=
阅读全文