vue
关注
分享
扫一扫
文章平均质量分 94
菜鸟界的菜鸟
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue(十一)：Vuex
一、Vuex概述1.1 组件之间共享数据的方式父向子传值：v-bind属性绑定子向父传值：v-on 事件绑定兄弟组件之间共享数据：EventBus $on接收数据的那个组件 $emit发送数据的那个组件1.2 Vuex是什么Vuex是实现组件全局状态（数据）管理的一种机制，可以方便地实现组件之间数据的共享。1.3 使用Vuex统一管理状态的好处（1）能够在vuex中集中管理共享的数据，易于开发和后期维护（2）能够高效地实现组件的数据共享，提高开发效率（3）存储在v原创 2022-01-07 23:52:04 · 1048 阅读 · 1 评论 -
Vue(十)：头条项目完整版
一、初始化项目1.1 创建并梳理项目的结构 运行如下的命令，基于 vue-cli 创建 Vue2 的工程化项目： vue create toutiao 重置App.vue根组件中的代码如下： <template> <div>App 根组件</div></template><script>export default { name: 'App'}</script><sty..原创 2022-01-07 16:17:09 · 821 阅读 · 0 评论 -
Vue(九)：ES6模块化与异步编程高级用法
目录一、ES6模块化1.1 node.js的模块化1.2 前端模块化规范的分类1.3 ES6模块化1.4 在node.js中体验ES6模块化1.5 ES6模块化的基本语法1.5.1默认导出与默认导入1.5.2 按需导出与按需导入1.5.3直接导入并执行模块中的代码二、Promise2.1 回调地狱2.2 Promise的基本概念2.3 基于Promise读取文件内容2.3.1 基于回调函数按顺序读取文件内容（存在回调地狱的问题）2.3.2 基于..原创 2022-01-06 18:14:50 · 4119 阅读 · 4 评论 -
Vue(八)：头条项目
一、新建项目与之前的不同之处在于，本次选择自动创建Router，如下：注：发现在src目录下新增views文件夹。views文件夹和components文件夹都是存放vue页面文件的。区别在于凡是通过router/index.js路由文件引入的.vue文件放入view文件夹，其余放入components文件夹。二、开发2.1 安装Vant组件库组件库地址：vant-contrib.gitee.io/vant/#/zh-CN/theme执行npm i vant -S..原创 2022-01-05 23:00:08 · 1977 阅读 · 1 评论 -
Vue(七)：路由
一、前端路由的概念及原理1.1 什么是路由路由（router）就是对应关系1.2 SPA与前端路由SPA：单页面应用程序前端路由：Hash地址与组件之间的对应关系URL中#后面的都叫Hash地址，location.hash即可获取1.3 前端路由的工作方式（1）用户点击了页面上的路由链接（2）导致了地址栏中的Hash值发生了变化（3）前端路由监听到了Hash地址的变化（4）前端把当前Hash值对应的组件渲染到浏览器中二、vue-route.原创 2021-12-30 23:17:19 · 3811 阅读 · 0 评论 -
Vue(六):eslint&axios
一、eslint1.1 vscode进行eslint相关配置（1）tabsize设置为2（2）format设置（3）新建eslint项目1.2 断点调试（和eslint配置无关）加断点，直接在程序中加debugger，或者在控制台Source下点击这里加断点1.3 eslint配置规则1：不能有连续的空行规则2：文件的末尾需要有一行空行规则3：文件的每一行后面都不能有空行规则4：属性和属性值之间需要1个空格规...原创 2021-12-30 19:29:36 · 901 阅读 · 0 评论 -
Vue（五）：动态组件&插槽&自定义指令
一、动态组件1.1 什么是动态组件动态组件指的是动态切换组件的显示与隐藏1.2 动态切换组件的显示与隐藏vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染，控制显示页面的属性是is。示例代码如下： <component :is="shownam"></component><template> <div id="app"> <h1>App.vue</h1> &l原创 2021-12-29 19:41:21 · 1352 阅读 · 0 评论 -
Vue(四)：生命周期&数据共享
一、组件的生命周期1.1 生命周期&生命周期函数生命周期是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。生命周期函数：由vue框架提供的内置函数，会伴随着组件的生命周期，自动按序执行。1.2 组件生命周期函数的分类1.3 生命周期图示例VUE官网生命周期图--------------------Vue 实例 — Vue.jscreated生命周期函数，非常常用，经常在它里面，调用methods中的方法，请求服务器的数据。并且把请求..原创 2021-12-27 23:42:18 · 671 阅读 · 0 评论 -
Vue(三)：vue基础入门
一、侦听器1.1 什么是watch侦听器watch侦听器允许监视数据的变化，从而针对数据的变化做特定的操作。语法格式如下：1.2 方法格式的侦听器的应用--判断用户名是否被占用实时监控用户名的输入，判断输入的用户名是否被占用。该方式不能自动触发一次，不建议使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e.原创 2021-12-26 12:28:33 · 2844 阅读 · 1 评论 -
Vue(二)：vue基础入门
一、vue简介1.1 vue概念用于构建用户界面的前端框架1.2 vue的两个特性：数据驱动视图、双向数据绑定（1）数据驱动视图：单向数据绑定，页面数据变化时，页面重新渲染。在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构，示意图如下：（2）双向数据绑定：在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。开发者不需要手动操作DOM，即可获取表单元素的最新值。示例如下：1.3 MVVM-..原创 2021-12-25 11:45:18 · 1383 阅读 · 0 评论 -
Vue(一) :前端工程化与webpack
一、前端工程化的概念webpack:前端工程化的一种具体解决方案前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。前端工程化的解决方案目前主流的前端工程化解决方案：webpack (????：webpack中文文档) （主要用这个）parcel (????：parcel中文网)二、webpack的基本使用主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆（减小体积）、处理浏览器端JavaScript的兼容性（将高级的代.原创 2021-12-23 23:01:20 · 942 阅读 · 0 评论