- 博客(62)
- 收藏
- 关注
RSS订阅原创 JavaScript - 流程控制结构与分支结构
流程控制编程语言都有三大流程控制结构顺序结构：代码从上往下顺序执行分支结构：代码选择执行循环结构：代码重复执行分支结构分支结构作用：代码根据条件执行为什么要有分支结构？现实世界中，我们在做某些事情的时候是有前提条件的，例如：我今天考试了，考的好与坏与回家的状态不一样的？考的好：回家有赏靠的不好：回家有伤1.1-if单分支结构1.if结构语法：if(条件 true/false){ 条件成立时需要执行的代码 }2.if结构补充说明：1.大括号中可以是任何
2021-07-28 21:43:57
172
原创 JavaScript - 数据类型比较与转换
数据类型比较1.1-null与undefined比较undefined与null的区别，两个都表示什么都没有null == undefined：成立，他们的值都是空null === undefined：不成立，他们的值相等但是数据类型不同<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-e
2021-07-28 21:22:30
88
原创 JavaScript - 运算符与表达式
js中+号的作用1.字符串连接符 ： 连接字符串* 条件 ： +号两边只要有一边是string类型2.算术加法* 条件 : +号两边都是number类型<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>js中+号的作用</title> </head>
2021-07-28 17:48:02
170
原创 JavaScript - typeof关键字
typeof关键字作用：检测一个数据所属的类型语法：typeof 数据 或者 typeof ( 数据 )会得到改属性所属类型的字符串: string number boolean<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>typeof关键字</title> </hea
2021-07-28 17:40:45
182
原创 JavaScript - 基本数据类型
基本数据类型String类型String：字符串例如："张三",'abc'范围：一切用双引号或者单引号包围起来的内容都是字符串作用：展示文本内容Number类型Number：数字例如： 10 0.1范围：数学中的一切数字，包含整数和小数作用：用于数学计算Boolean类型boolean：布尔类型只有两个值：true、false作用：表示现实世界中事物的两种对立面 真假、长短、开关、男女等true表示真false表示假U
2021-07-28 17:26:21
54
原创 JavaScript - 变量
变量1.1-变量声明/赋值/取值1.实际开发因为数据是动态变化，不可能写死数据，因此需要使用变量来进行保存2.变量（variable）：内存中用来保存数据的一块空间3.变量作用：在内存中存储数据4.语法:1.声明变量:let 变量名2.赋值：变量名 = 值3.取值：直接写变量名即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-07-28 12:19:30
123
原创 JavaScript的三种写法
1.2-JavaScript的三种写法1-复习CSS代码的三种写法1.外联样式：写在css文件中，使用link导入<link rel="stylesheet" href="路径/01-css外联样式.css">css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码2.内联样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐<style>.div{background: green;}</style&g
2021-07-28 11:32:03
2621
原创 css 提高补充 高级技巧
api文档工具https://www.showdoc.cc/.cbootstraphttps://v3.bootcss.com/js论坛http://www.jstips.co/码云-代码管理工具https://gitee.com/github-最大的同性交友社区https://github.com/vue-渐进式框架https://cn.vuejs.org/elementui-vue框架http://element-cn.eleme.io/#/zh-CN禁止chrome66自动
2021-07-26 15:31:20
70
原创 响应式布局 bootstrap栅格系统
阿里百秀案例制作3.1 技术选型方案：我们采取响应式页面开发方案技术：bootstrap框架设计图： 本设计图采用 1280px 设计尺寸项目结构搭建Bootstrap 使用四步曲：创建文件夹结构创建 html 骨架结构引入相关样式文件书写内容...
2021-07-26 15:26:31
436
原创 less简介
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。Less中文网址：http://lesscss.cn/常见的CSS预处理器：Sass、Less、Stylus一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。Less 使用之变量变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。@变量名:值;必须有@为前缀不能包含特殊字符不能以数字开头大小写敏感@color: pink;Less
2021-07-24 00:55:47
106
原创 相对单位 / 媒体查询 / em和rem简介
vh和vw相对单位vh viewport height 1vh = 浏览器可视窗口高度的1%vw viewport width 1vw = 浏览器可视窗口宽度的1%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
2021-07-24 00:23:54
165
原创 $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
162
原创 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
49
原创 利用 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
211
原创 案例 - 购物车
4. 案例 - 购物车4.0 案例-购物车-项目初始化目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块vue create shopcaryarn add bootstrapyarn add less [email protected] -D图示:按照需求, 把项目页面拆分成几个组件, 在components下创建MyHeader组件MyFooter组件MyGoods组件 - 商品MyCount组件然后引入到
2021-07-22 16:42:32
819
7
原创 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
232
原创 面试题 、 vue生命周期
面试题1、Vue 的 nextTick 的原理是什么? （高薪常问） \1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。 \2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImme
2021-07-20 15:44:07
105
原创 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
240
2
原创 vue生命周期
vue生命周期1.0_人的-生命周期一组件从 创建 到 销毁 的整个过程就是生命周期Vue_生命周期1.1_钩子函数目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法初始化挂载更新销毁阶段方法名方法名初始化beforeCreatecreated挂载befor
2021-07-20 09:34:04
229
原创 案例：todo
根据已有的文件让vue文件跑起来怎么做？1.根据已有的 package.json 下依赖包 yarn install / yarn(可以省略 install)完成todo案例完整效果演示todo案例-创建工程和组件目标: 新建工程, 准备好所需的一切需求1: 创建新工程需求2: 分组件创建 – 准备标签和样式分析： ①：初始化todo工程 ②：创建３个组件和里面代码 ③：把styles的样式文件准备好 ④: App.vue引入注册使用, 最外层容器类
2021-07-19 12:16:41
608
5
原创 vue组件通信_单向数据流 / 父向子 / 子向父 自定义事件
vue组件通信_单向数据流目标: props变量本身是只读不能重新赋值目标：从父到子的数据流向,叫单向数据流原因: 子组件修改, 不通知父级, 造成数据不一致性如果第一个MyProduct.vue内自己修改商品价格为5.5, 但是App.vue里原来还记着18.8 - 数据 不一致了所以: Vue规定props里的变量, 本身是只读的父组件<template> <div> <!--3. 使用组件 --><MyproDuct v
2021-07-14 10:37:58
113
原创 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
320
原创 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
606
5
原创 vue组件 - 概念 - 基础使用 - 局部 - 全局
vue组件_概念组件是可复用的 Vue 实例, 封装标签, 样式和JS代码组件化 ：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)vue组件_基础使用目标: 每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件口诀: 哪部分标签复用, 就把哪部分封装到组件内(重要): 组件内template只能有一个根标签
2021-07-13 21:17:08
119
原创 vue组件通信_父向子-props
vue组件通信因为每个组件的变量和值都是独立的组件通信先暂时关注父传子, 子传父父: 使用其他组件的vue文件子: 被引入的组件(嵌入)例如: App.vue(父) MyProduct.vue(子)_vue组件通信_父向子-props目的: 从外面给组件内传值, 先学会语法, 练习中在看使用场景步骤:创建组件components/MyProduct.vue - 复制下面标签组件内在props定义变量, 用于接收外部传入的值App.vue中引入注册组件, 使用时, 传入
2021-07-13 21:16:24
138
原创 面试题 /vue中怎么自定义过滤器 /key的作用，为什么不能用索引 / 数组更新有的时候v-for不渲染
面试题1. Vue 中怎么自定义过滤器 Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式 全局的用Vue.filter() 局部的用filters属性2. Vue中:key作用, 为什么不能用索引 :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化 因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素 :key如果是索引, 因为索引是连续的
2021-07-12 12:20:08
258
原创 vue侦听器（复杂类型）-深度侦听和立即执行
vue侦听器-深度侦听和立即执行目标: 侦听复杂类型, 或者立即执行侦听函数语法:watch: { "要侦听的属性名": { immediate: true, // 立即执行 deep: true, // 深度侦听复杂类型内变化 handler (newVal, oldVal) { } }}<template> <div> 用户名：<
2021-07-12 12:14:12
339
原创 案例-品牌管理(数据缓存)侦听器-watch
案例-品牌管理(数据缓存)目标: 侦听list变化, 同步到浏览器本地需求: 把品牌管理的数据实时同步到本地缓存分析: ① 在watch侦听list变化的时候, 把最新的数组list转成JSON字符串存入到localStorage本地 ② data里默认把list变量从本地取值, 如果取不到给个默认的空数组效果: 新增/删除 – 刷新页面 – 数据还在在之前的案例代码基础上接着写 // 定义过滤器结构 filters: { shijian:(val) =&g
2021-07-12 12:01:56
142
原创 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
48
原创 computed 案例-反选
案例-反选目标: 反选功能需求: 点击反选, 让所有小选框, 各自取相反勾选状态分析:①: 小选框的勾选状态, 在对象的c属性②: 遍历所有对象, 把对象的c属性取相反值赋予回去即可图示:methods:{ btn(){ // 遍历所有对象，吧对象的c属性取相反值赋予回去即可 this.arr.forEach(item=>item.c = !item.c) }}<template> <div>
2021-07-12 10:44:18
105
原创 computed 案例-全选影响小选
案例-全选影响小选目标: 全选影响小选需求1: 获取到全选状态 – 改装isAll计算属性需求2: 全选状态同步给所有小选框分析:①: isAll改成完整写法, set里获取到全选框, 勾选的状态值②: 遍历数据数组, 赋给所有小选框v-model关联的属性图示:<template> <div> <span>全选:</span> <input v-model="isAll" type="checkbox"/&
2021-07-12 10:36:23
112
原创 computed 案例-小选影响全选
案例-小选影响全选目标: 小选框都选中(手选), 全选自动选中需求: 小选框都选中(手选), 全选自动选中分析:① 先静态后动态, 拿到静态标签和数据② 循环生成复选框和文字, 对象的c属性和小选框的选中状态, 用v-model双向绑定③ 定义isAll计算属性, 值通过小选框们统计c属性状态得来图示:模板标签和数据(直接复制在这基础上写vue代码)<template> <div> <span>全选:</span>
2021-07-12 10:18:33
156
原创 vue计算属性-computed-完整写法
vue计算属性-完整写法目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法语法:computed: { "属性名": { set(值){ }, get() { return "值" } }}<template> <div> 名字： <input v-model="name" type="
2021-07-12 09:26:24
4353
原创 vue案例-品牌管理(总价和均价)
案例-品牌管理(总价和均价)目标: 基于之前的案例, 完成总价和均价的计算效果此处只修改了变化的代码<tr style="background-color: #EEE"> <td>统计:</td> <td colspan="2">总价钱为: {{ allPrice }}</td> <td colspan="2">平均价: {{ avgPrice }}</td></tr>
2021-07-12 09:14:29
181
原创 vue计算属性-缓存
vue计算属性-缓存目标: 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果<template> <div> <h1>求 {{a}} + {{b}} 的和</h1> <p>求和的结果为：{{sum}}</p> <p>求和的结果为：{{sum}}</p> <p>求和的结果为：{{sum}}</p>
2021-07-11 18:19:00
410
原创 vue计算机属性-computed
vue计算属性-computed目标: 一个数据, 依赖另外一些数据计算而来的结果语法:computed: { "计算属性名" () { return "值" }}<template> <div> <h1>求 {{a}} + {{b}} 的和</h1> <p>求和的结果为：{{sum}}</p> </div></template&
2021-07-11 18:07:22
280
原创 vue过滤器-传参
vue过滤器-传参目标: 可同时使用多个过滤器, 或者给过滤器传参语法:过滤器传参: vue变量 | 过滤器(实参)<template> <div> <!-- 1.传一个 - 过去 --> <p> {{ msg | fan('-') }}</p> </div></template><script>export default { data(){
2021-07-11 17:38:19
1830
原创 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
87
原创 vue过滤器
vue过滤器-定义使用目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, 插值表达式和v-bind表达式Vue中的过滤器场景字母转大写, 输入"hello", 输出"HELLO"字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"语法:全局过滤器：Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})局部过滤器：filters: {过滤器名字: (值) => {retur
2021-07-11 16:25:43
96
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人