12 2020 档案
摘要：命名路由的配置规则 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。 在链接路由时通过 :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; },
阅读全文
摘要：计算属性 为什么需要计算属性 把复杂的计算逻辑用简洁的模板内容体现出来。 计算属性的用法 computed: { reverseString: function(){ return this.msg.split('').reverse().join(''); } } 弄好了直接在页面中引用计算属性的
阅读全文
摘要：自定义指令 当指令不满足需求时，可以自定义指令，语法如下： Vue.directive('focus',{ inserted: function(el){ //el表示指令所绑定的元素 el.focus() } }) 使用方法和其他指令一样 <input type="text" v-focus> 带
阅读全文
摘要：表单的基础 利用v-model进行双向数据绑定： 1、在下拉列表中，将v-model写在select中 2、单选框和复选框需要每个按钮都需要写上v-model 3、v-model在输入框中获取得是输入框中的内容，在单选框、复选框和下拉项中对应的是value的值 4、在数据中，复选框变量和下拉项以数组
阅读全文
摘要：循环结构 v-for 循环数组 用于循环取得数据，类似于js中for-in循环 ，其中in左侧为值，其名称可以自定义，in后为想要取出数据的变量名 运行可以得到结果 in左侧不仅仅只可以放一个值，不仅可以取得它的值，还可以获得她它的索引值 如果不仅仅是简单的数组，例如数组中的内容是一个个的对象，就需
阅读全文
摘要：分支循环结构 分支循环结构指令 v-if v-else v-else-if v-show v-if 指令 可以直接在元素中添加指令，添加判断的值 最后运行可以得到结果是： v-show v-show的实现原理是通过display来控制该元素显示或者不显示，但是会存在页面中。 通过在元素中添加的指令，
阅读全文
摘要：样式绑定 样式绑定有class绑定和style绑定，这里我们分别说说 class绑定 class样式绑定与有两种语法：对象语法（v-bind:class='{active:isActive}'）、数组语法（v-bind:class='[activeClass]'）。 对象绑定 首先我们需要将我们需要
阅读全文
摘要：属性绑定 v-bind 可以通过v-bind将属性值与数据绑定，这样就可以统一化管理 通过这样我们就可以直接访问跳转到百度页面 同样的这个值我们也可以通过事件进行改变 这样就可以方便我们做一些其它的操作。 v-bind实现v-model（v-model实质） 通过v-bind绑定属性value的数据
阅读全文
摘要：按键修饰符 keyup 通过官方文档可查询到特殊的按键修饰符 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 调用方法： 自定义按键修饰符别名： 我们可以通过全局 config.keyCodes 对象自定义按
阅读全文
摘要：stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中利用$event传参通过preventDefault()阻止默认行为 通过直接在元素中的指令中添加
阅读全文
摘要：事件函数传参 在元素绑定事件时候，如果我们的函数没有传参，他也会有一个默认的传参值 event 但是如果我们的函数有传参，那么它必须作为做为最后一个传参值显示传递，且必须为$event 通过代码打印我们的传参值 运行之后，只点击按钮1得到以下结果： 然后再点击按钮2 可以知道 $event 传递的是
阅读全文
摘要：事件基本用法 事件的函数都定义在VUE实例中的methods中，当然也可以直接写在元素内，但是这并不利于后期的维护，需要注意的是：在methods定义的函数内想要引用插值内容，需要使用this，不然就会报错 而在元素内就不有这样的情况 调用函数同样使用this
阅读全文
摘要：双向数据绑定 就是既可以从页面传到数据也可以从数据到页面 初始运行结果为： 在输入框 更改数据 相应的输入框上的也会相对改变 然后再试试利用控制台更改数据 可以看到数据也被改变了 而且输入框中的内容也改变了
阅读全文
摘要：v-once 使用了这个指令，那么这个值将只会渲染一次，后续将不会再被更改 初始运行结果： 在控制台中分别修改他们的值： 可以看到使用了v-once指令的插值没有被修改。
阅读全文
摘要：v-text 用于将数据填充到标签中，作用于插值表达式类似，但是相对于直接插值是没有闪动问题的 v-html 用于将HTML片段填充到标签中，但是可能有安全问题（易被跨域脚本攻击[XSS攻击]） v-pre 用于显示原始信息(即使使用插值，依旧还是显示打在代码中的内容) 运行结果：
阅读全文
摘要：vue插值 v-cloak 使用VUE时，页面刷新时会出现闪动的现象（即在插值时会显示两侧的 {}） 先定义一个VUE 通过选择器在style中定义v-cloak的display值为none 再在元素中添加v-cloak指令 这样就不会出现闪动的问题。 或者利用v-text导入插值，这样也不会出现闪
阅读全文
摘要：AJAX跨域 利用AJAX取的服务器的数据时，经常会碰到跨域的问题（我这里是从我自己写的node.js中取数据遇到的跨域问题） 如果你去网上搜的话，大部分找到的是利用JQuery或者JAVA写的 （这里我主要说的是利用原生js写的，因为我用的是原生js写的，不要问我为什么不用jQuery，因为我不怎
阅读全文
摘要：连接数据库 创建一个conn.js文件将连接数据库的代码写上，因为考虑到代码可能会重复利用，所以这里我把它写成模板。 当然想要连接成功，数据库必须得存在。 连接好之后我们再另起一个文件test.js，写上sql语句，这里因为通过模板将连接数据库的代码导入，所以我们在引用的时候，用的是fconn()方
阅读全文