- 博客(61)
- 收藏
- 关注
RSS订阅原创 12-2-Detail组件开发-递归组件
使用递归组件实现详情页列表1.Detail组件中父组件中定义要显示的列表页数据list,并动态绑定到detail-list子组件上 <div> <detail-banner></detail-banner> <detail-header></detail-header> <div class="content"> <detail-list :list="list"></de
2021-07-08 21:34:12
219
原创 11-keepalive的使用
城市选择页面的请求只发送一次，选择的城市与上次缓存的不同时才再次发送首页的请求1.App组件中使用keep-alive将路由包裹进行缓存，首页的请求和城市选择页面的请求都只发送一次<template> <div id="app"> <!-- 显示当前路由地址所对应的内容 --> <keep-alive> <router-view/> </keep-alive> </div>
2021-07-07 20:04:46
143
原创 10-localStorage的使用
解决城市选择页面选择城市后回到首页刷新显示的还是默认城市上海的问题用户选择城市后，下一次登录应该显示上一次选择的城市，使用localStorage存储city的值，下一次登录优先使用localStorage中存储的值let deaultCity = '上海'try { if (localStorage.city) { deaultCity = localStorage.city }} catch (error) {}export default new Vuex.Store({
2021-07-06 22:03:39
327
原创 09-Home组件和City组件的页面联动
首页的当前城市和城市选择页面的当前城市联动使用vuex管理两个页面的都用到的数据，之前都是同一个页面的父子组件通讯。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。1.创建一个store文件夹，存放页面共享的数据每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。import Vue from 'v
2021-07-06 21:39:12
131
1
原创 08-City组件开发-搜索功能实现
输入框内输入城市名字或拼音显示对应城市1.City组件中为子组件绑定cities属性，值是父组件中的数据"cities"<template> <div> <city-header></city-header> <city-search :cities="cities"></city-search> <city-list :cities="cities" :hotCities="hotCities
2021-07-05 22:13:58
131
原创 07-City组件开发-点击/滑动字母显示对应城市区域
点击城市列表页的字母显示对应的城市区块1.Alphabet组件中（子）确认点击的是哪个字母，传递给父组件City，是子传父使用$emit<template> <div class="list"> <div class="item" v-for="item in letters" :key="item" :ref="item" @click="handleLetterClick" @touchstart="handleTouchStart" @t
2021-07-04 22:22:40
5042
原创 06-1-City组件开发-CityHeader
点击首页的城市选择跳转到城市列表页1.HomeHeader组件中使用router-link to=实现点击相应标签跳转到路由为/city对应的页面<router-link to="/city"> <div class="header-right"> {{this.city}} <span class="iconfont arrow-icon"></span> </div> </r
2021-07-03 20:53:25
167
原创 05-首页父子组件间传值
父组件向子组件传值1.Home.vue组件中在data中定义要传递给子组件的数据 export default { name: 'Home', components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend }, data () { return { city: '', swiperList: [], iconLis
2021-07-02 22:03:41
85
1
原创 03-3-Home组件开发-HomeIcons
Home页图标显示1.根据图标个数确定图标轮播页数利用computed计算属性，将每页显示的图标信息存放在对应页面的数组中computed: { pages () { const pages = [] this.iconList.forEach((item, index) => { const page = Math.floor(index / 8) //0 1 if (!pages[page]) { page
2021-07-01 20:32:32
103
原创 03-2-Home组件开发-HomeSwiper
Home页轮播图1.安装轮播图依赖注意：版本问题2.在main.js中引入项目依赖3.在Home.vue中导入轮播图子组件4.在Swiper.vue中编写轮播图的样式和业务逻辑轮播图的属性放在对象swiperOption中，比如：分页器的显示、循环要轮播的图片放在数组swiperList中，在模板中使用v-for指令遍历该数即可实现对应图片展示...
2021-06-30 21:32:12
218
原创 02-项目文件解释
文件说明1.index.html 是项目默认显示的页面 id=“app”2.src中的App.vue是项目的根组件，页面上的其他组件都挂载在其template中；main.js是项目的入口文件，新建vue实例el:#app，规定了页面包含哪些文件和组件；3.router中的 index.js是路由配置文件，存放路由规则，即路由对应的相应vue组件；单页面与多页面应用1.多页应用：页面每次跳转，都要发一个HTTP请求2.单页应用：不用发HTTP请求...
2021-06-29 21:12:43
97
原创 css-背景图片操作
背景图片尺寸 background-size参数说明: 1. 设置一个尺寸, 确定图片大小 => 100px 100px 2. conatin => 把图片自动缩小, 来适应盒子大小 => 图片相对长的那一个方向和盒子大小一致 3. cover => 把图片自动缩小, 来适应盒子大小 => 图片相对短的那一个方向和盒子大小一致背景图片原点 backgro
2021-05-12 21:59:18
143
原创 sass-01-了解sass
什么 SASS ? 目前市场上三大 css 预编译语言之一 1. SASS 2. LESS 3. Stylus 什么是 CSS 预编译语言 => 就是可以以语言的形式书写 css 样式 => 但是不能直接在浏览器运行, 需要编译成 css 文件以后运行 => 需要一个 工具, 工具可以把 sass 书写的代码编译成 .css 文件 => 一个叫做 SASS 的工具, 能把你写的 .sass 文件转换成 .css 文件去浏览器运
2021-05-12 21:01:55
80
原创 node-03-npm包管理器、nrm
npm 的基本使用 1. 下载第三方包 => 打开命令行, 切换到你需要下载第三方包的目录 => 输入指令 $ npm install 包名 => 会在当前目录下给你生成一个 node_modules 文件夹 => 你下载的第三方包就放在这个里面 => 注意: 1. 会自动创建 node_modules 文件夹 2. 默认下载的是当前这个包的最新版本 => 简写 $ npm i 包名 2.
2021-05-11 21:36:21
138
原创 node-02- 开发模式、模块化
node 开发模式必须 模块化 开发+ node 的模块化标准叫做 CommonJS => 其实就是导入导出文件的语法node 为什么必须模块化1. 前端 => 当 js 代码引入 html 页面使用的时候 => 一个 页面 引入 多个 js 文件 => 这些 js 文件之间会有一个共同的 window => 我想再别的文件里面使用的内容, 就挂载再 window 上2. node => js 代码在 命令行 里面运行 =>
2021-05-11 21:11:16
82
原创 JS-复习-34-设计模式
单例模式 一个构造函数一生只能有一个实例，不管你 new 多少次, 都是这一个实例 + 应用: => 自定义弹出层 => 结构: div > xxx, 默认隐藏, 在一定条件下显示 => 实现: 每次显示都是一个新的 div 还是一个 div 来回来去的显示 单例模式的核心代码 let instance = null function singleton() { if (!instance) insta
2021-05-07 21:55:50
49
原创 JS复习-33-事件轮询
事件轮询(客户端 Event Loop) + 就是 JS 代码的同步异步执行机制 调用栈 : 专门用来执行代码的栈 => LIFO: last in first out 队列 : 异步任务排队的位置 => 事件队列: Event queue => 微任务队列: Microsoft Queue -> Promise.then() => 宏任务队列: Macrosoft Queue -> ...
2021-05-06 21:47:01
154
原创 JS复习-32-继承
继承 extend 当多个构造函数需要使用一些共同的方法或者属性的时候 => 我们需要把这些共同的东西拿出来, 单独书写一个构造函数 => 让其他的构造函数去继承自这个公共的构造函数 + 概念 => 让 B 构造函数的实例能够使用 A 构造函数的属性和方法 => 我们管 B 构造函数叫做 A 构造函数的子类 => 我们管 A 构造函数叫做 B 构造函数的父类 + 目的: => 让
2021-05-06 21:05:15
66
1
原创 JS复习-31-闭包
闭包: 形成闭包的条件 1. 一个不会被销毁的函数执行空间 2. 函数内部 直接 或者 间接 的返回一个函数 3. 内部函数操作(访问, 赋值)着外部函数的变量 当三个条件都满足的时候 => 我们管内部的函数叫做外部函数的 闭包函数闭包的作用 1. 保护变量私有化 + 定义在函数内部的变量就是私有变量 2. 在函数外部访问函数内部的私有变量 + 利用闭包函数访问闭包的特点 1. 保护变量私有
2021-05-06 19:37:41
62
原创 JS复习-30-回调函数、Promise
Promise - 承诺 一个承诺三个状态 => 持续 pending => 成功 resolved => 失败 rejected ES6 的语法，专门用来解决回调地狱问题 Promise 的语法 + Promise 是 ES6 内置的构造函数 + 语法: new Promise(function () { 你要执行的异步的事情 }) => 实例化的时候, 这个函数接收两个参数 => re
2021-05-06 19:06:54
70
原创 JS复习-29-同源策略、跨域
同源策略 同源策略是浏览器给的一个行为 + 当你再发送请求的时候, 会涉及到两个地址 1. 打开当前页面的地址 2. 你要请求的地址 + 两个地址中的 端口号 域名 传输协议 => 只要由任意一个不一样, 就是非同源请求 => 就会触发浏览器的同源策略 => 不允许你获取这个服务器上的数据 触发了同源策略的请求叫：跨域请求 解决浏览器不允许请求别人家服务器的情况 + 基于 http 协议
2021-04-29 10:35:37
68
原创 前后端联合的购物页面项目
1.建立一个本地的购物网站域名建立本地域名后，项目文件就可以不用放在WWW文件夹中，任一个路径即可，在浏览器中访问建立的域名：www.shop.com2.建立基本html页面，设计CSS样式3.list页面的业务逻辑根据数据库中的分类渲染列表页面的分类选项发送ajax请求 -> 后端到数据库中查询，将分类列表返回给前端 -> 前端根据返回结果渲染分类选项...
2021-04-22 22:00:40
147
原创 JS复习-28-Ajax、异步
ajax 前后端交互的一种手段 + 通过 JS 向服务端发起请求 => 所有服务端返回的响应都不会直接显示再页面上 => 而是返回给 js 这个语言 说明: JS 和服务端交互 => 依赖于浏览器来发送请求 ajax => a: async => j: javascript => a: and => x: xml使用方式 1. 找到一个对象能帮我发送
2021-04-21 21:01:16
225
原创 JS复习-27-session
session + 一个存在于 服务器 端的存储空间 + 当他打开的那一瞬间, 就会生成一个 "密码" + 这个密码会自动存储到 cookie 里面 + 等到返回前端的时候, 会自动把这个带回去 + 只要你想向 session 空间里面存储内容或者获取内容 => 必须要先开启, 后使用开启 session 空间 + session_start();存储一些数据 + PHP 有一个内置的 关联型数组就叫做 $_SESSION值就是session_id
2021-04-20 21:28:13
45
原创 JS复习-26-后端操作cookie
后端操作 cookie 1. 获取 => php 天生自带一个关联型数组, 叫做 $_COOKIE => 里面包含所有的 cookie 信息 => 你想获取哪一个, 直接从关联型数组里面获取 2. 设置 cookie => 有一个方法叫做 setcookie() => 语法: setcookie(key, value, expires, path)/1. 后端获取 cookie print_r($_COOKIE);
2021-04-20 21:16:47
114
原创 JS复习-25-cookie、前端操作cookie
Cookie + 浏览器端的本地存储空间 + 用来存储一些数据cookie 的特点(记下来!!!) 1. 按照域名存储的 + 哪一个域名存储的, 在当前域名下就可以访问 + 换一个域名就不能访问 2. 按照文件路径存储 + 你在 a 文件夹下存储的数据 + 只能在 a 文件夹及子文件夹访问 + 在 a 文件夹的上级目录不能访问 3. cookie 的存储时按照字符串的形式存储 + 'key=value; key2=value2; key
2021-04-20 20:56:51
147
原创 JS复习-24-HTTP请求方式GET、POST
请求方式 + 前端和后端的交互手段 + 最早: 不分 GET POST => 后来为了语义化, 做了一些区分 => 本质是一样的常见的请求方式 HTTP/1.0 1. GET : 偏向于获取的方式 + 大部分都是给后端一些参数, 用来获取一些列数据 2. POST : 偏向于给服务器一些数据 + 大部分都是登录, 给服务器一些信息, 你给我一个简单的结果 3. PUT : 偏向于给服务器一些信息, 但是是添加使用
2021-04-19 22:05:27
252
原创 JS复习-23-HTTP传输协议及四个步骤
http 传输协议 + 前后端交互的方式 + 前端以什么样的形式发送数据给后端 + 后端以什么样的形式返回数据给前端传输协议 1. 必须经历四个步骤 1-1. 建立连接 1-2. 发送请求(前端给后端) 1-3. 返回响应(后端给前端) 1-4. 断开连接 2. 只能由前端发起 + 不能由后端主动沟通前端 3. 一次只能说一个事情 + 对于着一个事情你可以尽可能的描述的详细 + 但是一次连接只能沟通一个事情 4. 前后端
2021-04-19 21:44:49
215
原创 JS复习-22-登录功能实现
登录功能实现1、准备一个登录页面 login.html form 标签, 一个表单标签 + 有自动提交功能 + action: 提交到哪一个地址(哪一个 php 文件) + button 标签对: 等价于 submit 按钮, 点击的时候会自动提交 input + form 表单的自动提交 + 只会提交有 name 属性的表单 + name 的值作为 key,表单的 value 作为 value + 例子: => gu
2021-04-19 21:24:25
368
原创 JS复习-21-sql语句使用
查询的 sql 语句1. 查询所有 + SELECT * FROM `表` + 查询这个表里面的所有数据, 每一个数据的每一个字段都要$sql = 'SELECT * FROM `student`';2. 查询所有数据, 但是只要几个字段 + SELECT 字段1, 字段2, ... FROM `表`$sql = 'SELECT `name`, `age` FROM `student`';3. WHERE 关键字 + 按照条件查询 + SELECT * FROM `st
2021-04-19 20:52:34
748
原创 JS复习-20-php操作数据库的基本步骤
了解一下 mysql 数据库 关系型数据库，存储数据的 "仓库"(磁盘: D, E) + mysql 仓库是由很多的 database(库), 理解为 文件夹 => 一个网站的内容放在一个 库 里面 + 每一个 库 由多个 表 组成, 理解为一个文件 => 一类数据存储在一个表上 + 每一个表 由 表头 和 表体 组成 => 我们叫做 字段 和 数据导入 sql 文件 + 打开 MySQL 可视化工具 + 选择一个你要导入表的 库PHP
2021-04-19 20:02:56
97
原创 JS复习-19-php基础语法
书写 php + php 代码书写在一个 .php 后缀得文件里面 + 必须写在 php 标签对内部 <?php ?> + 写在外面得内容, 当你在浏览器去运行这个 php 文件得时候 + 都会被当 html 来解析注意: 1. 每一句话都要有分号 2. 你要运行 php 文件, 必须启动 apche, 在服务器环境下访问文件 => localhost 学习 php 代码的书写 1. 定义变量 => $名字 = 值; =&g
2021-04-19 19:34:19
82
原创 JS复习-18-ES6的类
ES6 的类 我们在 ES5 以前, 我们就用 函数 来充当 构造函数(类) + ES6 引入了一个 类 的概念 => 就是使用一个新的关键字来定义 构造函数(类) => 定义完毕以后, 就是一个类, 不能当作函数来调用 => 只能通过 new 来得到一个对象 类的语法: 语法: class 类名 { // 构造器, 我这个类创造的对象里面有哪些属性 constructor () {
2021-04-18 19:36:40
47
原创 JS复习-17-原型、原型链
对象访问机制当你访问一个对象的成员的时候, 会先在自己身上找 + 自己没有去到 __proto__ 上找 + 再没有, 再去 __proto__ 上找 + 一直找到顶级对象的 __proto__ 都没有 + 就返回 undefined 定义1: 每一个对象都有 __proto__ + 随便一个实例化对象的 __proto__ 是所属构造函数的 prototype 定义2: 每一个函数都有一个 prototype, 他是一个对象 + 每一个构造函数的 p
2021-04-17 16:27:53
89
1
原创 JS复习-16-面向对象编程、构造函数
面向过程与面向对象面向过程 => 按照顺序一步一步来面向对象(轮播图) => 找到一个对象, 能帮我完成轮播图 => JS 本身没有, 我们需要第三方 => swiper: 生成一个完成轮播图的对象 面向对象的本质：当你需要完成一个 功能A 的时候，我们找到 JS 有没有这个完成 功能A 的对象。如果没有, 我们 制造一个 "机器"。 "机器" 是什么： + 能力: 能创造一个 有属性 有方法
2021-04-16 17:13:51
70
1
原创 node-01-了解及基本操作
node 官方: 基于 Chrome V8 引擎的 javascript 运行时环境 私人: 一个 "软件", 能运行 JS 代码解析引擎前端: JS 三大核心 => DOM 文档对象模型: 因为你的 JS 是被引入再 html 文件里面 => BOM 浏览器对象模型: 因为你的 JS 是被运行再 浏览器 里面的 -> 需要用到浏览器的内核中的 解析引擎 来解析 js 文件执行 => ECMAScript 语法: JS 的语法标准n
2021-04-13 21:23:22
98
原创 JS复习-15-解构赋值
解构赋值定义: 快速从 对象 或者 数组 里面获取一些数据 1. 解构数组 => 语法: let [变量1, 变量2, ...] = [数据1, 数据2, ...] => 也可以解构多维数组 2. 解构对象 => 语法: let { key1, key2, ... } = { 键值对1, 键值对2, ... } => 解构的时候可以给解构的变量起一个别名 -> { na
2021-04-12 17:09:17
49
原创 JS复习-14-箭头函数及其this指向
ES6 的箭头函数一种新的函数定义方式，对于函数表达式的简写方式(匿名函数) + 匿名函数 => var fn = function () {} => var obj = { fn: function () {} } => setTimeout(function () {}, 0) => setinterval(function () {}, 0) => [].forEach(function () {})
2021-04-12 16:02:32
110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人