- 博客(44)
- 收藏
- 关注
RSS订阅原创 Vue自定义指令
自定义指令简介我们可以自己写一个自定义指令去操作DOM元素，以达到代码复用的目的。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。全局注册指令：Vue.directive('focus', {/** */})局部注册指令const vm = new Vue({ el: '#app', directives: { focus: {/** */} }})使用：<input
2021-02-07 00:02:56
153
原创 vue 混入
混入基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。var minxin = { created () { this.hello(); }, methods: { hello () { console.log('hello，我是混入中的函数'); }, }}Vue.component('my-cm
2021-02-06 23:59:32
162
原创 ES6 map集合
map集合键值对（key value pair）数据集合的特点：键不可重复map集合专门用于存储多个键值对数据。在map出现之前，我们使用的是对象的方式来存储键值对，键是属性名，值是属性值。使用对象存储有以下问题：键名只能是字符串获取数据的数量不方便键名容易跟原型上的名称冲突如何创建mapnew Map(); //创建一个空的mapnew Map(iterable); //创建一个具有初始内容的map，初始内容来自于可迭代对象每一次迭代的结果，但是，它要求每一次迭代的
2021-02-06 12:02:27
212
原创 ES6 迭代器
迭代器背景知识什么是迭代？从一个数据集合中按照一定的顺序，不断取出数据的过程迭代和遍历的区别？迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完遍历强调的是要把整个数据依次全部取出迭代器对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象迭代模式一种设计模式，用于统一迭代过程，并规范了迭代器规格：迭代器应该具有得到下一个数据的能力迭代器应该具有判断是否还有后续数据的能力JS中的迭代器JS规定，如果一个对象具有next方法，并且该方法返回一
2021-02-06 12:00:54
129
原创 Fetch Api 概述
Fetch Api 概述XMLHttpRequest的问题所有的功能全部集中在同一个对象上，容易书写出混乱不易维护的代码采用传统的事件驱动模式，无法适配新的 Promise ApiFetch Api 的特点并非取代 AJAX，而是对 AJAX 传统 API 的改进精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景使用 Promise Api，更利于异步代码的书写Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web
2021-02-06 11:52:01
430
原创 ES6 async 和 await
async 和 awaitasync 和 await 是 ES2016 新增两个关键字，它们借鉴了 ES2015 中生成器在实际开发中的应用，目的是简化 Promise api 的使用，并非是替代 Promise。async目的是简化在函数的返回值中对Promise的创建async 用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象。async function test(){ console.log(1);
2021-02-04 20:44:14
200
原创 Promise的基本使用
Promise的基本使用const pro = new Promise((resolve, reject)=>{ // 未决阶段的处理 // 通过调用resolve函数将Promise推向已决阶段的resolved状态 // 通过调用reject函数将Promise推向已决阶段的rejected状态 // resolve和reject均可以传递最多一个参数，表示推向状态的数据})pro.then(data=>{ //这是thenable函数，如果当
2021-02-04 20:40:35
202
原创 ES6 Promise异步处理概念
异步处理的通用模型ES官方参考了大量的异步场景，总结出了一套异步的通用模型，该模型可以覆盖几乎所有的异步场景，甚至是同步场景。值得注意的是，为了兼容旧系统，ES6 并不打算抛弃掉过去的做法，只是基于该模型推出一个全新的 API，使用该API，会让异步处理更加的简洁优雅。理解该 API，最重要的，是理解它的异步模型ES6 将某一件可能发生异步操作的事情，分为两个阶段：unsettled 和 settledunsettled： 未决阶段，表示事情还在进行前期的处理，并没有发生通向结果的那件事
2021-02-04 20:14:29
129
原创 ES6 符号
普通符号符号是ES6新增的一个数据类型，它通过使用函数 Symbol(符号描述)来创建符号设计的初衷，是为了给对象设置私有属性私有属性：只能在对象内部使用，外面无法使用符号具有以下特点：没有字面量使用 typeof 得到的类型是 symbol每次调用 Symbol 函数得到的符号永远不相等，无论符号名是否相同符号可以作为对象的属性名存在，这种属性称之为符号属性开发者可以通过精心的设计，让这些属性无法通过常规方式被外界访问符号属性是不能枚举的，因此在 for-in 循环中无法读取到符号
2021-02-04 20:06:41
221
原创 ES6对象,数组和解参数解构
对象解构什么是解构使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中const user = { name: "kevin", age: 11, sex: "男", address: { province: "四川", city: "成都" }}// 先定义5个变量，然后从对象中读取同名属性，放到变量中let { name, age, sex, address, abc = 123 } = userc
2021-02-04 19:16:43
158
原创 ES6中类的其他书写方式与继承
ES6中类的其他书写方式可计算的成员名getter和setterObject.defineProperty 可定义某个对象成员属性的读取和设置使用getter和setter控制的属性，不在原型上静态成员构造函数本身的成员使用static关键字定义的成员即静态成员字段初始化器（ES7）注意：1). 使用static的字段初始化器，添加的是静态成员2). 没有使用static的字段初始化器，添加的成员位于对象上3). 箭头函数在字段初始化器位置上，指向当前对象类表
2021-02-04 17:35:59
222
原创 ES6理解面向对象
面向对象简介面向对象：一种编程思想，跟具体的语言对比面向过程：面向过程：思考的切入点是功能的步骤面向对象：思考的切入点是对象的划分【大象装冰箱】1.面向过程/** * 大象 */function Elephant() {}/** * 冰箱 */function Frige() {}Frige.prototype.openDoor = function () {}Frige.prototype.closeDoor = function () {}F
2021-02-03 22:29:33
155
原创 新增的对象字面量语法
1. 新增的对象字面量语法成员速写如果对象字面量初始化时，成员的名称来自于一个变量，并且和变量的名称相同，则可以进行简写方法速写对象字面初始化时，方法可以省略冒号和function关键字计算属性名有的时候，初始化对象时，某些属性名可能来自于某个表达式的值，在ES6，可以使用中括号来表示该属性名是通过计算得到的。const prop1 = "name2";const prop2 = "age2";const prop3 = "sayHello2";const user = {
2021-02-03 22:24:26
162
原创 ES6箭头函数
箭头函数回顾：this指向通过对象调用函数，this指向对象直接调用函数，this指向全局对象如果通过new调用函数，this指向新创建的对象如果通过apply、call、bind调用函数，this指向指定的数据如果是DOM事件函数，this指向事件源使用语法箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数完整语法：(参数1, 参数2, ...)=>{ //函数体}如果参数只有一个，可以省略小括号参数 => {}如果箭头
2021-02-03 22:14:10
118
原创 ES6中块级绑定let，const
声明变量的问题使用var声明变量允许重复的变量声明：导致数据被覆盖变量提升：怪异的数据访问、闭包问题全局变量挂载到全局对象：全局对象成员污染问题// 1. 允许重复的变量声明：导致数据被覆盖var a = 1;function print(){ console.log(a)}// 2. 变量提升：怪异的数据访问if (Math.random() < 0.5) { var a = "abc"; console.log(a);}else {
2021-02-03 21:11:26
112
原创 Vuex
Vuex_StateVuex是vue的状态管理工具，为了更方便的实现多个组件共享状态。安装npm install vuex --save使用import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({ state: { count: 0 }})new Vue({ store,})State单一状态树，使用一个对象就包含了全部的应用层级
2021-02-03 17:28:55
121
原创 VueRouter_路由元信息和VueRouter_过渡动效-滚动行为
VueRouter_路由元信息定义路由的时候可以配置 meta 字段，用于自定义一些信息。const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, meta: { requiresLogin: true }
2021-02-03 17:16:23
208
原创 VueRouter导航守卫
VueRouter_导航守卫导航：路由正在发生变化。导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫被分成三种：全局的、单个路由独享的、组件内的。全局守卫是指路由实例上直接操作的钩子函数，触发路由就会触发这些钩子函数。全局前置守卫 beforeEach在路由跳转前触发，一般被用于登录验证。const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})参数说明：
2021-02-03 17:14:17
196
原创 VueRouter命名视图-路由组件传参
VueRouter_命名视图-路由组件传参命名视图想同时展示多个视图时，并且每个视图展示不同的组件时，可以使用命名视图。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。<router-view class="view one"></router-view><router-view class="view two" name="a"></router-view>&l
2021-02-03 17:13:04
238
原创 VueRouter动态路由匹配
VueRouter_动态路由匹配当我们需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果：const User = { template: '<div>User</div>'}const router = new VueRouter({ routes: [ // 动态路径参数 以冒号
2021-02-03 15:30:03
196
原创 VueRouter_编程式的导航
VueRouter_编程式的导航通过在 Vue 根实例的 router 配置传入 router 实例，$router、 $route 两个属性会被注入到每个子组件。$router路由实例对象。除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。$router.push想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后
2021-02-03 12:30:51
119
原创 VueRouter_命名路由-嵌套路由-重定向-别名
VueRouter_命名路由-嵌套路由-重定向-别名命名路由可以通过一个名称标识一个路由，这样在某些时候会显得更方便一些，特别是在链接一个路由，或者是执行一些跳转时，可以在创建Router实例时，在routes配置中给某个路由设置名称：routes = [ { path: '/activity/personal', name: 'personal', component: Personal, }];要链接到一个命名路由，可以给 router-link 的 to 属
2021-02-02 10:36:18
212
原创 VueRouter_基础
VueRouter_基础什么是路由？路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。什么时候使用前端路由？前端路由更多用在单页应用上，也就是SPA(Single Page Web Application)，在单页面应用中，大部分页面结果不变，只改变部分内容的使用。安装路由
2021-02-02 10:35:41
177
2
原创 vue函数简写，对象字面量和过滤器
函数简写当想在 bind 和 update 中触发相同行为，而不关心其他钩子时，可以写成函数的形式：Vue.directive('myshow', (el, binding) => { const { value } = binding; const display = value ? '' : 'none'; el.style.display = display;})Vue.directive('slice', (el, binding, vnode) => { co
2021-02-02 10:17:31
536
原创 Vue组件_通信
组件_通信prop父组件传递数据给子组件时，可以通过特性传递。推荐使用这种方式进行父->子通信。$emit子组件传递数据给父组件时，触发事件，从而抛出数据。推荐使用这种方式进行子->父通信。v-model.sync$attrs祖先组件传递数据给子孙组件时，可以利用$attrs传递。demo或小型项目可以使用$attrs进行数据传递，中大型项目不推荐，数据流会变的难于理解。$attrs的真正目的是撰写基础组件，将非Prop特性赋予某些DOM元素。$listeners可以
2021-02-02 10:03:40
192
原创 Vue组件_动态组件
组件_动态组件基本使用当我们在一个多标签的界面中，在不同组件之间进行动态切换是非常有用的。<div id="app"> <button v-for="page in pages" @click="pageCmp = page.cmp" :key="page.id" >{{ page.name }}</button> <component :is="pageCmp"></component></di
2021-02-02 09:50:48
264
原创 Vue组件_插槽
组件_插槽和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：<my-cmp> Something bad happened.</my-cmp>如果有这样的需求，我们就可以通过插槽来做。插槽内容通过插槽，我们可以这样合成组件：<my-cmp> 写在组件标签结构中的内容</my-cmp>组件模板中可以写成：<div> <slot></slot></div>当组件
2021-02-02 09:33:52
142
原创 Vue组件_非Prop特性与组件_监听组件事件
组件_非Prop特性非Prop特性指的是，一个未被组件注册的特性。当组件接收了一个非Prop特性时，该特性会被添加到这个组件的根元素上。替换/合并已有的特性想象一下 <my-cmp> 的模板是这样的：<input type="date" class="b">为了给我们的日期选择器插件定制一个主题，我们可能需要像这样添加一个特别的类名：<my-cmp class="my-cmp"></my-cmp>在这种情况下，我们定义了两个不同的 cl
2021-02-02 09:27:47
162
原创 Vue组件_单向数据流
组件_单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。这里有两种常见的试图改变一个 prop 的情形：这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用，在后续操作中，会将这个值进行改变。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：props:
2021-02-02 09:25:53
149
2
原创 Vue组件_Prop
组件_Prop注册自定义特性组件默认只是写好结构、样式和行为，使用的数据应由外界传递给组件。如何传递？注册需要接收的prop，将数据作为一个自定义特性传递给组件。如：<div id="app"> <video-item title="羊村摇" poster="https://developer.duyiedu.com/bz/video/955bac93ccb7f240d25a79b2ff6a9fdbda9537bc.jpg@320w_200h.webp
2021-02-02 09:16:56
199
原创 Vue组件基础
组件基础组件是什么？组件是可复用的Vue实例，且带有一个名字，例如名字为shanshan-cmp，那么我们则可以在一个通过new Vue创建的根实例中，把这个组件作为自定义元素来使用：<div id="app"> <shanshan-cmp></shanshan-cmp></div>const vm = new Vue({ el: '#app'})因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 da
2021-02-02 09:15:01
161
原创 Vue生命周期
Vue生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期图示生命周期钩子所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之
2021-02-01 16:45:24
123
原创 Axios
AxiosAxios是一个基于promise的HTTP库浏览器支持情况：Chrome、Firefox、Safari、Opera、Edge、IE8+引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>APIaxios(config)axios(url, [config])config 配置对象最常用的配置：axios({ method: 'get', // post、get、
2021-02-01 15:49:33
120
原创 vue-resource
引入vue-resource<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>要注意的是，vue-resource依赖于Vue，所以要先引入Vue，再引入vue-resource。引入vue-resource之后，在Vue的全局上会挂载一个$http方法，在vm.$http方法上有一系列方法，每个HTTP请求类型都有一个对应的方法。vue-resource使用了promise，所以$
2021-02-01 15:48:09
377
原创 侦听器
侦听器侦听属性，响应数据（data&computed）的变化，当数据变化时，会立刻执行对应函数，值类型函数类型例：const vm = new Vue({ el: '#app', data: { msg: 'hello，你好呀，我是杉杉', }, watch: { msg () { console.log('msg的值改变啦~'); } }})// 更改msg的值vm.msg = 'hello~~~~'; // 此时会在控制台中
2021-02-01 14:57:54
630
原创 计算属性
计算属性有些时候，我们在模板中放入了过多的逻辑，从而导致模板过重，且难以维护。例如：<div id="app"> {{ message.split('').reverse().join('') }}</div>碰到这样的情况，我们必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串，而且，一旦我们想要在模板中多次使用翻转字符串时，会更加麻烦。所以，当我们处理复杂逻辑时，都应该使用计算属性。基础用法计算属性是Vue配置对象中的属性，使用方式如下：
2021-02-01 13:48:38
574
原创 v-model指令以及相关知识点
v-model指令可以在表单元素上创建双向数据绑定。即数据更新元素更新、元素更新数据也会更新。本质上v-model为语法糖元素类型属性事件input[type=text]、textareavalueinputinput[checkbox]、input[radio]checkedchangeselectvaluechangeinputtype=text 文本框<div id="app"> <input v-model="m
2021-02-01 13:35:12
351
原创 Vue相关指令
Vue相关指令具有特殊含义、拥有特殊功能的特性指令带有v-前缀，表示它们是Vue提供的特殊特性指令可以直接使用data中的数据v-pre跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。<!-- 不会被编译 --><span v-pre>{{ msg }}</span>v-cloak这个指令保持在元素上直到关联实例结束编译可以解决闪烁的问题和 CSS 规则如 [v-c
2021-02-01 13:19:43
143
原创 vue的响应式-2，和响应式原理
vue的响应式-2除了未被声明过和未被渲染的数据外，还有什么数据更改后不会渲染页面？1. 利用索引直接设置一个数组项时：<!-- 即使向数组中添加了第4项，数组仍然显示3项 --><!-- 咳咳，一家三口，有第4个人也不能摆出来给大家看呀~ --><div id="app">{{ dengFamily }}</div>const vm = new Vue({ el: '#app' data: { dengFami
2021-01-30 21:55:59
158
原创 vue的响应式-1
vue的响应式-1数据变化，页面就会重新渲染怎么更改数据？so easy <div id="app"> {{ mrDeng }} </div> const vm = new Vue({ el: '#app', data: { mrDeng: '小明：风姿绰约、花枝招展' } }); vm.mrDeng = '手如柔荑、肤如凝脂'; // 见证奇迹的时刻，页面变化啦问：为什么data会直接出现在vm
2021-01-30 20:17:35
130
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人