![](https://img-blog.csdnimg.cn/ca207f6f23be4fb685d4c1df4da90725.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 75
总结 Vue 知识点
CEZLZ
这个作者很懒,什么都没留下…
展开
-
简单学习一下 Pinia
文章目录引入 Pinia创建 Store在组件中读取 Store 数据在组件中修改 Store 数据对 Store 进行解构修改 Store 状态数据的多种方式Getters 的使用Store 的互相调用引入 Pinia首先在 main.ts 中引入 pinia,通过 createPinia 创建 pinia 实例,然后挂载到 Vue 根实例上。import { createApp } from 'vue'import App from './App.vue'import { createPini原创 2022-03-18 17:52:39 · 1989 阅读 · 0 评论 -
事件修饰符
文章目录1️⃣ `.stop`2️⃣ `.prevent`3️⃣ `.capture`4️⃣ `.self`5️⃣ `.once`6️⃣ `.passive`1️⃣ .stop作用:阻止单击事件继续传播(阻止事件冒泡和事件捕获)<template> <div @click="divClick"> <button @click="btn1Click">按钮_1</button> <button @click.stop="btn2.原创 2021-10-18 12:07:00 · 173 阅读 · 0 评论 -
Vue 通信方式
文章目录1 各种组件之间通信方式2 祖孙组件之间通信3 父子组件之间通信4 兄弟组件之间通信5 任意组件之间通信1 各种组件之间通信方式2 祖孙组件之间通信对于组件层次结构比较深的的情况,祖先组件使用 provide 选项来提供数据,子孙组件使用 inject 选项来使用这些数据。<body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></scri.原创 2021-09-16 16:10:05 · 159 阅读 · 0 评论 -
可复用 & 组合--④:Teleport
Teleport基本用法Teleport 提供了一种方法,允许我们控制在 DOM 中哪个父节点下渲染 HTML。默认情况下<body> <div id="app"> <my-component></my-component> </div> <script src="https://unpkg.com/vue@next"></script> <script> const {原创 2021-08-18 15:57:22 · 199 阅读 · 0 评论 -
可复用 & 组合--③:自定义指令
自定义指令简介除了默认内置的指令(列如 v-model 和 v-show),Vue 也允许注册自定义指令。比如:页面加载时,input 元素获得焦点。通过注册全局指令实现<body> <div id="app"> <input type="text" v-focus /> </div> <script src="https://unpkg.com/vue@next"></script> <scr原创 2021-08-18 15:36:24 · 138 阅读 · 0 评论 -
Vue:获取 select 标签的说明文本
需求:获取 select 标签的说明文本方法:给 select 标签绑定 ref 属性,通过下列方法来获取对应的 select 的说明文本。this.$refs[xxx][0].selectedOptions[0].labelthis.$refs[xxx][0].selectedOptions[0].innerHTMLthis.$refs[xxx][0].selectedOptions[0].innerTextHTML<tr v-for="v in list" :key="v.i原创 2021-03-29 11:29:24 · 1092 阅读 · 0 评论 -
使用命令创建 VUE 项目
第一步:检查 vue/cli 的版本只有当 vue/cli 的版本高于 4.0 才可以使用命令创建 vue 项目第二步 使用 vue create 项目名 创建项目项目名不能包含大写字母,否则会创建失败第三步:选择默认配置还是手动配置选项一:默认配置选项二:手动配置(选择了手动配置)第四步:根据项目需求选择配置项空格:选中或取消a:全选或全取消上下箭头:移动到某一项回车:进入下一步(选择了1、4、5、6、7)Babel:Babel 编译器,可以将高级语原创 2021-03-23 23:50:48 · 1278 阅读 · 0 评论 -
NProgress 的使用
NProgress 的使用NProgress 是前端轻量级 web 进度条插件安装NPMnpm install nprogress --save或yarn add nprogressCDNhttps://unpkg.com/nprogress@0.2.0/nprogress.jshttps://unpkg.com/nprogress@0.2.0/nprogress.css基本使用NProgress 一般搭配路由守卫使用import NProgress from 'npro原创 2020-08-24 14:15:27 · 8202 阅读 · 2 评论 -
Vue-ls 详解
Vue-ls 的详解官方网址作用Vue-ls 是 Vue 的一个插件,用于操作 Local Storage(本地存储)、Session Storage(会话存储)、Memory(内存存储)。安装CDNhttps://unpkg.com/vue-lsNPMnpm install vue-ls --saveYarnyarn add vue-ls使用import Vue from 'vue'import Storage from 'vue-ls'// vue-ls原创 2020-08-21 15:14:31 · 18441 阅读 · 3 评论 -
axios 在 Vue 中的三种使用方式
axios 在 Vue 中的使用方式axios 是一个库,不是 Vue 中的第三方插件,所以使用时不能通过 Vue.use() 来安装。绑定到原型链一般在项目的入口文件 main.js 中引入并绑定到原型链上// main.jsimport Vue from 'vue'import axios from 'axios'// 绑定到原型链上Vue.prototype.$http = axiosaxios.defaults.baseURL = 'https://www.baidu.com/'原创 2020-08-20 14:26:32 · 931 阅读 · 0 评论 -
VUE -- 前端项目初始化步骤
步骤 安装 Vue 脚手架 通过 Vue 脚手架创建项目:vue ui(打开ui面板) 配置 Vue 路由 配置 Element-UI 组件库 配置 axios 库 初始化 git 远程仓库 将本地项目托管到 Github 或 码云 中 第一步:安装 Vue 脚手架第二步:通过脚手架创建项目1 打开 c...原创 2020-05-05 14:09:49 · 342 阅读 · 0 评论 -
Vue.js的安装方法
第一种方法:独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用<script>标签引入下载Vue.js:https://vuejs.org/js/vue.min.js下载后命名为vuejs.org(名字随意,但后缀名一定要org)。如图:接下来就是引入到index.html里面。如图:第二种方法:使用CDN方法以下推荐几个CDN:...原创 2020-02-01 11:51:37 · 465 阅读 · 0 评论