Vue
文章平均质量分 57
Sun Jiakai_凯
做一只积极且上进的程序猿,读温柔的句子,见阳光的人,眼里全是温柔和笑意!
展开
-
23、路由
1、什么是路由路由(英文:router)就是对应关系2、SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。 此时,不同组件之间的切换需要通过前端路由来实现在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成3、什么是前端路由通俗易懂的概念:Hash 地址与组件之间的对应关系工作方式::用户点击了页面上的路由链接, 导致了 URL 地址栏中的 Hash 值发生了变化前端路由监听了到 Hash原创 2021-10-31 10:31:37 · 89 阅读 · 0 评论 -
22、自定义指令
1、什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令2、自定义指令的分类vue 中的自定义指令分为两类,分别是:私有自定义指令全局自定义指令3、 私有自定义指令在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令使用私有指令时,要加上v-前缀动态绑定参数值通过binding获取指令的参数update函数:bind 函数只调用 1原创 2021-10-30 16:10:09 · 569 阅读 · 0 评论 -
21、插槽
1、什么是插槽插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把 不确定的、希望由用户指定的 部分定义为插槽可以把插槽认为是组件封装期间,为用户预留的内容的占位符每一个插槽都有一个name的属性,如果省略了name属性,则有一个默认名称:default如果在封装组件时没有预留任何 插槽,则用户提供的任何自定义内容都会被丢弃//使用left组件的位置<Left> <p>这是Left组件中的p标签</p></Left&原创 2021-10-30 16:08:55 · 211 阅读 · 0 评论 -
20、动态组件
1、什么是动态组件动态组件指的是动态切换组件的显示与隐藏2、如何实现动态组件渲染vue 提供了一个内置的组件,专门用来实现动态组件的渲染组件的占位符is的属性值:表示要渲染的组件的名字动态组件每一次切换,组件实例都会经历创建和销毁的生命周期<template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <button @click=原创 2021-10-29 23:22:26 · 798 阅读 · 0 评论 -
19、购物车案例
1、Count.vue<template> <div class="number-container d-flex justify-content-center align-items-center" > <!-- 减 1 的按钮 --> <button @click="sub" type="button" class="btn btn-light btn-sm">-</button> <!-- 购买原创 2021-10-29 19:44:44 · 169 阅读 · 0 评论 -
18、ref引用
1、什么是 ref 引用ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。 每个 vue 的组件实例上,都包含一个 refs 对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下, 组件的 $refs 指向一个空对象2、使用 ref 引用 DOM 元素<template> <div class="fatherContainer"> <!-- 使用ref属性,为对应的DOM 添加引用名称 -->原创 2021-10-29 19:27:02 · 244 阅读 · 1 评论 -
17、生命周期&数据共享
1、生命周期 & 生命周期函数生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行注意:生命周期强调的是时间段,生命周期函数强调的是时间点2、父子组件之间的数据共享2.1 父组件向子组件共享数据(需要使用自定义属性)父组件:<template> <div> <son :msg="message原创 2021-10-28 16:31:15 · 139 阅读 · 0 评论 -
16、组件
1、什么是组件化开发 根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护2、vue组件的三个组成部分template -> 组件的模板结构script -> 组件的 JavaScript 行为style -> 组件的样式每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分3、templatetemplate 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DO原创 2021-10-27 17:58:13 · 73 阅读 · 0 评论 -
15、vue-cli
1、vue-cli的使用安装:终端输入 npm install -g @vue/cli创建项目:vue create 项目名称运行项目:从终端进入到项目的根目录npm run serve2、vue项目中src目录的构成assets 文件夹:存放项目中用到的静态文件 例如:css样式表、图片资源components文件夹:封装的可复用的组件,都要放到components目录下都要放到components目录下main.js:整个项目的入口文件,整个项目的运行,要先执行原创 2021-10-26 17:19:11 · 79 阅读 · 0 评论 -
14、axios
1、axios前端专注于网络请求的库2、axios的基本使用发起GET请求<!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-widt原创 2021-10-26 12:42:05 · 64 阅读 · 0 评论 -
13、侦听器
1、watch侦听器watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作要监视哪个数据的变化,就把数据名作为方法名即可接收两个参数:新值在前、旧值在后 <!-- 2. 声明一个将要被vue控制的dom区域 --> <div id="app"> <input type="text" v-model="username"> </div> <!-- 1. 导入vue的库文件,在windo原创 2021-10-25 20:28:10 · 408 阅读 · 0 评论 -
12、过滤器
1、过滤器概述过滤器常用于文本的格式化, 常用在俩个地方:插值表达式 v-bind属性绑定过滤器应被添加在JavaScript表达式的尾部,由“管道符”进行调用过滤器中的形参是管道符前面的值过滤器的本质是一个函数,并且有一个返回值2、定义过滤器可以在 filters 节点中定义过滤器<!-- 2. 声明一个将要被vue控制的dom区域 --><div id="app"> <!-- 由管道符调用capitalize过滤器,对message的值进行原创 2021-10-25 16:52:05 · 169 阅读 · 0 评论 -
11、品牌列表案例
<!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"> <title>品牌列表案例<原创 2021-10-25 15:56:55 · 610 阅读 · 0 评论 -
10、vue指令
1、指令的概念指令(Directives)是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构vue 中的指令按照不同的用途可以分为如下 6 大类:① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令2、内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容v-text{{ }}v-htmlv-text (会覆盖元素内默认的值)<!DOCTYPE html><html la原创 2021-10-25 10:34:22 · 200 阅读 · 0 评论 -
9、vue基础入门
1、概念一套用于构建用户界面的前端框架2、vue的特性数据驱动视图双向数据绑定2.1 数据驱动视图1. 在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构2. 好处:当页面数据发生改变时,页面会自动重新渲染2.2 双向数据绑定1. 在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源中2. 好处:开发者不再需要手动操作DOM,来获取表单最新的值3、MVVMMVVM是vue实现数据驱动试图和数据原创 2021-10-24 16:39:47 · 75 阅读 · 0 评论 -
8、Source Map
1、什么是 Source MapSource Map 就是一个信息文件,里面储存着位置信息。也就是说,Source Map 文件中存储着压缩混淆后的代码,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试2、解决默认 Source Map 的问题开发环境下,推荐在 webpack.config.js 中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致module.exports = { // 代表webpack原创 2021-10-24 13:04:26 · 173 阅读 · 0 评论 -
7、打包发布
1、为什么要打包发布项目开发完成之后,需要使用 webpack 对项目进行打包发布,主要原因有以下两点: ① 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件 ② 开发环境下,打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行,因此需要对项目进行打包发布2、配置 webpack 的打包发布在 package.json 文件的 scripts 节点下,新增 build 命令如下:"scripts": { "dev": "webpack ser原创 2021-10-24 12:06:50 · 260 阅读 · 0 评论 -
6、loader
1、loader概述 1. 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块,webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错! 2. loader 加载器的作用:协助 webpack 打包处理特定的文件模块。比如: css-loader 可以打包处理 .css 相关的文件 less-loader 可以打包处理 .less 相关的文件 babel-loader 可以打包处理 webpack原创 2021-10-24 10:31:16 · 93 阅读 · 0 评论 -
5、webpack
1、前端工程化前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化2、什么是webpack1. 概念:webpack 是前端项目工程化的具体解决方案2. 功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能3. 好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性...原创 2021-10-24 08:50:38 · 93 阅读 · 0 评论 -
4、宏任务和微任务
1、什么是宏任务和微任务JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:1.宏任务(macrotask) 异步 Ajax 请求、 setTimeout、setInterval、 文件操作 其它宏任务2.微任务(microtask) Promise.then、.catch 和 .finally process.nextTick 其它微任务2、执行顺序每一个宏任务执行完之后,都会检查是否存在待执行的微任务,如果有,则执行完所有微任务之后,再继续执行下一个原创 2021-10-23 12:46:31 · 357 阅读 · 0 评论 -
3、async/await--EventLoop
1、什么是 async/await async/await 是 ES8(ECMAScript 2017)引入的新语法,用来简化 Promise 异步操作。在 async/await 出现之前,开发者只能通过链式 .then() 的方式处理 Promise 异步操作 .then 链式调用的优点: 解决了回调地狱的问题 .then 链式调用的缺点: 代码冗余、阅读性差、不易理解2、async/await的基本使用import thenFs from 'then-fs'async fun原创 2021-10-23 12:27:58 · 139 阅读 · 0 评论 -
2、Promise
1、回调地狱缺点: 1. 代码的耦合度太高 2. 大量冗余的代码相互嵌套,代码的可读性变差2、Promise的基本概念promise是一个构造函数: 1. 我们可以创建Promise的实例 p,const p = new Promise(); 2. new 出来的实例对象代表一个异步操作promise.prototype上包含一个.then()方法: 1. 每一次new Promise()构造函数得到实例对象 2. 都可以通过原型链的方式访问到.then()方法, p.then().原创 2021-10-23 11:03:23 · 63 阅读 · 0 评论 -
1. ES6模块化-导入-导出
1. 默认导出export default 默认导出的成员let n1 = 10;let n2 = 20;function show() {}export default { n1, show}注意: 1. 每一个js文件就是一个模块 2. 每一个模块只允许使用唯一的一次export default导出2. 默认导入import 接收名称 from '模块标识符'import m1 from './test1.js'console.log(m1);原创 2021-10-23 09:21:27 · 75 阅读 · 0 评论 -
12.列表渲染
列表渲染1. 基本列表条件渲染: 1.v-if 写法: (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。 2.v-show 写法:v-show="表达式"原创 2021-08-17 20:20:22 · 312 阅读 · 0 评论 -
11. 条件渲染
条件渲染条件渲染: 1.v-if 写法: (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。 2.v-show 写法:v-show="表达式"原创 2021-08-17 20:14:06 · 54 阅读 · 0 评论 -
10. 绑定样式
绑定样式绑定样式: 1. class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定,要动态获取。 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 2. style样式 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象<!DOCTYPE html>&原创 2021-08-17 20:12:28 · 97 阅读 · 0 评论 -
9. 监视属性
监视属性1. 天气案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气案例</title> <!-- 引入V原创 2021-08-17 20:09:40 · 234 阅读 · 0 评论 -
8. 计算属性
计算属性1. 插值语法<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例-插值语法</title> <!-原创 2021-08-17 17:32:41 · 132 阅读 · 0 评论 -
7. 事件处理
1. 事件处理事件的基本使用: 1.使用v-on:xxx 或者@xxx 绑定事件,其中xxx是事件名 2.事件的回调需要配置在methods对象中,最终会在vm上 3.methods中配置的函数,不要用箭头函数,否则this就不是vm了 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象 5.@click="demo" 和 @click="demo($event)"效果一样,但是后者可以传参<!DOCTYPE原创 2021-08-14 18:35:15 · 70 阅读 · 0 评论 -
6. 数据代理
数据代理数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) 1. vue中的数据代理: 通过vm对象来代理data对象中的属性的操作(读/写) 2. Vue中数据代理的好处: 更加方便的操作data中的数据 3. 基本原理: 通过Object.defineProperty()把data对象中所有属性添加到vm上 为每一个添加到vm上的属性,都指定一个getter和setter 在getter和原创 2021-08-14 18:30:51 · 89 阅读 · 0 评论 -
5. MVVM模型
MVVM模型MVVM模型 1. M:模型 Model:data中的数据 2. V:视图 View:模板代码 3. VM:视图模型 ViewModel:Vue实例注意: 1. data中的所有属性,最后都出现在vm身上 2. vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用<!DOCTYPE html><html lang="en"> <head> <meta char原创 2021-08-14 18:20:07 · 90 阅读 · 0 评论 -
4. el与data的两种写法
el与data的两种写法data与el的两种写法: 1. el的两种写法 1.1 new Vue()时配置el属性 1.2 先创建Vue实例,随后再通过v.$mount('#root')指定el的值 2. data的两种写法 2.1 对象式 2.2 函数式 3. 一个重要原则: 由Vue管理的函数,一定不要写函数箭头,一旦写了箭头函数,this就不再时Vue实例了&原创 2021-08-14 18:14:32 · 262 阅读 · 0 评论 -
3. 数据绑定
数据绑定<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据绑定</title> <!-- 引入Vue -->原创 2021-08-14 18:08:03 · 61 阅读 · 0 评论 -
2. 模板语法&数据绑定
1. Vue模板语法有两大类1. 插值语法1.1 功能:用于解析标签体内容1.2 写法:{{xxx}} xxx是js表达式,并且可以直接读取到data中的所有属性2. 指令语法1.1 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)1.2 举例:v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式<!DOCTYPE html><html lang="en"> <head>原创 2021-08-11 22:56:21 · 60 阅读 · 0 评论 -
1. 初识Vue
1、什么是Vue? 一套用于构建用户界面的渐进式的JavaScript框架2、Vue的特点 1、采用组件化模式,提高代码复用率、且让代码更好维护,一个 xx.vue就是一个组件 2、声明式编码,让编码人员无需直接操作DOM,提高开发效率 3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点...原创 2021-08-11 22:25:55 · 72 阅读 · 0 评论