随笔分类 - 前端专题
摘要: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单文件组件都由三部
阅读全文
摘要:webpack中的加载器 通过loader打包非js模块: 默认情况下,webpack只能打包js文件,如果想要打包非js文件,需要调用loader加载器,才能打包loader加载器包含: 常用的loader加载器包含: 1).less-loader 2).sass-loader 3).url-lo
阅读全文
摘要: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实例都可以用; 组件基础用
阅读全文