随笔分类 - Vue.js前端
摘要:使用NPM(Node.js包管理工具)安装依赖时速度特别慢,为了安装Express,执行命令后两个多小时都没安装成功,最后只能取消安装,笔者20M带宽,应该不是我网络的原因,后来在网上找了好久才找到一种最佳解决办法, 在安装时可以手动指定从哪个镜像服务器获取资源,我们可以使用阿里巴巴在国内的镜像服务
阅读全文
摘要:1.获取DOM元素和组件:this.$refs
阅读全文
摘要:1.父组件给子组件传值 2.父组件把方法传递给子组件
阅读全文
摘要:1.使用`flag`标识符结合`v-if`和`v-else`切换组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
阅读全文
摘要:1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){} // 4.
阅读全文
摘要:1.定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: + 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; +
阅读全文
摘要:Document 这是一个H3 --> 这是一个H3 --> 这是一个H3
阅读全文
摘要:可参考Vue中的动画:https://cn.vuejs.org/v2/guide/transitions.html 为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能; 1.不使用动画: 2.使用过渡类名实现动画 <!DOCTYPE html> <html lang="en">
阅读全文
摘要:代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e
阅读全文
摘要:1. 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的数据接口,浏览器认为这种访问不安全;2. 以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSO
阅读全文
摘要:1.vue-resource 实现 get, post, jsonp请求:https://github.com/pagekit/vue-resource 注意: 除了 vue-resource 实现数据 Ajax 请求之外,还可以使用 `axios` 的第三方包实现实现数据的请求 代码:
阅读全文
摘要:1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命周期函数分类: 2.1.创建期间的生命周期函数: + beforeCreate:实例刚在内存中被创建
阅读全文
摘要:1.自定义全局指令实现: 需求:为搜索名称关键字添加自定义指令:v-focus,使得进入页面后即获得焦点 需求:使用 Vue.directive()定义全局的指令v-focus 实现: [自定义指令参考](https://cn.vuejs.org/v2/guide/custom-directive.
阅读全文
摘要:1.按键修饰符的使用: 为name文本框添加keyup按键事件:监听特定键enter的事件(enter:Vue内部提供的) 2.系统自带的按键修饰符: 3.自定义按键修饰符: 如下: [js 里面的键盘事件对应的键码](http://www.cnblogs.com/wuhua1/p/6686237.
阅读全文
摘要:1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示; 2.过滤器调用时候的格式: 例如:下面HTML元素使用过滤器(在输出ctim
阅读全文
摘要:1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 --》勾选开发者模式 》加载已解压的扩展程序 》选择“chrome扩展”文件夹即可;
阅读全文