![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 70
一个想走出去的码农
这个作者很懒,什么都没留下…
展开
-
前端面试题
前端面试题原创 2023-03-02 01:40:07 · 953 阅读 · 2 评论 -
vue3快速上手01
Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy转载 2022-01-12 11:12:44 · 108 阅读 · 0 评论 -
ts语法。
1、强类型与弱类型强类型:不允许改变变量的数据类型,除非进行强制类型转换弱类型:变量可以被赋予不同的数据类型2、动态类型与静态类型静态类型:在编译阶段确定所有变量的类型动态类型:在执行阶段确定所有变量的类型3、项目准备1、初始化工程:npm init -y2、安装typescript:npm i typescript -g3、初始化tsc编译器配置文件:tsc --init4、初始化构建工具:npm i webpack webpack-cli webpack-dev-server -D原创 2021-12-06 20:26:58 · 1029 阅读 · 0 评论 -
vuex基础
vuex的由来在组件中如果是父子或者兄弟都可以进行一定的方法让他们联系起来,那么非关系型组件怎么联系起来呢?vuex的作用非关系型组件数据的共享vuex基础-介绍vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。结论修改state状态必须通过mutationsmutations只能执行同步代码,类似ajax,定时器之类的代码不能在mutations中执行执行异步代码,要通过actions,然后将数据提交给mutations才可以完成state的状原创 2021-06-16 20:16:14 · 198 阅读 · 0 评论 -
vue技巧
.sync原创 2021-06-16 18:07:06 · 1013 阅读 · 0 评论 -
vue面试题
组件传值兄弟传值1.创建一个vue实例2.写组件3.创建一个事件中心 var hub = new Vue();4.传递数据方,触发兄弟组件的事件,通过一个事件触发hub.emit(方法名,传递的数据)5.接收方通过mounted()钩子中触发hub.emit(方法名,传递的数据)5.接收方通过mounted(){}钩子中 触发hub.emit(方法名,传递的数据)5.接收方通过mounted()钩子中触发hub.on()方法<!DOCTYPE html><html lan原创 2021-06-15 13:19:07 · 383 阅读 · 4 评论 -
VUE复习遇到的问题
传值①Vue is not defined此问题出现可能是vue引入的路径问题原创 2021-06-15 07:55:49 · 311 阅读 · 2 评论 -
vue出现的问题
模拟失败请求<script> // 随机错误 if (Math.random() > 0.5) { return JSON.parse('error') } </script>常见误区常见错误原创 2021-06-04 22:08:14 · 95 阅读 · 2 评论 -
记住列表滚动位置
<script> //把下边的代码粘贴到浏览器Console中敲回车,然后滚动界面,它会输出滚动的元素function findScroller(element) { element.onscroll = function() { console.log(element)} Array.from(element.children).forEach(findScroller);}findScroller(document.body);</script>原创 2021-05-27 21:09:57 · 126 阅读 · 0 评论 -
黑马后台管理--路由分配
黑马后台管理–路由分配案例分析基本组成app根组件通过路由的方式加载到页面代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title> <style type="text/css"> html, body, #app { ma原创 2021-05-08 22:23:01 · 296 阅读 · 0 评论 -
vue-router编程式导航
vue-router编程式导航1. 理解2.例子 利用push方法完成跳转在user1里面放一个按钮 点击就会跳转到Register页面代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v原创 2021-05-08 20:31:13 · 127 阅读 · 0 评论 -
vue-router命名路由
vue-router命名路由例子如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-05-08 20:12:02 · 97 阅读 · 0 评论 -
vue-router动态路由匹配
1.动态路由匹配1.2例子代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-05-08 19:47:28 · 349 阅读 · 0 评论 -
vue-router嵌套路由
vue-router嵌套路由1.例子如下2.注意最重要的就是在父组件里面添加子组件,如下:<router-link to="/register/tab1">tab1</router-link><router-link to="/register/tab2">tab2</router-link> <!-- 子路由的占位符 --><router-view />3.代码如下<!DOCTYPE html>&l原创 2021-05-08 19:21:18 · 145 阅读 · 0 评论 -
vue-router的基本使用
vue-router的基本使用介绍它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用官网:https://router.vuejs.org/zh/基本使用步骤1导入js文件2.添加路由链接3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)4.定义路由组件5.配置路由规则并创建路由实例6.将路由挂载到Vue实例中1.导入js文件1.1如果不想下载可以用网链接的形式<script src="https://unpkg.com/vue原创 2021-05-07 19:54:02 · 175 阅读 · 0 评论 -
图书管理系统
步骤axios官方文档1.展示数据1.1 获取数据①页面一开始加载就应该获取数据–>生命周期一开始就会加载created(){}mounted(){}所以就在这两个方法里发送数据请求,两个都可以②axios本身是promise1.1.1 注意:回调函数与箭头函数1.2.展示数据①利用v-for…②数据格式是在文档里1.2.1 注意:关键一步:赋值得对1.3优化代码1.3.1基准路径axios.defaults.baseURL = ‘http://39.103.原创 2021-05-06 23:58:58 · 136 阅读 · 0 评论 -
终端抛出异常 --> nodemon
终端抛出异常1.解决问题的最重要的是看他抛出的异常2.路径不要写错,转换路径用的是cd3.自动补全路径用的是Tab4. 端口占用记得把其他终端关了或者改端口号原创 2021-05-06 19:32:11 · 66 阅读 · 0 评论 -
购物车案例
购物车案例效果图如下:1. 按照组件化方式实现业务需求1.1根据业务功能进行组件化划分①标题组件(展示文本)②列表组件(列表展示·商品数量变更·商品删除)③结算的组件(计算商品总额)2. 功能实现步骤2.1实现整体布局和样式效果2.2划分独立的功能组件2.3组合所有的子组件形成整体结构2.4逐个实现各个组件功能2.4.1标题组件2.4.2列表组件2.4.1结算组件3.代码如下<!DOCTYPE html><html lang="en"><原创 2021-05-05 20:48:36 · 121 阅读 · 0 评论 -
组件插槽
组件插槽1. 插槽基本使用1.1理解:插槽,就是用于占位,等待的父组件的内部内容插入进来1.2步骤详细描述①定义组件的时候,在template模板中留一个位置,插槽:②使用组件的时候,在组件中间,填写内容(这个内容,会传递到slot中)1.3案例如下<body> <div id="app"> <menu-item>有bug发生</menu-item> <menu-item>有一个警告<原创 2021-05-05 16:30:55 · 483 阅读 · 0 评论 -
组件间的相互传递
父组件向子组件传值1.基本用法2.父组件向子组件传递2.1动态传递<body> <div id="app"> <div>{{pmsg}}</div> <menu-item :title='title1'></menu-item> </div> <script src="js/vue.js"></script> <scrip原创 2021-05-05 00:02:38 · 218 阅读 · 0 评论 -
过滤器(格式化日期)
过滤器(格式化日期)代码如下<script>/** * 对日期进行格式化, * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小时(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999)原创 2021-05-03 19:29:04 · 220 阅读 · 0 评论 -
自定义指令
自定义指令的语法规则获取元素焦点<script> Vue.directive('focus',{ inserted:function(el){ el.focus() } })</script>原创 2021-05-03 19:21:09 · 61 阅读 · 0 评论