07 2021 档案
摘要：一、为什么需要定位？ 问题1：某元素可以自由在一个盒子内部移动位置，并压住其他盒子。 问题2：当滚动页面时，会发现有些盒子固定在屏幕中某个位置。 以前的标准流和浮动都无法实现上面2个问题。所以需要引入定位。 1.浮动盒子可以让多个块级盒子一行显示且中间没有缝隙，常用于横向排列盒子。 2.定位可以让盒
阅读全文
摘要：一、CSS遵循以下顺序： 1.布局定位属性：display/position/float/clear/visibility/overflow(display第一个写） 2.自身属性： width/height/margin/padding/border/background 3.文本属性：color
阅读全文
摘要：场景：前面使用浮动的场景前提都是父盒子的高度是确定的，但是实际情况父元素的高度是动态的，根据子盒子的排列高度来展示父盒子的高度。如果不设置父元素的高度。内部放置子盒子，会出现问题，就是父元素高度变成0.子盒子悬浮在父盒子上边的下方。效果如下： 1 <!-- 2 * @Author: invoker
阅读全文
摘要：网页布局一般原则： 1.先用标准流的父级元素排列上下位置，然后内部子元素在采用浮动排列左右位置。 浮动布局1： 参照： 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07
阅读全文
摘要：浮动特性： 1.浮动元素脱离标准流。 由于box是浮动的，所以飘起来了。而box2就占用了box原来的位置。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 2
阅读全文
摘要：浮动： 一、网页布局分为三种方式： 网页布局就是用CSS来拜访盒子。 1.标准流（普通流/文档流） 2.浮动 为什么要浮动？ 1.让多个块级盒子水平排成一行 方式1：:使用block转inline-block（行内块元素） 1 <!-- 2 * @Author: invoker 3 * @Githu
阅读全文
摘要：demo: 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 16:04:48 5 * @LastEditors: invoker 6 * @LastEditTi
阅读全文
摘要：1.border-radius:10px; 2.border-radius:50% 3.border-radius:10px 20px 30px 40px; 左上角，右上角，右下角，左下角。 4.border-radius:10px 20px; 表示左上角和右下角是10px，右上角和左下角是20px
阅读全文
摘要：1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 15:23:35 5 * @LastEditors: invoker 6 * @LastEditTime: 20
阅读全文
摘要：案例代码： 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 13:55:06 5 * @LastEditors: invoker 6 * @LastEditTi
阅读全文
摘要：嵌套盒子，希望内部盒子与外部盒子之间有一个间隔距离。 1.内部盒子使用margin-top，变换的却是2个盒子一起变动。原因后续补充。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date:
阅读全文
摘要：网页布局三大核心：盒子模型，浮动，定位。 一、网页布局过程： 1.准备好相关的网页元素，一般都是盒子Box. 2.用CSS设置好盒子的样式，摆放盒子到相应的位置。（核心） 3.往盒子里放东西 二、盒子模型（box model） 把html页面中的布局元素看成一个矩形盒子，一个装内容的容器。 CSS盒
阅读全文
摘要：CSS三大特性：层叠性,继承性，优先级。 一、层叠性。 相同的选择器设置同属性的样式，值不同。即发生样式层叠冲突。 因此，CSS的原则是：哪个样式离元素最近，就展示哪个样式。 对于这段代码，显示的就是red颜色。 1 <!-- 2 * @Author: invoker 3 * @Github: ht
阅读全文
摘要：一、背景色 默认元素都有背景色，只不过背景色是透明。 background-color: transparent; 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-1
阅读全文
摘要：1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:30:10 5 * @LastEditors: invoker 6 * @LastEditTime: 20
阅读全文
摘要：元素显示模式有3种，块元素，行内元素，行内块元素，他们分别有自己的特点。 一、块元素 常见块级元素：h1-h6,p,div,ul,ol,li.典型的是div 特点： 1.独占一行。 2.高度，宽度，内外边距,自己设置。 3.默认宽度是父级容器宽度的100%，默认高度是盒子内部内容的高度。如果没有内容
阅读全文
摘要：学习视屏：https://www.bilibili.com/video/BV14J4114768 复合选择器就是基础选择器的组合 一、.后代选择器 后代选择器即父选择器选择子选择器或则孙子选择器。总之，选择后代。 1 <!-- 2 * @Author: invoker 3 * @Github: ht
阅读全文
摘要：学习视屏：https://www.bilibili.com/video/BV14J4114768 一、内部样式 即在Html中任意位置使用<style></style>标签，内部编写样式。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github
阅读全文
摘要：一、文本颜色 文本颜色使用color,有多种定义颜色的方式。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 19:17:43 5 * @LastEditors
阅读全文
摘要：一、字体 1.1字体的书法样式：font-family 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 17:49:26 5 * @LastEditors: i
阅读全文
摘要：一、标签选择器 选择指定标签设置样式 优点：快 缺点：同类标签不能差异化 1.平级标签的样式 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compa
阅读全文
摘要：keep-alive保持活跃，这个如何使用？先看一些例子 一、在组件中使用生命周期回调函数 created(),destoryed(*),activated(),deactivated() 分别是创建，销毁，活跃，不活跃。 Home.vue中定义这4个函数 1 <template> 2 <div>
阅读全文
摘要：全局导航守卫：解释不清 需求：希望点击每个菜单是，网页的title显示菜单名称。 2种方式实现 方式1：每个组件通过回调生命周期函数时，来创建一个title元素 Home.vue,About.vue 1 <template> 2 <div> 3 <h2>我是首页</h2> 4 <router-lin
阅读全文
摘要：之前使用的parameters的方式传递参数，现在介绍另一个传递阐述的方式，query. 一、通过router-link使用query传递 1、创建Profile.vue组件 2、路由器定义了Profile组件的路由 3、在App.vue中使用<router-link>标签引用profile，但是引
阅读全文
摘要：以下是嵌套路由设置方法 一、创建嵌套组件 比如Home下有1个新闻列表和一个消息列表。分别创建新闻组件和消息组件，这2个组件和Home组件不是父子组件关系 HomeNews.vue 1 <template> 2 <div> 3 <ul> 4 <li>新闻1</li> 5 <li>新闻2</li> 6
阅读全文
摘要：一、vuecli 2 打包 npm run build进行打包，打包完成后检查dist下的包 dist/static/css dist/static/js 原因，原来的webpack打包始终只有一个文件，会导致文件过大，而这里vue cli2对包进行了分包，可以方便客户端浏览器加载。 分析下包： c
阅读全文
摘要：一、动态路由： 需求：希望页面点击不同用户名称链接（父组件），进入不同用户详情的Url（路由），且在用户详情页显示不同的详情信息（子组件） 逻辑：父组件的用户名称userName（数据源）-->将名称传给父组件的router-link(<router-link :to="‘/user/+userNa
阅读全文
摘要：1.可以通过代码的方式结合router-view来实现跳转 1 <template> 2 <div> 3 <!-- <router-link to="/home" tag="button" replace="" active-class="active">首页</router-link>--> 4
阅读全文
摘要：1.创建vue init webpack vuerouter项目 2.不使用vue-router创建。 3.npm install vue-router --save 单独安装 4.创建/router/index.js文件 1 import VueRouter from 'vue-router' 2
阅读全文
摘要：一、控制台的几个命令 1.刷新页面 console控制台设置： location.href = 'aaaa' 此时页面会重新请求页面数据 2.不刷新页面 console控制台设置： location.hash= ‘aaa’ 通过哈希的方式改变，前端不会重新请求前端数据。 3.不刷新页面2 conso
阅读全文
摘要：一、路由 路由作用：A在公网IP1给公网IP2的B发送一条信息msg1，到了公网IP2后，msg1信息会进入公网IP2的内部路由器，再有路由器参照路由内部IP与B所在的电脑mac地址分配信息给B。因此，路由的核心是内部有一个内网IP与电脑MAC的对应关系映射表。 二、前端渲染，后端渲染 阶段一：后端
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01-箭头函数</title> 6 </head> 7 <body> 8 <script> 9 // 1.定义函数的方式1 10 11 12
阅读全文
摘要：用vue cli2 新建2个项目，一个使用runtime-compiler,一个使用runtime-only，创建时选项： 创建后的项目对比main.js文件之间的区别： runtime-compiler方式生成的文件main.js中有模板和注册组件。 runtime-only方式生成的文件main
阅读全文
摘要：# 一、已完成持续集成的项目 ## 1.XX-运营后台-前端VUE持续集成DEMO已完成 1. teamcity服务器地址：xxx.xxx.xxx.xxx:8111 2. 访客登录账号和密码：guest/guest 3. project目录： 1. fyhq_testserver_vue_ci指的是
阅读全文
摘要：在自动化框架未完成之前，有时候还是得用postman来执行接口协助测试工作。这里简单说下postman执行sql和获取sql的demo. 1.工具：xmysql,Omysql xmysql只能连接一个数据库实例，对于跨实例的应用不太友好，且使用接口条件方式请求数据，不改好用。直接用Omysql Om
阅读全文
摘要：1.vue cli全局安装： 1.1 安装 npm install -g @vue/cli 1.2 拉脚手架2的版本（魔板）： npm install @vue/cli-init -g 备注:以上2步骤后脚手架2和脚手架3都可以用 1.3 创建Vue cli2初始化项目：vue init webpa
阅读全文
摘要：需求：目前webpack.config.js文件中即有开发环境的配置信息，又有测试环境的配置信息，比如：丑化插件希望生产环境配置，开发环境不希望配置，使用起来不太方便。 因此需要对webpack.config.js文件进行抽离。 安装插件：npm install webpack-merge@4.1.
阅读全文
摘要：webpack的插件使用。 一、配置版权 1.webpack.config.js中引用webpack, const webpack = require('webpack') 2.plugins中配置版权 new webpack.BannerPlugin('最终版权归invoker所有') 3.代码如
阅读全文
摘要：一、将Vue实例内的template,data,methods抽离到一个app对象中 main.js代码如下： import Vue from 'vue'; new Vue({ el:'#app', template:` <div> <h2>{{message}}</h2> <button @cli
阅读全文
摘要：真实项目都是使用的SPA，单页面复用 index.html文件内若需要展示内容，修改内容，需要经常修改index.html文件，这个不合理。因此将里面内容抽取到main.js中 index.html抽取的内容如下： 1.将index.html中的模板内容剪切到main.js中 2.原理，vue读取m
阅读全文
摘要：webpack想要打包vue，就需要安装vue 一、安装vue npm install vue --save 安装到本地node中，node_modules/vue 2.在main.js中引用vue 3.build： npm run build 4.浏览器查看Html文件，有报错 这个报错是因为使用
阅读全文
摘要：场景：前面一篇主要是webpack打包处理js文件的，在一个项目中还有样式less转css,es6转es5,jpg转成浏览器识别的，.vue转成js文件。 实际：webpack本身不能做上面的事情。 解决：需要扩展webpack，使用loader 浏览器找html中的main.js,main.js中
阅读全文
摘要：一、优化点1： 之前是在命令行敲编译命令：webpack ./src/main.js -o ./dist/bundler.js，显示可以进行配置。 希望优化：只需要敲webpack命令，无需手动设置出口（打包成功后的文件）和入口（需要打包的文件） 步骤： 1.终端执行命令:npm init ,安装n
阅读全文
摘要：功能用例自动化生成，接口用例自动化生成，单接口自动化测试，业务流程接口自动化造数据，切面UI自动化，即用接口造数据，然后对测试桩的页面进行页面测试。UI页面提交时，监听接口参数是否正确。
阅读全文
摘要：一、webpack有何用？ 问题1：前端的代码：样式less，浏览器不能读取less文件。 问题2：前端代码，es6的代码，部分版本低的浏览器只能读取解析es5的代码。 问题3：前端规范 CommonJS,AMD,CMD,ES6，浏览器如果没有底层支撑，则识别不了CommonJS,AMD,CMD.而
阅读全文
摘要：常见模块化规范：CommonJS,AMD,CMD,ES6的Modules,现在一般用到CommonJS和ES6的modules. 由于后续学习的webpack使用到了CommonJS.此处需要了解以下。 一、CommonJS模块化 CommonJS导出的语法： var flag = true fun
阅读全文
摘要：一、什么是编译作用域 官方准则：父组件模板的所有内容都会在父级作用域内编辑，子组件模板所有内容会在子级作用域内编译。 举个例子,在父组件Vue实例内定义一个变量 isShow=true，在子组件内也定义一个变量isShow=false，现在在父组件模板内的子组件中使用使用isShow，那么现在用的是
阅读全文
摘要：一、插槽的基本使用 场景：在实际项目中，很多页面有相似的模块（组件）架构,比如APP导航栏。 导航组件1： 导航组件2： 导航组件3： 以上三个页面共性部分就是左中右三个标签，左侧标签相同都是跳转连接，中间2个是title，1个是tab切换bar，右侧2个是跳转页面连接，1个为空。 对于这样的场景开
阅读全文
摘要：子组件访问父组件的对象，使用场景，较少，因为子组件访问父组件，会存在耦合度较高，不建议这么做。这里只做了解。 1 <!-- 2 @author:invoker 3 @project:project 4 @file: 18 组件通信 子访问父 parent root.html 5 @contact:i
阅读全文
摘要：背景:之前讲的父子组件之间的通信都是指传值，数据的传递。还有另一种方式叫做调用，即父组件直接调用子组件的对象，属性和方式，也是可以的。具体应用场景后面写项目时再来补充。 父组件访问子组件对象，需要用到关键字 $children 和 $refs 一、$children（开发中使用的较少） 需求：在父组
阅读全文
摘要：前置：父组件有data.num1,子组件通过props定义了cnum1来接收data.num1的值 需求：在子组件内定义个输入框,希望输入数据时能够改变父组件的data.num1的值。 思路：v-model双向绑定 1.通过v-model将子组件的输入框与props.cnum1双向绑定 代码如下：
阅读全文
摘要：场景：用户进入首页，点击分类导航栏获取分类数据信息。 逻辑原理是：一般所有的网络请求是通过最外层的父组件发送给服务器，而用户对系统的操作都是对子组件的操作。比如用户点击分类导航栏（分类导航栏是子组件）获得指定分类中的数据，用户就需要子组件将请求数据（分类：手机数码）发送给父组件。由父组件请求服务器获
阅读全文
摘要：子组件变量名称为驼峰标识时，在html中子组件中子组件的变量与父组件的变量绑定关系时，子组件标签中的变量需要使用横杆，比如子组件变量为childMessage，那么在html中子组件绑定父组件的标签就应该写成child-message。具体代码如下： 1 <!DOCTYPE html> 2 <htm
阅读全文
摘要：前面阐述了平级访问，即父组件的view层访问父组件的data层，直接通过插值显示即可简单访问。但是实际开发的场景如下： 1.结构：开发场景中一个主页面是一个父组件，内部很很多子组件，子组件内部又有子组件2.网络请求：一个页面的数据一般是由父组件请求网络数据后，再向下传递给子组件3.父子组件之间的通信
阅读全文
摘要：一、同级访问 父组件的components下即可以存放子组件的template，有可以存放子组件的数据和方法。子组件的结构和Vue实例结构是相似的。 另外，子组件的view层可以直接方位子组件的data，父组件的view层可以直接访问父组件的data 来个例子，同级访问： 1 <!-- 2 @aut
阅读全文
摘要：template中写html标签非常麻烦，如果标签复杂就更难于维护。因此需要将template内的标签抽离出来。 方式一：抽离到script中 1.全局组件的template抽离，将template的html标签模板写到script中，script的type属性为"text/x-template"，
阅读全文
摘要：之前创建组件的代码略显繁琐，可以简化，使用到语法糖。 1.未使用语法糖创建全局组件 1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-vue组件的基本使用.html 5 @contact:invoker2021@126.co
阅读全文
摘要：父组件和子组件，如何理解，当成一种组件关系理解。 对于全局组件而言，似乎没有父组件。 但是对于局部组件而言，每一个局部组件都是对应Vue实例的子组件。 第九行在root根上只需要使用父组件即可，子组件也会被渲染出来 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he
阅读全文
摘要：组件化开发是程序代码的分类复用，使用抽象的思想,将相同的页面模块抽象成一个组件，以便在不同页面复用，不同项目复用。 一、全局组件 解释下，全局组件就是构建的组件所有vue实例都可以用， vue组件创建的基本方法如下： 1.创建组件构造器 ： const cpn =Vue.extend({ templ
阅读全文
摘要：使用vuecli3的命令vue create shopmall创建项目后，需要划分项目目录结构。主要是src下的目录 一、创建目录结构 1.assets 资源下放置静态资源，如img/ css/ src/assets/img/ img文件 src/assets/css/ css文件，其中是用到nor
阅读全文
摘要：1.安装git 2.配置环境变量，将以下2个路径配置到操作系统的环境变量Path内：D:\Program Files\Git\mingw64\libexec\git-core;D:\Program Files\Git\bin 3.重启需要通过命令行发布git的编辑器，我用的是webstorm 4.登
阅读全文
摘要：一、v-model双向绑定初体验 前面学习的都是插入式展示后台数据，即后台提供什么数据，页面就如何展示。 现在学习一个新技能，v-model双向绑定。即做了双向绑定的数据，前台页面可以轻松改变后台数据。 v-model="message" 写法很简单。详见代码： 1 <!-- 2 @author:i
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script src='..js/vue.js'></script>
阅读全文
摘要：代码如下： 1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 05-购物车.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/1 15:25 8 @ve
阅读全文
摘要：需求：实现一个功能，点击的记录呈现一个颜色。 代码如下： <!-- @author:invoker @project:project_lianxi @file: 05-作业.html @contact:invoker2021@126.com @descript: @Date:2021/7/1 15:
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04 数组方法是响应式的</title> 6 </head> 7 <body> 8 <div id="app"> 9 <div> 10 <b
阅读全文
摘要：v-for用于循环遍历 一、遍历数组 界面有个ul和li的标签，需要在页面循环遍历动态展示多个li标签。 使用item表示数组中每一个元素，index表示索引值，索引值从0开始 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
阅读全文
摘要：一、v-if判断指令的基本使用 v-if v-else v-else-if 可以在标签中使用这些指令，vue会根据其值判断标签是否在界面渲染。同样也可以使用计算属性，无需在标签上写过多的逻辑判断 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met
阅读全文
摘要：v-on是事件监听指令，用于监听标签的一些列操作，如点击操作，如果坚挺到有点击操作，可以执行对应的内部方法。 一、事件监听基本使用代码如下, 1.做事件监听时，如果没有参数，在html中调用方法时，可以不使用括号() 2.事件监听的写法1是v-on:click="methodName" 3.事件监听
阅读全文
摘要：如代码所示，ES6对象增强写法可以减少代码量。 1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 03-对象的增强写法.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Dat
阅读全文
摘要：const表示定义常量 常量的特性： 1.const赋值后不能被改变 2.const声明时，需要赋值 3.const赋值的是对象，对象不能再被赋新值，但是对象内部的属性可以改变 so，const的实质其实对应常量保存的内存地址是否让改变,const对应的常量则不允许改变内存地址 1 <!-- 2 @
阅读全文
摘要：ES6中定义变量可以使用let和const，ES6之前只能使用var。 而let在for,if,函数中是有块级作用域，var在for,if模块中没有块级作用域，只有函数中有块级作用域 下面的例子中，点击界面按钮，在使用var时，由于var变量没有块级作用域，而程序在循环，虽然点击了第一个按钮，但是i
阅读全文
浙公网安备 33010602011771号