08 2022 档案
摘要:Vue脚手架可以快速生成Vue项目基础的架构。 安装3.x版本的Vue脚手架: npm install -g @vue/cli 基于3.x版本的脚手架创建Vue项目: 使用命令创建Vue项目: vue create my-project 选择Manually select features(选择特性
阅读全文
摘要:传统Vue组件的缺陷: 全局定义的组件不能重名,字符串模板缺乏语法高亮,不支持css(当html和js组件化时,css没有参与其中)没有构建步骤限制,只能使用H5和ES5,不能使用预处理器(babel) 解决方案:使用Vue单文件组件,每个单文件组件的后缀名都是.vue每一个Vue单文件组件都由三部
阅读全文
摘要:什么是宾语? 动作、介词所涉及的对象。 分为动宾和介宾: 动宾:跟在谓语动词之后,doing/to do都可表示 介宾:跟在介词之后,只能使用doing表示,不能使用to do 宾语和表语: 相同:都跟在谓语动词之后。 不同点:跟的动词不同,宾语跟在及物动词之后,表语跟在系动词之后。 什么可以作宾语
阅读全文
摘要:什么是谓语? 除了主语以外的内容都可称为是谓语,用来表达所有说明的内容。 什么是谓语动词? 谓语中的核心。 谓语动词在简单句(一件事)中的位置? 通常在主语之后,但倒装除外。 简单句(一件事)中有几个谓语动词? 仅有一个,但不限于是一个词,可能是一个整体。 例句: At that time he h
阅读全文
摘要:webpack中的加载器 通过loader打包非js模块: 默认情况下,webpack只能打包js文件,如果想要打包非js文件,需要调用loader加载器,才能打包loader加载器包含: 常用的loader加载器包含: 1).less-loader 2).sass-loader 3).url-lo
阅读全文
摘要:什么是主语? 句子说明的主要对象。 什么可以作主语? (1)名词 (2)代词 (3)doing (4)todo (5)从句 (6)并列多个 主语在简单句(一件事)中的位置? 先找谓语动词再找主语。 On the way, a young man waved to me. (新概念二册, Lesson
阅读全文
摘要:webpack介绍: webpack是一个流行的前端项目构建工具,可以解决目前web开发的困境。webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性 webpack入门: 1、创建项目目录并初始化: 创建项目,并打开项目所在目录的终端,输入命
阅读全文
摘要:默认导出 export default { 成员A, 成员B, ....... },如下: let num = 100; export default{ num } 默认导入 import 接收名称 from "模块标识符",如下: import test from "./test.js" 注意:在
阅读全文
摘要:安装babel 打开终端,输入命令:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 安装完毕之后,再次输入命令安装:npm install --save @babel/polyfill 创建bab
阅读全文
摘要:模块化的分类 浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义)代表产品为:Require.js2).CMD(Common Module Definition,通用模块定义)代表产品为:Sea.js 服务器端的模块化 服务器端的模块化规范是使
阅读全文
摘要:案例效果: 需求: 点击左侧的"用户管理","权限管理","商品管理","订单管理","系统设置"都会出现对应的组件并展示内容。其中"用户管理"组件展示的效果如上图所示,在用户管理区域中的详情链接也是可以点击的,点击之后将会显示用户详情信息。 思路分析: 1)先将素材文件夹中的11.基于vue-ro
阅读全文
摘要:命名路由:给路由取别名 const User = { props: ['id', 'uname', 'age'], template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>' } // 创建路由实例对象
阅读全文
摘要:嵌套路由的概念 当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。 嵌套路由最关键的代码在于理解子级路由的概念: 比如我们有一个/login的路由那么/login下面还可以添加子级路由,如: /login/account /login/phone 参考代码如下: <!DOCTYPE ht
阅读全文
摘要:Vue Router简介 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。 Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue
阅读全文
摘要:路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。 路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠hash值(锚链
阅读全文
摘要:async/await使用: async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象 await函数不能单独使用 async/await 让异步代码看起
阅读全文
摘要:介绍: 基于promise用于浏览器和node.js的http客户端 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 能转换请求和响应数据 基本用法: axios.get('http://localhost:3000/adata').then(function
阅读全文
摘要:Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。 基本使用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
阅读全文
摘要:使用express模拟后端 myapi工程:index.js const express = require('express') const app = express() const bodyParser = require('body-parser') // 处理静态资源 app.use(ex
阅读全文
摘要:1、组件化布局 把静态页面转换成组件化模式 把组件渲染到页面上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .contai
阅读全文
摘要:插槽: 组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力 匿名插槽 <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box
阅读全文
摘要:父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。 然后子组件用属性props接收。 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制。 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在
阅读全文
摘要:组件 组件 (Component) 是 Vue.js 最强大的功能之一; 组件可以扩展 HTML 元素,封装可重用的代码; 组件注册 全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个组件对象; 全局组件注册后,任何vue实例都可以用; 组件基础用
阅读全文
摘要:图书管理案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 53
阅读全文
摘要:变异方法: 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变。 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展。 <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要:实例生命周期: 事物从出生到死亡的过程 Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。 常用的钩子函数: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do
阅读全文
摘要:过滤器: Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。 过滤器可以用在两个地方:双花括号插值和v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示。 支持级联操作。 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。 全局注
阅读全文
摘要:计算属性的使用(computed): 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <
阅读全文