随笔分类 - Vue
摘要：Vue09-浏览器本地存储+组件自定义事件 1.浏览器本地存储-WebStorage 浏览器存储内容一般支持在5M左右，不同的浏览器可能不同。 浏览器通过window.localStorage和window.sessionStorage实现本地存储。 关于localStorage和sessionSt
阅读全文
摘要：Vue08-TodoList案例 1.TodoList案例 TodoList案例是一个未完成事情和已经完成事情管理的案例。 TodoList中总共包含五个组件。App.vue；MyHeader.vue；MyFooter.vue；MyList.vue；MyItem.vue。 2.main.js imp
阅读全文
摘要：Vue16-Vue UI组件库 1.移动端常用组件库 Vant，https://youzan.github.io/vant。 Cobe UI, https://didi.github.io/cube-ui。 Mint UI, https://mint-ui.github.io。 2.PC端常用组件库
阅读全文
摘要：Vue15-路由(vue-router) 1.路由简介 vue-router（路由）是vue中的一个插件库，专门用来实现SPA应用。 SPA简介。 SPA，Single Page Web Application，即单页面Web应用，整个应用只有一个完整的页面。 SPA应用中点击页面中的导航链接不会刷
阅读全文
摘要：Vue14-vuex 1.vuex简介 vuex是vue中一个集中式状态（数据）管理的vue插件，可以对vue应用中多个组件的共享状态进行集中式的管理（读/写）；vuex也是一种组件间通信的方式，且适用于任意组件间通信。 vuex的Github地址https://github.com/vuejs/v
阅读全文
摘要：Vue13-插槽 1.插槽简介 插槽可以让父组件向子组件中指定位置插入HTML结构。是一种组件间通信的方式，适用于父组件到子组件的通信。 插槽可以分为默认插槽、具名插槽和作用域插槽。 2.默认插槽 父组件中设置插槽的数据。 <template> <div class="container"> <!-
阅读全文
摘要：Vue12-跨域+前端发送请求 1.前端发送请求的四种方式 XHR，XMLHttpRequest。XHR是JS内置发送请求的方式，发送请求的过程比较繁琐，所以一般不直接使用XHR发送请求，而是对XHR封装后使用。 jQuery。jQuery通过$.get()和$.post()发送请求，jQuery是
阅读全文
摘要：Vue11-原生动画+vue动画 1.原生动画 <html lang="en"> <head> <meta charset="UTF-8"> <title>01-原生过度和动画</title> <style> h3 { background-color: orange; } @keyframes d
阅读全文
摘要：Vue10-全局事件总线+消息订阅和发布 1.全局事件总线 全局事件总线是一种组件之间通信的方式，可以实现任意组件之间的通信。 安装全局事件总线。 new Vue({ ... beforeCreate() { Vue.prototype.$bus = this; // 安装全局事件总线，将$bus指
阅读全文
摘要：Vue07-脚手架+ref+props+插件+scoped 1.脚手架-脚手架简介 Vue脚手架是Vue官方提供的标准化开发工具，最新的版本是5.x。 Vue脚手架官方文档地址，文档: https://cli.vuejs.org/zh/。 Vue脚手架也称为Vue CLI，CLI表示command
阅读全文
摘要：Vue06-非单文件组件和单文件组件 1.非单文件组件-模块化和组件化的定义 模块是向外提供特定功能的js程序, 一般就是一个js文件。 组件的定义：实现应用中局部功能代码和资源的集合。 模块化：当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。 组件化：当应用中的功能都是用组件的方式
阅读全文
摘要：Vue05-自定义指令+生命周期 1.自定义指令-自定义v-big和v-find指令 <body> <div id="app"> <!-- 1 定义v-big指令，功能和v-text指令类似，但是会将绑定的数字放大10倍。 --> <p>n值 <span v-text="n"></span></p>
阅读全文
摘要：Vue04-表单数据收集+过滤器+内置指令 1.表单数据收集 <body> <div id="app"> <!-- 1 <input type="text"/>，v-model收集的是value值，用户输入的就是value值。 2 <input type="radio"/>，v-model收集的是v
阅读全文
摘要：Vue03-样式操作+列表数据渲染+数据监视 1.绑定class和style <html lang="en"> <head> <meta charset="UTF-8"> <script src="../js/vue.js"></script> <style> .basic { width: 300
阅读全文
摘要：Vue02-计算属性+监视属性 1.计算属性-使用插值表达式和methods实现和计算属性相同的效果 <body> <div id="app"> <input type="text" v-model="firstName"> <br><br> <input type="text" v-model="
阅读全文
摘要：Vue01-数据绑定+数据代理+事件处理 1.入门程序 <html lang="en"> <head> <meta charset="UTF-8"> <!-- 引入vue.js --> <script src="../js/vue.js"></script> </head> <body> <div
阅读全文
