![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 53
Biu_Destiny
某普通的计算机专业大学生
展开
-
Vue脚手架的入门基础(五)—— 关于Vuex的简单使用
Vue脚手架的入门基础(四)—— 关于Vuex的简单使用0.配置Vuex1.原理图2.使用vuex① 创建store② 引入store③ 使用storeVuex其实有点像React+umi里面的DVA,和vue全局事件总线来比更加正规灵活一点。0.配置Vuex# yarn方式安装yarn add vuex# npm方式安装npm i vuex1.原理图以下为个人理解,主要方便记忆,vuex其实相当于构建了一个全局数据仓库,state就是全局数据,Mutations则是数据管理员,只有原创 2021-09-22 14:13:21 · 572 阅读 · 0 评论 -
Vue脚手架的入门基础(四)—— 关于插槽Slot
Vue脚手架的入门基础(四)—— 关于插槽1.什么时候用插槽2.插槽的三种使用方式① 默认插槽② 具名组件③ 作用域组件1.什么时候用插槽插槽其实就是一个Vue组件复用时候,某些部分可能需要使用该Vue组件的对象自定义。这样说比较笼统,这边给一个需求就知道了。下图是三个Vue组件的复用,除了背景Card,标题,卡片中的内容是自定义的,也就是用卡片的外部对象决定的,决定里面放的是图片、视频、列表、还是超链接。2.插槽的三种使用方式① 默认插槽其实就是最基础的插槽调用:1.定义了一个Catego原创 2021-09-18 15:31:09 · 390 阅读 · 0 评论 -
Vue脚手架的入门基础(三)—— 关于ref的使用
Vue脚手架的入门基础(三)—— 关于ref的使用ref是Vue提供的一个用来替代id的东西我们实现一个显示指定标签DOM的功能,先用平时的id标签属性来实现然后我们用ref标签属性来解决这个问题仔细看发现两个拿到的东西不一样了,id方法拿到的是渲染后的真实DOM内容,但是ref方法拿到的是HelloWorld这个VueComponent组件对象。...原创 2021-09-08 14:27:16 · 245 阅读 · 0 评论 -
Vue脚手架的入门基础(二)—— 项目结构
Vue脚手架的入门基础(二)—— 项目结构相对react的umi脚手架,vue的脚手架文件已经简单很多了。先看看那些外面的配置文件,主要看package.json吧,别的一般不太会去改。然后我们看看src里面的,重点来了,我们按照项目执行后的顺序来讲。在我们执行了yarn run serve之后启动服务器,首先找到的入口文件就是main.js,main.js引入了App.vue。App.vue是一个司令组件,里面引入所有项目要用到的子组件(这里引入HelloWorld组件),他自己本身没有实原创 2021-09-08 13:54:50 · 419 阅读 · 0 评论 -
Vue脚手架的入门基础(一)—— 脚手架搭建
Vue脚手架的入门基础(一)—— 脚手架搭建0.前言1.命令安装 VueCLI2.创建Vue脚手架项目3.运行Vue脚手架项目0.前言1.Vue脚手架就是我们说的Vue CLI (command line interface 命令行接口工具)2.1.命令安装 VueCLI首先默认已经有node环境了,这里提供两条语句下载:# yarn 下载yarn global add @vue/cli# npm 下载npm install -g @vue/cli注意,执行npm时候可能会报警告不用在原创 2021-09-08 11:01:32 · 415 阅读 · 0 评论