11 2021 档案
摘要：1 官方文档 vant定制主题的核心：less变量的覆盖 https://vant-contrib.gitee.io/vant/#/zh-CN/theme 本项目：手动引入样式 + vue-cli搭建项目 2 实现方案1（不推荐） 重启项目 3 实现方案2（推荐） https://less.boot
阅读全文
摘要：1 了解vant中list的基本用法 https://vant-contrib.gitee.io/vant/#/zh-CN/list 2 实现上拉加载更多功能 3 实现下拉刷新功能 https://vant-contrib.gitee.io/vant/#/zh-CN/pull-refresh
阅读全文
摘要：1 了解获取列表数据的API接口 2 安装axios、封装utils目录下的request模块 安装axios 不采用上述方式使用axios。封装模块示意图如下 3 在Home组件中封装initArticleList() 修改配置文件，重启项目 (34条消息) vue 报错Syntax Error:
阅读全文
摘要：文档：http://doc.toutiao.liulongbin.top/ 1 搭建初始项目、梳理项目结构 npm run serve 结论：通过路由切换的组件放到views里；不是通过路由进行切换、可复用的组件放到components中。 清空App.vue，通过<回车生成vue空模板 清空com
阅读全文
摘要：1 案例效果 2 案例所涉及知识点 3 初始项目 npm install npm audit fix npm run serve http://localhost:8080/ 4 安装和配置路由 新建终端，安装vue-router 安装成功后关闭该终端即可 5 基于路由渲染登录组件 6 模拟登录功能
阅读全文
摘要：4 声明式导航、编程式导航 location.href属于js，不是vue特有的 4-1 vue-router中的编程式导航API 4-2 API#1: $router.push 4-3 API#2: $router.replace 4-4 API#3: $router.go 4-5 $router
阅读全文
摘要：1 路由重定向 2 嵌套路由 2-1 声明子路由链接和子路由占位符 2-2 通过children属性声明子路由规则 2-3 默认子路由 3 动态路由 3-1 动态路由匹配 1、2、3表示电影的id 3-2 动态路由的概念 3-3 $router.params参数对象 3-4 使用props接收路由数
阅读全文
摘要：1 什么是vue-router https://router.vuejs.org/zh/ 2 vue-router安装和配置的步骤 2-1 在项目中安装vue-router 项目运行中，新建终端进行安装即可，不需非要暂停正在运行的项目 -S 等价于 --save 将目标包安装到dependencie
阅读全文
摘要：1 初始项目 npm i 或 npm install npm audit fix npm run serve 2 路由 & 前端路由 & 哈希地址/锚链接 在单页面项目中，url地址与页面上组件之间的对应关系 hash地址即url中的锚链接（#） 锚链接虽然不会导致页面刷新，但会在浏览器中产生历史记
阅读全文
摘要：1 初始项目 + demo-3-eslint项目 App.vue清空，使用<回车创建一个基本的空vue模板结构 components下的Helloworld.vue删除；创建Right.vue和Left.vue <template> <div> <h1>App根组件</h1> <hr /> <div
阅读全文
摘要：1 eslint官网 https://eslint.bootcss.com/ 2 vscode中tab设置 老师建议tab都改成2，因为前端代码tab为4的话，代码往后缩的很快，不美观 3 利用vue-cli创建初始项目 4 了解eslint配置文件中的rules规则 5 js调试：浏览器Sourc
阅读全文
摘要：1 自定义指令的概念 2 私有自定义指令 & 使用自定义指令 3 为自定义指令动态绑定参数 & 通过binding.value获取所绑定值 4 update函数 原因：点击按钮并不会触发bind函数 解决： 5 函数简写 从4 update函数这一小节可以看出，bind()和update()内容一致
阅读全文
摘要：1、初始项目 npm i npm audit fix 2 案例需求 >> 之前的案例中孙子组件Counter通过EventBus向外层App组件传值，有点绕 现在期望利用插槽来进行改进 3 初步实现 4 进一步实现 5 最终实现 6 源码 “开天窗”，直接孙子组件与外层组件进行数据传递 :num="
阅读全文
摘要：1 初始项目 同HMVue6.1 npm install 或者 npm i 也行 npm audit fix 2 什么是插槽 3 插槽的基础用法 3 v-slot指令(简写#) 4 插槽的后备内容 5 具名插槽 5-1 课件 5-2 vant库插槽例子 具名插槽：自定义名字的插槽 匿名插槽：不带自定
阅读全文
摘要：1 初始项目 npm install npm audit fix <template> <div class="app-container"> <h1>App 根组件</h1> <hr> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> </div> <
阅读全文
摘要：1 案例效果 & 实现步骤、初始项目 1-1 课件 1-2 初始项目装包&运行 npm install npm audit fix npm run serve http://localhost:8080/ 2 导入、注册、使用Header组件 <template> <div class="heade
阅读全文
摘要：1、数组的some方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要：1 引言 2 什么是ref 3 使用ref引用DOM元素 3 使用ref引用组件实例 4 ref案例：控制文本框和按钮的按需切换 5 ref案例：让文本框自动获得焦点、this.$nextTick(cb) cb是指callback，回调 报错原因：this.$refs.iptRef.focus()中
阅读全文
摘要：1 初始项目 npm run serve http://localhost:8080/ 2 课件 3 父组件向子组件共享数据 自定义属性 props中的数据建议不要直接修改(容易报错)，要想修改，建议转存到data中再改 4 子组件向父组件共享数据 自定义事件 5 兄弟组件间的数据共享 EventB
阅读全文
摘要：1 课件 & vue组件生命周期图 2 初始项目 3 组件生命周期 3-1 组件创建阶段：beforeCreate() 3-2 组件创建阶段：created() 模板结构尚未生成，即dom尚不可用 3-3 两个黄色背景菱形判断框(no，仅el无template) + 两个绿色背景处理框(no，编译e
阅读全文
摘要：1 vue编译器 import Vue from 'vue' import App from './App.vue' //导入需要被全局注册的组件 import Count from '@/components/Count.vue' Vue.component('MyCount', Count) V
阅读全文
摘要：1 课件 2 组件样式冲突问题 3 scoped的底层实现原理 4 scoped属性 <template> <div class="left-container"> <h3>Left 组件</h3> <hr> <!-- <MyCount></MyCount> --> <!-- <MyCount in
阅读全文
摘要：1 组件left和组件right中的子组件count互不影响、单行代码函数简写 <template> <div> <h5>Count组件</h5> <!-- <MyCount></MyCount> 不可以在自己中调用自己，会报错 --> <p>count的值是：{{count}}</p> <butt
阅读全文
摘要：1 初始项目 2 课件 因为没有在组件C中注册组件F；在组件C中用component注册组件F就可以用了 3 组件间的父子关系&使用组件的三个步骤 <template> <div class="left-container"> <h3>Left 组件</h3> </div> </template>
阅读全文
摘要：1 Test.vue 2 $mount 和 el <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
阅读全文
摘要：1 什么是单页面应用程序 2 什么是vue-cli 介绍 | Vue CLI (vuejs.org) 3 安装和使用vue-cli 3-1 课件 npm install 也可以写为 npm i 3-2 安装vue-cli & 查看本地vue版本 3-3 关于“在非管理员身份打开dos环境下，输入vu
阅读全文
摘要：1 axios 是一个专注于网络请求的库 2 axios 的基本使用 2-1 课件 2-2 axios基本使用(以get为例)、axios封装的6个属性、postman使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
阅读全文
摘要：1 计算属性及其特点 2 使用计算属性改造案例 2-1案例-原版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
阅读全文
摘要：1 侦听器的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要：1 过滤器的注意事项 2 过滤器的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：1 2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
阅读全文
摘要：1 2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
阅读全文
摘要：1 双向数据绑定指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
阅读全文
摘要：1 事件绑定指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
阅读全文
摘要：1 vue指令分类 2 内容渲染指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
阅读全文
摘要：1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
阅读全文
摘要：1 什么是vue 2 vue的特性 2.1 数据驱动视图 PS：页面结构指html，页面所依赖的数据指js 2.2 双向数据绑定 2.3 MVVM 2.4 MVVM的工作原理 3 vue的版本
阅读全文
摘要：1 npm run dev 2 只要修改了配置文件，就需要重启webpack npm run dev 3 npm run build 所以，项目发布/不熟上线时（生产环境），为了安全考虑，应关闭source map（注释devtool） 4 推荐：属于是一种折中的方案 npm run build 访
阅读全文
摘要：1 2 package.json中"scripts"的--mode优先级高，会覆盖掉webpack.config.js中module.exports设置的mode，所以webpack.config.js中直接将mode固定为development即可 开发阶段：npm run dev ，生成的bun
阅读全文
摘要：
good good study
day day up
阅读全文
good good study
day day up
阅读全文
摘要：1、webpack中插件的作用 2、webpack-dev-server插件 webpack 报错 [webpack-cli] Unable to load '@webpack-cli/serve' command - Evengod - 博客园 (cnblogs.com) 例如localhost:
阅读全文
摘要：1、前端工程化 2、webpack的基本使用 webpack使用案例 使用vscode打开change-rows-color项目，在src下新建index.html & index.js -S可以替换为--save，作用是将安装的模块记录到package-lock.json文件中（具体体现在depe
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let nu
阅读全文
摘要：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili 1、初识vue <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title> <!-- 引入Vue --> <scr
阅读全文
摘要：1 <template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-f
阅读全文
摘要：Main.vue <template> <div> <el-container> <el-aside width="200px"> <el-menu 
efault-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i
阅读全文
efault-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i
阅读全文
摘要：<template> <h1>用户列表</h1> </template> <script> export default { name: "List" } </script> <style scoped> </style> <template> <h1>个人信息</h1> </template> <
阅读全文
摘要：<template> <h1>首页</h1> </template> <script> export default { name: "Main" } </script> <style scoped></style> <template> <div> <el-form ref="loginForm"
阅读全文
摘要：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili <template> <div id="app"> </div> </template> <script> export default { name: 'App' } </script> <style> #app { f
阅读全文
摘要：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili 1、hello vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>P4-helloworld</title> </head>
阅读全文
摘要：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili
阅读全文
摘要：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili
阅读全文
