![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 52
Henry_ww
这个作者很懒,什么都没留下…
展开
-
$nextTick使用场景
$nextTick使用场景目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失注意:一定要用 v-if 来写( 保证DOM异步更新前获取不到输入框,体现 $nextTick 价值 )<template> <div> <!-- input 和 button 是互斥关系 v-if v-else --> <input ref="myInp" type="text" placeholder="这是一个输入框" v-if原创 2021-07-22 18:27:51 · 177 阅读 · 0 评论 -
2021-07-22
$nextTick使用Vue更新DOM-异步的·目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值<template> <div> <h2>3. vue更新DOM是异步的</h2> <p ref="myP">{{ count }}</p> <button @click="btn">点击count+1, 马上提取p标签内容<原创 2021-07-22 17:57:25 · 57 阅读 · 0 评论 -
利用 ref 和 $refs 可以用于获取 dom 元素
$refs-获取DOM目标: 利用 ref 和 $refs 可以用于获取 dom 元素在这里插入代码片<template> <div> <!-- ref 是 Vue 框架封装的属性,可以用于快速获取 DOM 节点 --> <p>1. 获取原生DOM元素</p> <h1 id="hi" ref="myH">我是一个孤独可怜又能吃的h1</h1>原创 2021-07-22 17:01:01 · 227 阅读 · 0 评论 -
props的定义方式
可以对props的变量的值 进行校验export default {// props的简写// props: ['background','color','title']// props的校验数据写法 / 复杂写法 (温馨提示:校验写法没有代码提示,书写要小心)props: { background:{ type:String // background 类型必须是字符串,否则报错 }, color:{ type:String, default:原创 2021-07-20 17:26:09 · 246 阅读 · 0 评论 -
axios基础使用
2.0_axios基本使用axios文档特点支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios 底层还是原生js实现, 内部通过Promise封装的axios的基本使用axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, par原创 2021-07-20 15:37:42 · 265 阅读 · 2 评论 -
vue生命周期
vue生命周期1.0_人的-生命周期一组件从 创建 到 销毁 的整个过程就是生命周期Vue_生命周期1.1_钩子函数目标: Vue 框架内置函数,随着组件的生命周期阶段,自动执行作用: 特定的时间点,执行特定的操作场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据分类: 4大阶段8个方法初始化挂载更新销毁阶段方法名方法名初始化beforeCreatecreated挂载befor原创 2021-07-20 09:34:04 · 326 阅读 · 0 评论 -
vue组件通信_单向数据流 / 父向子 / 子向父 自定义事件
vue组件通信_单向数据流目标: props变量本身是只读不能重新赋值目标:从父到子的数据流向,叫单向数据流原因: 子组件修改, 不通知父级, 造成数据不一致性如果第一个MyProduct.vue内自己修改商品价格为5.5, 但是App.vue里原来还记着18.8 - 数据 不一致了所以: Vue规定props里的变量, 本身是只读的父组件<template> <div> <!--3. 使用组件 --><MyproDuct v原创 2021-07-14 10:37:58 · 124 阅读 · 0 评论 -
vue组件通信_父向子-配合循环 v-for
vue组件通信_父向子-配合循环目的: 把数据循环分别传入给组件内显示数据list: [ { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' }, { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' }, { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏原创 2021-07-14 09:42:47 · 354 阅读 · 0 评论 -
vue组件-scoped作用
vue组件-scoped作用目的: 解决多个组件样式名相同, 冲突问题需求: div标签名选择器, 设置背景色问题: 发现组件里的div和外面的div都生效了解决: 给Pannel.vue组件里style标签上加scoped属性即可<style scoped>// style 添加 scoped 属性后,可以实现样式独立作用域<style scoped>div{ background-color: pink;}</style>在st原创 2021-07-13 21:17:36 · 655 阅读 · 5 评论 -
vue组件通信_父向子-props
vue组件通信因为每个组件的变量和值都是独立的组件通信先暂时关注父传子, 子传父父: 使用其他组件的vue文件子: 被引入的组件(嵌入)例如: App.vue(父) MyProduct.vue(子)_vue组件通信_父向子-props目的: 从外面给组件内传值, 先学会语法, 练习中在看使用场景步骤:创建组件components/MyProduct.vue - 复制下面标签组件内在props定义变量, 用于接收外部传入的值App.vue中引入注册组件, 使用时, 传入原创 2021-07-13 21:16:24 · 156 阅读 · 0 评论 -
vue组件 - 概念 - 基础使用 - 局部 - 全局
vue组件_概念组件是可复用的 Vue 实例, 封装标签, 样式和JS代码组件化 :封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的 开发 和 维护一个页面, 可以拆分成一个个组件,一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)vue组件_基础使用目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件口诀: 哪部分标签复用, 就把哪部分封装到组件内(重要): 组件内template只能有一个根标签原创 2021-07-13 21:17:08 · 131 阅读 · 0 评论 -
vue侦听器(复杂类型)-深度侦听和立即执行
vue侦听器-深度侦听和立即执行目标: 侦听复杂类型, 或者立即执行侦听函数语法:watch: { "要侦听的属性名": { immediate: true, // 立即执行 deep: true, // 深度侦听复杂类型内变化 handler (newVal, oldVal) { } }}<template> <div> 用户名:<原创 2021-07-12 12:14:12 · 349 阅读 · 0 评论 -
vue侦听器基础-watch
vue侦听器-watch目标: 可以侦听data/computed属性值改变语法:watch: { "被侦听的属性名" (newVal, oldVal){ }}<template> <div> <input type="text" v-model="name"> </div></template><script>export default {da原创 2021-07-12 11:15:38 · 55 阅读 · 0 评论 -
vue计算属性-computed-完整写法
vue计算属性-完整写法目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法语法:computed: { "属性名": { set(值){ }, get() { return "值" } }}<template> <div> 名字: <input v-model="name" type="原创 2021-07-12 09:26:24 · 4489 阅读 · 0 评论 -
vue基础_diff 算法
diff 算法对比动图从pathnode往下看diff算法执行过程Vue生命周期流程图(含diff算法)原创 2021-07-12 08:38:58 · 457 阅读 · 0 评论 -
vue计算属性-缓存
vue计算属性-缓存目标: 计算属性是基于它们的依赖项的值结果进行缓存的,只要依赖的变量不变, 都直接从缓存取结果<template> <div> <h1>求 {{a}} + {{b}} 的和</h1> <p>求和的结果为:{{sum}}</p> <p>求和的结果为:{{sum}}</p> <p>求和的结果为:{{sum}}</p>原创 2021-07-11 18:19:00 · 423 阅读 · 0 评论 -
vue计算机属性-computed
vue计算属性-computed目标: 一个数据, 依赖另外一些数据计算而来的结果语法:computed: { "计算属性名" () { return "值" }}<template> <div> <h1>求 {{a}} + {{b}} 的和</h1> <p>求和的结果为:{{sum}}</p> </div></template&原创 2021-07-11 18:07:22 · 296 阅读 · 0 评论 -
vue过滤器-传参
vue过滤器-传参目标: 可同时使用多个过滤器, 或者给过滤器传参语法:过滤器传参: vue变量 | 过滤器(实参)<template> <div> <!-- 1.传一个 - 过去 --> <p> {{ msg | fan('-') }}</p> </div></template><script>export default { data(){原创 2021-07-11 17:38:19 · 1971 阅读 · 0 评论 -
vue案例:-品牌管理(时间格式化)
案例-品牌管理(时间格式化)目标: 复制上个案例, 在此基础上, 把表格里的时间用过滤器+moment模块, 格式化成YYYY-MM-DD 格式图示:下载moment处理日期的第三方工具模块moment官网文档: http://momentjs.cn/docs/#/displaying/yarn add moment引入定义过滤器, 把时间用moment模块格式化, 返回我们想要的格式<script>import 'bootstrap/dist/css原创 2021-07-11 16:46:27 · 97 阅读 · 0 评论 -
vue过滤器
vue过滤器-定义使用目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, 插值表达式和v-bind表达式Vue中的过滤器场景字母转大写, 输入"hello", 输出"HELLO"字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"语法:全局过滤器:Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})局部过滤器:filters: {过滤器名字: (值) => {retur原创 2021-07-11 16:25:43 · 106 阅读 · 0 评论 -
vue案例:品牌管理
案例-品牌管理(铺)目标: 数据铺设需求1: 把默认数据显示到表格上需求2: 注意资产超过100的, 都用红色字体标记出来细节: ① 先铺设静态页面 — 去.md文档里, 复制数据和标签模板 ② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中 ③ 用v-for配合默认数据, 把数据默认铺设到表格上显示 ④ 直接在标签上, 大于100价格, 动态设置red类名图示:因为案例使用了bootstrap, 工程化开发, 模块化用npm/yarn下载引原创 2021-07-11 15:46:11 · 317 阅读 · 0 评论 -
vue基础-动态style / :style=“{css属性: 值}“
vue基础-动态style目标: 给标签动态设置style的值语法:style="{css属性: 值}"<template> <div> <!-- :style="css属性:值" --> <button @click="one">点击变色01</button> <button @click="two">点击变色02</button> <butt原创 2021-07-11 11:55:35 · 6093 阅读 · 0 评论 -
vue基础-动态class / class = “{类名 : 布尔值}“
vue基础-动态class目标:用v-bind给标签class设置动态的值语法:class = “{类名 : 布尔值}”true使用,false不用<template> <div> <button @click="bl = !bl">点击按钮布尔值取反</button> <!-- :class="{ 类名 :布尔值}" --> <div :class="{red: bl}">原创 2021-07-11 11:54:28 · 1040 阅读 · 0 评论 -
vue基础_v-for更新监测
vue基础 v-for更新监测目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新情况1: 数组翻转情况2: 数组截取情况3: 更新值口诀:数组变更方法, 就会导致v-for更新, 页面更新数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()<template> <div> <ul> <li v-for="(item,index) in arr "原创 2021-07-11 09:57:04 · 370 阅读 · 0 评论 -
vue指令_v-for / 遍历
vue指令-v-for语法v-for="(值, 索引) in 目标结构"v-for=“值 in 目标结构”目标结构:可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)注意:v-for的临时变量名不能用到v-for范围外例:<template><!-- v-for="值变量,索引变量 in 目标结构" --><!-- v-for="值变量 in 目标结构" --><!-- 可以遍历数组 / 对象 / 数原创 2021-07-10 21:30:44 · 643 阅读 · 0 评论 -
vue指令_v-show和v-if / 标签的隐藏和出现 / v-else
vue指令 v-show和v-if目标: 控制标签的隐藏或出现语法:v-show=“vue变量”v-if=“vue变量”原理v-show 用的display:none隐藏 (频繁切换使用)v-if 直接从DOM树上移除高级v-else使用<template> <div> <!-- v-show / v-if = "vue变量" --> <!-- v-show 用的 display:non原创 2021-07-10 12:27:32 · 421 阅读 · 0 评论 -
vue指令_v-text和v-html
vue指令 v-text和v-html语法:v-text=“vue数据变量”v-html=“vue数据变量”注意: 会覆盖插值表达式<template> <div> <!-- 直接已文本的方式输出 --> <p>{{msg}}</p> <!-- ???? 标签内的内容 会被v-text 覆盖 ,写的时候 保留标签内空内容 --> <p v-text="msg原创 2021-07-09 20:19:52 · 143 阅读 · 0 评论 -
vue指令_v-model修饰符 / .number转数字 / .trim去除首尾空格 / .lazy失去焦点值改变
vue指令 v-model修饰符语法:v-model.修饰符=“vue数据变量”.number 以parseFloat转成数字类型.trim 去除首尾空白字符.lazy 在change时触发而非inupt时<template> <div> <!-- .number 转数字 --> 年龄:<input type="number" v-model.numb原创 2021-07-09 18:15:59 · 773 阅读 · 0 评论 -
vue指令_v-model基础使用
vue指令 v-model目标: 把value属性和vue数据变量, 双向绑定到一起语法: v-model=“vue数据变量”双向数据绑定数据变化 -> 视图自动同步视图变化 -> 数据自动同步原创 2021-07-09 15:18:15 · 85 阅读 · 0 评论 -
vue事件_按键修饰符 / @keyup.enter/.esc / 回车、返回 / 更多修饰符
vue指令-v-on按键修饰符目标: 给键盘事件, 添加修饰符, 增强能力语法:@keyup.enter - 监测回车按键@keyup.esc - 监测返回按键更多修饰符<template> <div> <!-- @keyup.enter - 监测回车按键 --> 按回车键发送内容<input @keyup.enter="sendMsg" type="text"> <原创 2021-07-09 12:15:35 · 2003 阅读 · 0 评论 -
vue事件-修饰符 / stop / prevent / once
3.5_vue指令-v-on修饰符目的: 在事件后面.修饰符名 - 给事件带来更强大的功能语法:@事件名.修饰符=“methods里函数”.stop - 阻止事件冒泡.prevent - 阻止默认行为.once - 程序运行期间, 只触发一次事件处理函数<template> <div> <!-- 无传参,通过形参直接接收 --><a @click="oneFn" href="http://www.baidu.com原创 2021-07-09 12:07:57 · 129 阅读 · 0 评论 -
vue事件_v-on / @ / 绑定事件
3.3_vue指令-v-on目标: 给标签绑定事件语法v-on:事件名=“要执行的少量代码”v-on:事件名=“methods中的函数”v-on:事件名=“methods中的函数(实参)”简写: @事件名=“methods中的函数”<template> <div> <h1>请输入您要购买的商品数量:{{count}}</h1> <!-- 1. v-on:事件名="要执行的少量代码" 简写:@事件名原创 2021-07-09 11:35:39 · 324 阅读 · 0 评论 -
vue指令——v-bind / 属性绑定
3.2_vue指令-v-bind: 给标签属性设置vue变量的值vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头每个指令, 都有独立的作用语法:v-bind:属性名="vue变量"简写::属性名="vue变量"<!-- vue指令-v-bind属性动态赋值 --><a v-bind:href="url">我是a标签</a><img :src="imgSrc">例:<template> &原创 2021-07-09 11:23:44 · 264 阅读 · 0 评论 -
vue基础-插值表达式 {{}}、MVVM设计模式
3.0_vue基础-插值表达式目的: 在dom标签中, 直接插入内容又叫: 声明式渲染/文本插值语法: {{ 表达式 }}<template> <div> <h1>{{msg}}</h1> <h2>{{obj}}</h2> <h3>{{obj.name}}</h3> <h4>{{obj.age >= 18 ? '成年' : '未成年'}}&原创 2021-07-09 11:11:26 · 143 阅读 · 0 评论 -
@vue/cli和脚手架 自定义配置 端口号修改
2.0_@vue/cli 脚手架介绍目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目脚手架是为了保证各施工过程顺利进行而搭设的工作平台@vue/cli的好处开箱即用0配置webpackbabel支持css, less支持开发服务器支持2.1_@vue/cli安装目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令,原创 2021-07-09 10:19:53 · 3399 阅读 · 0 评论 -
vue基本概念
渐进式javacript框架, 一套拥有自己规则的语法官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)什么是渐进式渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用什么是库和框架补充概念:库: 封装的属性或方法 (例jquery.js)框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)总结:开发更快速,更高效企业开发都在用前端工程师必备技能,高薪...原创 2021-07-08 18:34:47 · 99 阅读 · 0 评论 -
vue-webpack 面试
面试题1、什么是webpack(必会) webpack是一个打包模块化javascript的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化项目2、Webpack的优点是什么?(必会)专注于处理模块化的项目,能做到开箱即用,一步到位通过plugin扩展,完整好用又不失灵活通过loaders扩展, 可以让webpack把所有类型的文件都解析打包区庞大活跃,经常引入紧跟时代发展的新特性,能为原创 2021-07-08 17:32:09 · 476 阅读 · 0 评论 -
vue - webpack yarn下载
webpack本身是, node的一个第三方模块包, 用于打包代码webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫webpack能做什么把很多文件打包整合到一起, 缩小项目体积, 提高加载速度(演示准备好的例子)其中功能:less/sass -> cssES6/7/8 -> ES5高版本语法 ==> 低版本语法打包html/css.原创 2021-07-08 17:30:11 · 515 阅读 · 0 评论