随笔分类 - vue
vue从0开始
摘要:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据; 使用vuex // 入口文件 import Vue from 'vue' // 配置vuex的步骤 // 1. 运行 cnpm i vuex -S
阅读全文
摘要:// 使用JS的形式进行路由导航 // 注意: 一定要区分 this.$route 和 this.$router 这两个对象, // 其中: this.$route 是路由【参数对象】,所有路由中的参数, params, query 都属于它 // 其中: this.$router 是一个路由【导航
阅读全文
摘要:1、Promise基本介绍 // 1. Promise 是一个 构造函数,既然是构造函数, 那么,我们就可以 new Promise() 得到一个 Promise 的实例; // 2. 在 Promise 上,有两个函数,分别叫做 resolve(成功之后的回调函数) 和 reject(失败之后的回
阅读全文
摘要:// 如何在 webpack 构建的项目中,使用 Vue 进行开发 // 复习 在普通网页中如何使用vue: // 1. 使用 script 标签 ,引入 vue 的包// 2. 在 index 页面中,创建 一个 id 为 app div 容器// 3. 通过 new Vue 得到一个 vm 的实
阅读全文
摘要:// 这是 Node 中向外暴露成员的形式:// module.exports = {} // 在 ES6中,也通过 规范的形式,规定了 ES6 中如何 导入 和 导出 模块// ES6中导入模块,使用 import 模块名称 from '模块标识符' import '表示路径' // 在 ES6
阅读全文
摘要:什么是webpack?1、webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具; 2. 使用Webpack, 是基于整个项目进行构建的;+ 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。+ 根据官网的图片介绍we
阅读全文
摘要:计算属性 computed <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m
阅读全文
摘要:1、监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
阅读全文
摘要:1、什么是路由 1. **后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 2. **前端路由:**对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内
阅读全文
摘要:1、父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
阅读全文
摘要:1、组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同: + 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; + 组件化:
阅读全文
摘要:完整的动画为入场和离场 1、过渡类实现淡入淡出动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
阅读全文
摘要:发送请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
阅读全文
摘要:生命周期事件(生命周期钩子) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
阅读全文
摘要:1、全局指令 // 自定义全局按键修饰符 Vue.config.keyCodes.f2 = 113 // 使用 Vue.directive() 定义全局的指令 v-focus // 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀, // 但是: 在调用的时候,
阅读全文
摘要:过滤器采用就近原则,即优先使用私有过滤器。1、全局过滤器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
阅读全文
摘要:<!-- 1. MVC 和 MVVM 的区别 --> <!-- 2. 学习了Vue中最基本代码的结构 --> <!-- 3. 插值表达式 v-cloak v-text v-html v-bind(缩写是:) v-on(缩写是@) v-model v-for v-if v-show --> <!--
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要:1、循环普通数组 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文