随笔分类 - vue学习
摘要：传统组件的问题和解决方案 -1、问题 1、全局定义的组件必须保证组件的名称不重复 2、字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \ 3、不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏 4、没有构建步骤限制，只能使用HTML和ES5JavaScrip
阅读全文
摘要：命名路由的配置规则 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。 在链接路由时通过 :to 绑定路由，name 属性用来确定链接的路由名称，params 传递参数 const router = new VueRouoter({ router: [ { path: '/u
阅读全文
摘要：动态路由匹配 动态路由匹配的基本使用 当我们需要许多类似路由（例如用户界面，不同用户登录的界面不相同），就需要写许多基本相同的路由，这个时候我们就可以使用动态路由来解决这个问题。 应用场景：通过动态路由参数的模式进行路由的匹配 在通过路由设置完成后，通过 $router.params 获取路由的参数
阅读全文
摘要：嵌套路由 嵌套路由功能分析 点击父级路由链接显示模板内容 模板内容中又有子级路由链接 点击子级路由链接显示子级模板内容 父路由组件模板 父级路由链接 父组件路由填充位 <p> <router-link to="/user">User</rputer-link> <router-link to="/r
阅读全文
摘要：Router基本使用 基本使用步骤 引入相关的库文件 添加路由链接 添加路由填充位 定义路由的组件 配置路由规则并创建路由实例 把路由挂载到Vue根实例中 引入相关库文件 <!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 --><script scr='./lib/vu
阅读全文
摘要：路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： 后端路由 PSA（Single Page Application） 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 SPA（Single P
阅读全文
摘要：async/await的基本用法 这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。 async/await是ES7引用的新语法，可以更加方便的进行异步操作 async关键子用于函数上（async函数的返回值是Promise实例对象） await关键字用于as
阅读全文
摘要：axios拦截器 请求拦截器 在请求发出之前设置一些信息 //添加一个请求拦截器 axios.interceptors.request.use(function(config){ //在请求发出之前进行一些信息设置 //必须把configreturn出去否则不生效 return config; },
阅读全文
摘要：axios的基本特征 axios是一个基于Peomise用于浏览器和node.js的HTTP客户端 它具有以下特征： 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 axios的基本用法 axios.get('/adata') .then(ret => { /
阅读全文
摘要：fetch概述 基本特性 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xnr的升级版 基于Promise实现 语法结构 fetch(url).then(fn2) .then(fn3) ... .catch(fn) fetch的基本用法 fetch('/abc').then(function
阅读全文
摘要：Promise Promise是ES6引入专门用来解决异步的 异步调用 异步效果分析 定时任务 Ajax 事件函数 多次异步调用的依赖分析 多次异步调用的结果顺序不确定 异步调用结果如果存在依赖需要嵌套（如果嵌套过多，会造成回调地狱） Promise概述 Promise是异步编程的一种解决方案，从语
阅读全文
摘要：接口调用方式 原生ajax 基于jQuery的ajax fetch axios URL地址格式 格式：schema://host:port/path?query#fragment schema:协议。例如HTTP，https，ftp等 hsot：域名或者I地址 port：端口，http默认端口80，
阅读全文
摘要：组件插槽的作用 父组件向子组件传递内容 组件插槽的基本用法 1、插槽位置 创建一个新的组件，在组件模板中预留插槽 Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>ERROR!</strong>
阅读全文
摘要：父组件向子组件传值 组件内部通过props接受传递过来的值 可以同时传递多个值，在props中添加多个值即可 Vue.component('menu-item',{ props: ['title'], template: '<div>{{ title }}</div>' }) 父组件通过属性将值传递
阅读全文
摘要：全局组件 全局组件注册语法 components中的两个参数组件名称和组件内容 Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) 全局组件注册应用 组件创建： Vue.component('button-counter', { data: fu
阅读全文
摘要：现实中的组件化思想化思想体现 标准（同一的标准） 分治（多人同时开发） 重用（重复利用） 组合（可以组合使用） 编程中的组件化思想 组件化规范：Web Components 我们希望尽可能多的重用代码 自定义组件的方式不太容易（html、css和js） 多次使用组件可能导致冲突 Web Compon
阅读全文
摘要：通过数组中的方法改变数据 变异方法（改变原数组） push() pop() shift() unshift() splice() sort() reverse() 替换数组（生成新数组） filter() concat() slice() 修改响应式数据 用索引修改数据的方式不是响应式的 vm.li
阅读全文
摘要：生命周期 挂载（初始化相关属性） beforeCreat created beforeMount mounted 更新（元素或组件的变更操作） beforeUndate updated 销毁（销毁相关属性） beforeDestroy destroyed 生命周期示例图 销毁Vue 使用 $dest
阅读全文
摘要：过滤器 过滤器的作用 格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等 自定义过滤器 Vue.filter("过滤器名称", function(value){ //过滤器业务逻辑 }) 过滤器使用的基本规则 可以通过插值显示通过竖线添加过滤器，还可以联机使用过滤器，也可以应用于
阅读全文
摘要：侦听器 只要数据发生变化，侦听器就会触发 监听器的应用场景 数据变化执行异步或开销较大的操作 侦听器的用法 watch: { firstName: function(val) { // val表示变化之后的值 this.fullName = val + ' ' + this.lastName; },
阅读全文