vue
文章平均质量分 75
夏河始溢
垆边人似月,皓腕凝霜雪。
展开
-
一零二、Vue中自定义emoji表情包
最近有需求要在后台管理支持自定义的emoji输入,记录一下开发过程。1. 表情包命名2. 定义表情包符合3. 编写emoji组件4. 页面中使用5. emoji展示1. 表情包命名表情包数量太多,命名到手抖 推荐使用神器 Everything 2. 定义表情包符合多端使用的话需要统一表情包的符号{ "xdx_001": "[-|xdx_001|-]" ...原创 2019-12-18 20:12:23 · 5245 阅读 · 9 评论 -
九九、vue组件的依赖注入
子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent.parent来访问,那曾孙子组件呢,是不是要写很多个parent来访问,那曾孙子组件呢,是不是要写很多个parent来访问,那曾孙子组件呢,是不是要写很多个parent。如果父组件下很多个子孙组件...原创 2019-11-21 20:04:20 · 425 阅读 · 0 评论 -
九八、vue15种组件通讯(传值)
vue14种组件通讯1. props2. $emit3. vuex4. attrs和listeners5. provide和inject6. children7. $refs8. $root9. .sync10. v-slot11. EventBus12. broadcast和dispatch13. 路由传参14. Vue.observable1. props这个应该非常属性,就是父传子的属...原创 2019-10-22 11:31:30 · 329 阅读 · 0 评论 -
九七、Vue开发技巧--你不知道的vue
Vue开发技巧--你不知道的vue1.require.context()2.watch2.1常用用法2.2 立即执行2.3 深度监听3. 14种组件通讯3.1 props3.2 $emit3.3 vuex3.4 attrs和listeners3.5 provide和inject3.6 children3.7 $refs3.8 $root3.9 .sync3.10 v-slot3.11 Event...原创 2019-10-21 20:37:08 · 737 阅读 · 0 评论 -
七三、vue ssr nuxt.js 使用简介
- **了解Nuxt.js的作用**- **掌握Nuxt.js中的路由**- **掌握layouts、pages以及components的区别**- **能够在Nuxt.js项目中使用element-ui**- **掌握Nuxt.js中异步获取数据的方式**- **掌握SEO的优化**原创 2018-11-28 18:38:01 · 951 阅读 · 1 评论 -
七五、Vue二次封装axios为插件使用
基本的封装要求:统一 url 配置统一 api 请求request (请求)拦截器,例如:带上token等,设置请求头response (响应)拦截器,例如:统一错误处理,页面重定向等根据需要,结合 Vuex 做全局的loading动画,或者错误处理将 axios 封装成 Vue 插件使用文件结构– http 封装axios模块文件夹---- config.js a...原创 2019-02-16 16:19:16 · 555 阅读 · 0 评论 -
八四、MVVM框架进阶与实现(手动实现一个简易版vue)
MVVM框架介绍M(Model,模型层 ),V(View,视图层),VM(ViewModel,视图模型,V与M连接的桥梁)MVVM框架实现了数据双向绑定当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改修改V层则会通知M层数据进行修改MVVM框架实现了视图与模型层的相互解耦几种双向数据绑定的方式1 发布-订阅者模式(backbone.js)一般通...原创 2019-05-14 18:41:35 · 463 阅读 · 0 评论 -
八五、vue进阶之路(Vue.extend,Vue.component,Vue.use)
Vue.extend,Vue.component,Vue.use原创 2019-06-05 10:47:00 · 3332 阅读 · 0 评论 -
九十、vue-cli3中使用sass全局变量
一、编写全局scss变量/src/common/global.csss$c-bg: #FF3259;$c-text-w: #ffffff;$c-text-E: #ECECEC;$c-content-w: 1205PX;$c-content-m: 375px;二、vue.config.js引入全局scssvue.config.jsmodule.exports = { ...原创 2019-08-12 12:12:21 · 2627 阅读 · 0 评论 -
七二、Vue服务器渲染Nuxt.js介绍篇
什么是ssrSSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器。优点SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串...原创 2018-11-26 15:48:28 · 243 阅读 · 0 评论 -
五九、vue使用经验
项目选型 vue (webpack-simple) 备选 react技术宅 . axios mint-ui sass rem 问题总结 . rem 低版本不兼容 采用项目组提供的 resize.js . 低版本不兼容 css3 es6 采用es6转换工具 css加上前缀,或者采用脚本自动加上。 . webpack-simple 设置extract-text-webpack-plug原创 2018-02-24 10:46:48 · 221 阅读 · 0 评论 -
二五、vue仿百度搜索框
html>html lang="en">head> meta charset="UTF-8"> title>仿百度搜索框title> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> meta name原创 2017-05-04 22:43:35 · 3212 阅读 · 0 评论 -
三一、vue笔记--新(一)
1.4.3 Vue常用系统指令插值表达式{{}}: 数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值 例如:span>Message: {{ msg }}span> Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。 无论何时,绑定的数据对原创 2017-05-18 22:49:53 · 412 阅读 · 0 评论 -
二八、vue2与vue1的区别(三)
26.vue2.0与vue1的区别在每个组件模板,不在支持片段代码 组件中模板: 之前: template> 我是组件我是加粗标签 template> 现在: 必须有根元素,包裹住所有的代码 template id="aaa"> div> 我是组件原创 2017-05-11 21:57:39 · 5884 阅读 · 0 评论 -
三四、vue中slot是什么东西?
主要是让组件的可扩展性更强,简单点说就是,能够在组件内写其他内容1.匿名slot使用//定义组件my-component //使用方法 我就是slot的替代内容,这里可以放任何标签元素,即使是一长串ul>li列表2.具名slot使用//定义组件my-componentdiv class="myComponent"> slot name="原创 2017-06-06 23:03:07 · 6333 阅读 · 0 评论 -
三六、vue中使用animate.css
1.npm install animate.css –save2.main.js中引入import animate from ‘animate.css’ Vue.use(animate)3.页面中使用<style type="text/css"> p { width: 300px; height: 300px; background: red; margin: 10原创 2017-08-01 13:46:18 · 9709 阅读 · 0 评论 -
四十、vue中封装jsonp
一、安装jsonp"dependencies": { "vue": "^2.3.3", "vue-router": "^2.5.3", "vuex": "^2.3.1", "fastclick": "^1.0.6", "vue-lazyload": "1.0.3", "axios": "^0.16.1", "jsonp": "0.2.1"},二、封装原创 2017-08-31 16:07:42 · 1897 阅读 · 0 评论 -
二六.vue2与vue1的区别(二)
16.vue过渡(动画)bower (前端包管理器)安装:npm install bower -g验证:bower --versionbower install 包名bower uninstall 包名bower info 包名 (查看包版本信息)transform 转换 变化 translate 转化 transition 过渡本质上是CSS3过渡 :tran原创 2017-05-07 22:16:32 · 552 阅读 · 0 评论 -
二三、vue2与vue1的区别(一)
vue学习笔记1、vue于angular的区别vue:一片html代码配合上JSON,在new一个vue实例。 适合移动端项目,小巧;发展势头很猛;angular:所有属性方法都挂在$scope上; 适合PC端项目共同点:不兼容IE低版本2、vue 基本雏形div id="app"> {{ message }}div> var app原创 2017-05-04 22:37:29 · 1702 阅读 · 0 评论 -
二四、vue实现todolist
html>html lang="en">head> meta charset="UTF-8"> title>texttitle> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> meta name="原创 2017-05-04 22:42:06 · 287 阅读 · 0 评论