十：VUE
关注
分享
扫一扫
vue
库库好困
向各位大佬们致敬
展开
-
vue第14天：昨天的补充说明，项目基础配置：公共样式、rem插件以及配置、目录别名配置，登录页：布局、封装输入框以及按钮组件：基本结构、传参处理、校验规则、输入框提示信息的显示和隐藏
补充说明自动保存关掉vscode 左上角 => 自动保存不要勾以后注意: ctrl + s 保存代码缩进用两格缩进默认自动补逗号, 在 .prettierrc 加一行配置代码{ "semi": false, "singleQuote": true, "trailingComma": "none"}vue create 创建项目失败, 报错原因: node-sass 仓库资源下载失败, 默认这个资源在国外解决:yarn config原创 2020-08-09 11:40:50 · 523 阅读 · 0 评论 -
vue第13天：使用Vue脚手架搭建项目、项目介绍、产品开发流程、创建项目、使用Git管理项目、创建login组件-配置路由、项目基础：公共样式处理、在线图标库、rem插件配置、目录别名的配置
vue 脚手架使用脚手架搭建项目全局安装yarn global add @vue/cli 如果装不上 => 用 npm i @vue/cli -gvue -V 查看版本创建项目vue create 项目名先cd到项目目录, 再启动:yarn serve / npm run serve脚手架中配置webpack新建 vue.config.js 自动启动浏览器, 配置了端口号vue.config.js 中配置的内容, 会覆盖默认 vue-c原创 2020-09-07 17:43:44 · 435 阅读 · 0 评论 -
vue第12天：webpack处理Vue，webpack项目中路由的配置，Vue脚手架的使用 vue-cli：介绍、基本使用、步骤、目录说明，单文件组件的基本概念
webpack处理vuevue单文件组件的介绍single-file components(单文件组件) ，文件扩展名为 .vue 的文件，需要安装vetur插件以前定义组件非常麻烦, 需要写 template模板, 在里面需要写模板字符串, 但有了单文件组件就不用了单文件组件文档优势：完整语法高亮CommonJS 模块组件作用域的 CSS单文件组件的结构说明<template> <div> <h1>这是单文件组件的模板内容</原创 2020-08-05 20:51:07 · 466 阅读 · 0 评论 -
vued第11天：webpack-loaders的配置：处理css、less、图片、打包输出目录、清除目录插件，webpack开发服务器，生产环境和开发环境，ES6模块化使用
webpackwebpack - loaders 的配置webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader没有css-loader的报错演示require('./css/base.css')报错图演示:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bxC5UswQ-1原创 2020-08-04 11:10:27 · 497 阅读 · 0 评论 -
Vue第10天笔记：Vue动画（了解）、yarn命令的安装、webpack：介绍、基本步骤使用、npm中 --save和 --save-dev的区别、scripts的使用、配置到文件中、自动生成插件
前一天复习1. 自定义指令 (1) 定义使用 Vue.directive(指令名, 指令的配置对象) (2) 五个钩子函数 bind inserted update (3) 钩子函数的参数 el 指令所在的元素 binding 指令相关的信息对象 (1) name 指令名 (2) value 指令值 (3) arg 指令的参数 (4) modifiers 指令的修饰符2. 动画 vue中的动原创 2020-08-03 21:42:53 · 1107 阅读 · 0 评论 -
Vue第9天：路由：底部todos案例、自定义指令：认识、五个钩子函数、钩子函数的参数、自定义指令的使用、Vue动画（了解）：过渡实现、动画实现
复习 路由: 1. 基本使用 (1) 下载 (2) 引包 (3) 创建路由实例 (4) 挂载 --------------------------- (5) 配置路由规则 const router = new VueRouter({ routes: [ { path: ..., component: ... } ]原创 2020-08-03 01:27:59 · 275 阅读 · 0 评论 -
Vue第8天：作用域插槽、单页应用程序与路由、vue-router基本使用、步骤，到安徽那个高亮，路由重定向、编程式导航、动态路由匹配、letao案例操作
前一天复习组件通信1. 父传子(1) 给子组件以添加html属性的方式, 传值(2) 在子组件中, 可以通过 props 接收2. 子传父(1) 在子组件中, 通过触发事件的同时传值this.$emit(事件名, 参数, …)(2) 在父组件中, 给子组件注册对应的事件, 接收参数@事件名 = ‘fatherFn’3. 非父子(1) 先创建一个都能访问到的事件总线 (空的vue实例)const bus = new Vue()(2) 在A组件中, 触发bus的自定义事件, 并传值b原创 2020-07-31 12:16:39 · 228 阅读 · 0 评论 -
Vue第七天：组建通信：父传子、子传父、父传子复杂类型说明；组件化开发：非父子、开关灯案例；slot插槽：前置说明、基本语法、单个slot、具名插槽
组件通信每个组件都有自己的数据, 提供在data中, data是一个函数, 保证每个组件的数据是独立的封装成组件, 数据没法玩了~组件的通讯: 父传子 子传父 非父子组件通信 - 父传子需求: 就想要在子组件中使用根组件的msg每个组件都有自己的数据子组件通过prop属性接收父组件通过给子组件加属性方式传值todos 列表渲染练习 - 父传子子组件中 希望能用 父组件的东西子组件通过 props 接收父组件通过给原创 2020-07-29 17:10:14 · 341 阅读 · 0 评论 -
vue第6天：过滤器的使用、处理日期格式以及参数问题。Vue的异步dom更新、Vue响应式数据的说明、响应式数据的说明、组件化开发、组件通讯：父传子，子传父，非父子
过滤器过滤器的基本使用vue提供了过滤器的语法, 可以用于格式化文本 (日期)、封装对于字符串操作的过程基本使用 => 让英文转大写定义过滤器Vue.filter(过滤器名字, 处理字符串的函数)这个函数的返回值, 就是处理完成的结果函数的第一个参数，就是需要操作的字符串使用过滤器 {{ msg | 过滤器名字 }}代码演示： <body> <div id="app"> <h1>{{ msg | up原创 2020-07-27 22:34:43 · 317 阅读 · 0 评论 -
Vue第5天知识点：promise：异步函数与回调函数的说明嵌套、promise基本语法、解决回调函数问题以及优化、封装axios的发送、面试题循环队列以及宏任务与微任务、async和await
promise异步函数 与 回调函数的说明异步函数: 定时器setTimeout, ajax (异步函数的执行, 不会阻塞主线程代码的执行)回调函数:把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数什么时候会用到回调函数, 异步的时候 ajax success errorconsole.log(1)setTimeout(function() { console.log(2) setTimeout(function() {原创 2020-07-26 20:42:39 · 928 阅读 · 0 评论 -
vue第4天知识点：生命周期介绍以及图解、八个钩子函数、json-server的使用：安装、提供json文件、启动接口、以及通过axios编写todomvc案例（只写了增、删、改 三大功能）
生命周期与钩子函数生命周期介绍vue生命周期钩子函数简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期生命周期图解非常重要的图解实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为注意：vue再执行过程中会自动调用生命周期原创 2020-07-24 20:17:51 · 193 阅读 · 0 评论 -
vue第3天知识点：计算属性的基本使用、watch监视数据的使用以及对象、数据双向绑定原理：View-Model、Model-View-vue2.0、vue2.0实现与缺点、vue3.0实现
计算属性计算属性：当计算属性依赖的数据发生改变的时候，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。基本使用1、计算属性应写在computed对象中，每一个计算属性的值是一个函数并且必须有返回值。2、计算属性不可以和data中的属性重名3、计算属性在使用时，和data中属性的使用方法一样。直接用属性名不要加括号。基本语法：/*计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时，和调用data中属性一样，不要加括号原创 2020-07-23 10:08:31 · 253 阅读 · 0 评论 -
vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc
vue指令v-on指令https://cn.vuejs.org/v2/guide/events.html作用：绑定事件语法：v-on:click="say" or v-on:click="say('参数', $event)"简写：@click="say"说明：绑定的事件从methods中获取案例：跑马灯<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @clic原创 2020-07-22 11:33:47 · 335 阅读 · 0 评论 -
VUE第1天：为什么要学习vue、渐进式概念、框架概念、MVVM的概念、vue基本使用步骤、插值表达式、vue指令
为什么要学习vue公司对vue有要求 BOSS直聘在主流框架：angular、vue、react中，vue最容易学习。Vue课程介绍和基本概念课程介绍vue课程安排（22天）vue基础：vue的全家桶（vue/vue-router/vuex/vue-cli）+webpack+ES6vue进阶：项目实战（移动端+PC端）vue介绍vue 中文网Vue.js 是什么vue优点：易用、灵活、高效。1、易用：已经会了 HTML、CS原创 2020-07-19 21:33:38 · 291 阅读 · 0 评论