- 博客(41)
- 收藏
- 关注
RSS订阅原创 Vue keep-alive 缓存组件的三种方式
<keep-alive> <component> // .... </component></keep-alive>所有路由匹配到的组件都会被缓存<keep-alive include="a"> <component> // .... </component></keep-alive>仅匹配到的组件（如：组件 a）会被缓存（仅想要缓存的组件得到缓存）可以通过配置 exclude 匹
2020-07-20 17:19:24
757
原创 Vue $listener 和 .native 修饰符 示例详解
vm.$listener 包含了父组件中（除了 .native 修饰器以外的）事件监听器。当内部组件不具备外部绑定的一些 DOM 事件，而外部组件具备相应的 DOM 事件时，在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。示例如下： // 父组件作用域中 // js import TodoTextInput from '@/components/TodoTextInput.vue' // html <TodoTextInput
2020-07-20 15:54:53
459
原创 前端小菜鸡拾夕 —— 原生 JS 自定义事件
前端小菜鸡重拾之路原生 JS 事件Event 构造器 / 可以传递数据的 CustomEvent 构造器// 创建事件// var myEvent = new Event("event_name")var myEvent = new CustomEvent("event_name", { detail: { // 将需要传递的数据写到 detail 中，以便在 EventListener 中获取 // 数据将会在 EventListener 回调函数的 event.deta.
2020-06-18 21:28:10
251
原创 前端小菜鸡拾夕 —— Script 动态加载和移除
前端小菜鸡重拾之路script 标签的插入和删除插入原生 JSvar script = document.createElement("script");script.setAttribute("type", "text/javascript");// or script.type = "text/javascript"script.setAttribute("src", "...");// or script.src = "..."var head = document.ge.
2020-06-18 21:08:42
689
原创 JSON (JavaScript Object Notation)
JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值 和 null。JSON 格式 是一种用于数据交换的文本格式。JSON.parse()：解析 JSON 字符串并返回对应值，可以额外传入一个回调函数，对生成的值或者属性在返回之前进行修改。JSON.stringify：返回指定值对应的 JSON 字符串，通过额外传入参数，可以指定仅包含某些属性，或者自定义某些 key 对应的属性值。JSON 对值的类型和格式有严格的规定。复合类型的值只能是数组或对象，不能是函数、正则表达式对象、
2020-05-28 18:20:06
170
原创 图解 prototype & __proto__
每个对象都有一个 __proto__ 属性，指向它的 prototype 原型对象每个构造函数都有一个 prototype 原型对象prototype 原型对象里的 constructor 指向构造函数本身prototype 和 __proto__ 有什么用处？实例对象的 __proto__ 属性指向构造函数的 prototype，从而实现继承。prototype 对象相当于特定类型所有实例对象都可以访问的公共容器。new 一个函数会创建一个对象函数.prototype === 被创.
2020-05-27 22:02:13
131
原创 git 常见的问题解决汇总 | 第1期
No.1remote: Incorrect username or password ( access token ) fatal: Authentication failed for手快打错密码是常事，命令行无显示打错密码 / 账号那就更不见怪。这里使用 git 推送到远程仓库 gitee 因为打错了密码或者账号，然后就没有再次输入账号和密码的过程了，下面是解决方法：// 清除本地的git...
2020-03-14 20:48:02
413
原创 vue 实例数据初始化为 null
vue 文档中 vue 实例：数据与方法 就提到，只有当实例被创建时就已经存在于 data 中的属性才是响应式的。项目中我们通常把需要响应式的 数据对象 或者 数据数组 初始化赋值为 null这么做有什么好处呢？或者说为什么初始化要为 null，对象为 {}，数组为 []，不行吗？首先，需要肯定的是，我们需要用到的数据属性，建议是应该先定义为 data 对象属性，这就为我们省去了后面手动添加...
2020-03-08 21:24:08
6867
原创 null 与 undefined
undefined 值是派生 (从主要事物的发展中分化出来) 自 null 值主要区别在于：undefined 是声明一个变量未初始化，这个变量的值就自动赋值为 undefined 值；因此无论在什么情况下都没有必要把一个变量的值显式地设置为 undefinednull 是一个空指针对象，typeof null === Object如果定义的变量准备用来保存对象，最好将该变...
2020-03-08 21:22:52
143
原创 meta viewport 是用来做什么的？怎么用？
题目同样是 面试 会问到的一个常见问题之一，同样我们刚开始还是先 科普 一下前置知识：设备像素（device pixels）：物理像素，显示器的最小物理单位。这里的一个像素，并不一定是一个小正方形区块，也没有标准的宽高，知识用于显示丰富色彩的一个 “点” 而已。设备独立像素（device independent pixels）：独立于设备的像素。有一个非严谨的说法，分辨率指的就是设备独立...
2020-03-06 21:07:31
723
原创 如何理解 HTML 语义化
你是如何理解 HTML 语义化的？(面试)在了解 HTML 语义化之前，先科普一下下面几个名词：语义：是语言所蕴含的意义 (语言的含义)。简单的说，符号是语言的载体，符号本身没有意义，只有赋予含义的符号才能够被使用，此时语言就转化为了信息。SEO（Search Engine Optimization）: 译为搜索引擎优化，是一种 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 ...
2020-03-04 10:05:18
687
原创 TypeError: "x" is not a constructor 无厘头使用 vuex 的坑
2019.11.25写 vuex / store.js 的时候，因为export default new Vuex.store({ ...})store 给了个小写，所以爆出了一个 vuex__.a.store is not a constructor 的错误，将小写改为 new Vuex.Store 就解决了。其中报错 TypeError: "x" is not a constr...
2020-02-12 21:00:05
2055
原创 新手 vue build 没改根路径配置的坑
2019.11.25没有修改配置文件等直接 build 项目之后，打开 dist 中的 index.html 或者将 dist 文件夹上传至 GitHub 打开页面空白。这里是因为没有修改项目资源路径，解决方法是：打开项目根目录下的 config 下的 index.js 文件，在 build 部分将 assetsPublicPath: '/' 改为 assetsPublicPath: '...
2020-02-12 20:56:19
624
转载 关于微信小程序不能显示图片
本人场景：wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题，而安卓端不显示图片的问题。上网一查才看到微信小程序在安卓和 IOS 系统间存在着许多的坑。1.安卓手机访问不到图片，无法显示图片微信小程序不显示图片通病可能有以下几种可能：1.非本地图片：图片资源是否有效且能够正常访问2.本地图片：图片路径是...
2020-02-12 20:54:35
4286
原创 vuex store
管理状态，共享数据，在各个组件之间管理外部状态Vuex store 使用引入并通过 use 方法使用创建状态仓库var store = new Vuex.Store({ state: { isLogin: true }})通过 this.$store.state.xxx 拿到数据Vuex 的相关操作vuex 状态管理流程view --> acti...
2020-01-01 13:39:57
156
原创 Axios
axios 是一个基于 promise 用于浏览器和 nodejs 的 http 客户端，本身具有以下特征：从浏览器中创建 XMLHttpRequest从 nodejs 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换 JSON 数据客户端支持防止 CSRF / XSRF安装npm install axios引入加载im...
2020-01-01 13:38:36
133
原创 Vue-router 路由
基本加载安装npm install --save vue-router引用import router from 'vue-router'Vue.use(router)配置路由文件，并在 vue 实例中引入import Index from './Page/Index/template.vue'import Login from './Page/Login/templ...
2020-01-01 13:36:42
102
原创 vue-cli 搭建的项目目录大致情况
项目构建 9个|-- build 文件夹 项目构建 与 webpack 相关代码|---- build.js 生产环境构建代码|---- check-versions.js 检查node&npm版本|---- utils.js 构建配置公用工具|---- vue-loader.conf.js vue 加载器 (.vue)|---- webpack.base.conf.js we...
2020-01-01 13:33:16
115
原创 Vue render 函数
render 函数的初步了解我们通过下面的 demo 对 render 函数进行初步了解，其需求是传递不同的参数渲染不同的标签组件实现<div id="app"> <my-component :level="level">我是 demo</my-component></div><template id="demo"> ...
2019-12-01 20:06:07
260
原创 Vue 自定义指令
和组件类似，有全局注册和局部注册，区别就是把 component 换成 derective。钩子函数指令定义函数提供了几个可选的钩子函数bind：只调用一次，在指令第一次绑定到元素的时候调用，使用此钩子函数可以定义一个在绑定时执行一次的初始化操作；inserted：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)；update：被绑定元素所在模板更新时...
2019-12-01 20:05:34
177
原创 Vue slot 插槽
为了让组件可以组合，需要一种方式来 混合父组件的内容与子组件自己的模板。—> 内容分发Vue 实现了一个内容分发 API，用特殊的 slot 元素作为原始内容的插槽。编译的作用域在深入内容分发 API 之前，需要先明确各个内容在哪个作用域内编译<div id="app"> <child-component v-show="childshow"></c...
2019-12-01 20:01:07
241
原创 Vue 组件通信
组件关系分为父子组件通信、兄弟组件通信和跨级组件通信自定义事件–子组件给父组件传递数据使用 v-on 除了监听 DOM 事件外，还可以用于组件之间的自定义事件JS 的设计模式–观察者模式，有dispatchEvent 和 addEventListener 两个方法，Vue 组件也有与之类似的一套模式，子组件用 $emit 来触发事件，父组件用 $on() 来监听子组件事件。步骤：自定义...
2019-12-01 19:49:28
128
原创 Vue 组件命名 & 数据验证
单向数据流通过 props 传递数据是单向的，父组件数据变化会传递给子组件，而反过来不行。目的：尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。应用场景：① 父组件传递初始值，子组件将初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件的 data 种声明一个数据，引用父组件传递过来的 props。步骤：注册组件将父组件的数据传递进来给子组件 props...
2019-12-01 19:48:34
193
原创 Vue 组件的单向数据流
单向数据流通过 props 传递数据是单向的，父组件数据变化会传递给子组件，而反过来不行。目的：尽可能将父子组件解稿，避免子组件无意中修改了父组件的状态。应用场景：① 父组件传递初始值，子组件将初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件的 data 种声明一个数据，引用父组件传递过来的 props。步骤：注册组件将父组件的数据传递进来给子组件 props...
2019-12-01 19:45:45
294
原创 Vue 组件注册 & 小技巧 & props
产生原因提高代码复用性使用方法全局注册(用的少)Vue.component(tag, { template: '<div>我是全局注册的组件</div>'})优点：所有的 Vue 实例都能使用；缺点：权限太大，容错率降低。局部注册<div id="app"> <componentName></componentNam...
2019-12-01 19:44:11
279
原创 v-model 和表单
v-model指令用于表单类元素双向绑定数据<div id="app"> input 和 textarea 用法：<input type="text" v-model="value">下面实时显示 value 的值input 输入什么右边就显示什么 ---> {{value}}<textarea cols="30" rows="10" v-m...
2019-11-29 21:37:30
270
原创 Vue 方法与事件
<div id='app'> // 方法没有参数可以省略括号 <div v-on:click="handle"></div> // 有参数要加括号 <div v-on:click="handle()"></div> // 或者传入参数 <div @click="handle(8)"></div&...
2019-11-29 21:36:25
211
原创 Vue 内置指令
基本指令v-cloak在 vue 实例编译结束之后再渲染，一般与 display: none 结合使用。<div id="app"> <div v-cloak>{{msg}}</div></div>// css[v-cloak]: { display: none;}解决初始化慢导致的页面闪动，比如：页面加载出来了但是没有解...
2019-11-29 21:35:42
200
原创 v-bind 以及 class 与 style 的绑定
绑定 class 的几种方式对象语法对象的键是类名，值是布尔值(定义在 data 中)当 class 的表达式过长或者逻辑复杂时，可以绑定一个计算属性<div id="app"> <div :class="{ className: isActive }"></div> <div :class={className}></div...
2019-11-29 21:35:08
106
原创 Vue 计算属性
在双向绑定数据和表达式时，由于表达式过长或者逻辑过于复杂，使数据表达式臃肿难以阅读和维护。所有的计算属性以函数的形式定义在 computed 中，依赖于本实例或者多个实例 data 中的数据，一个计算属性里可以完成各种复杂的逻辑(运算和函数调用等)，并返回最终的计算结果。只要其中任一数据变化，计算属性就会重新执行，视图也会更新计算属性用法computed: { computed1:...
2019-11-29 21:29:51
114
原创 Vue 入门基础
Vue 实例和数据绑定通过 Vue 构造函数创建 Vue 实例，并启动 Vue 应用入口；el 用于指定页面中已经存在的DOM元素来挂载 Vue 实例，可以是标签也可以是 CSS 语法；data 声明应用中需要双向绑定的数据，建议需要用到的所有数据都预先在 data 中声明，不至于将数据散落到业务逻辑中难以维护，也可以指向一个已经存在的变量；挂载成功之后，可以通过 实例.$属性名 来访问...
2019-11-29 21:28:45
86
原创 Vue 生成插件方法
我们之前在项目中创建了一个 helper 文件夹，专门用来存放辅助工具或者方法。我们把插件写到这个文件夹里|-- src |-- helpers |-- request.js |-- util.js // 通用方法下面开始写我们的 util.js 的代码... // 省略插件代码的细节，这里是方法function plugin() { ...}// 将这个插件对象...
2019-10-26 15:59:48
879
原创 vue 完善路由权限
什么是钩子函数？主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。为什么要使用路由的钩子函数？在路由跳转时，需要一些权限判断或者其他操作。Vue.beforeEach(function(to, from, next) { // 在跳转之前执行})Vue.afterEach(function(to, from) { // 在跳转之后执行}) to: 即将要进入的目...
2019-10-22 23:09:16
319
原创 简单理解 vuex
Vuex状态管理模式集中式存储管理应用的所有组件的状态，以相应的规则保证状态以一种可以预测的方式发生变化。容器 store仓库包含应用中大部分状态。响应式存储，组件从 store 中读取状态时，若store 中的状态发生变化，相应组件也会相应得到高效刷新；不能直接改变 store 中的状态。唯一途径就是显示提交 mutation -> 可以方便跟踪每一个状态的变化。创建 s...
2019-10-21 22:47:02
144
原创 页面拆分公共模板与组件化
App.vue首先我们要明白的是，页面是在 App.vue 开始启动的<template> <div id="app"> <router-view/> </div></template>上面的代码是 App.vue 的初始状态，需要注意的是 <template> 下还必须有一个父元素 <di...
2019-10-21 22:46:15
542
原创 Vue-cli ElementUI 的使用
ElementUI 官网链接安装：推荐使用 npmnpm i element-ui -sElementUI 为新版的 vue-cli 准备了相应的 Element插件，可以快速搭建一个基于 Element 的项目。引入 Element可以引入整个 Element，或者根据需要引入部分组件。完整引入在 vue-blog main.js 中写入import ElementUI...
2019-10-19 09:00:34
212
原创 vue-cli 脚手架一键搭建工程
创建项目模板 template打开终端安装 vue-clinpm install -g vue-cli创建 blog-client 项目vue init webpack blog-client下面会出现 项目名称 描述 作者等可以直接回车下面推荐 运行 + 编译? Vue build (Use arrow keys)> Runtime + Compiler: rec...
2019-10-17 23:06:43
152
原创 小程序组件开发
**app.json：**设置全局组成部分组件在说写组件之前，我们要先提到一下app.json 中的 pages 数组**pages 数组：**储存着该小程序的页面路径，第一个为初始化展示的页面。"pages": [ "pages/home/home", "pages/index/index", ...]在创建组件的时候，我们可以写到 pages 数组里，初始化组件(compo...
2019-09-15 23:20:28
273
原创 小程序常用的 API 以及简单交互
微信开发者工具常用的APIWXML 框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。<view> >> <div><text> >> <span><navigator> >> <a>数据绑定：使用 Mustache 语法（双大括号）将变量包起来wxml&l...
2019-09-15 23:18:35
798
原创 NPM
npm --> node.js package manage（node.js 包管理器）npm install xxx下载安装第三方模块到当前文件夹的 node_modules 文件夹中npm install -g xxx全局下下载安装模块npm install --save下载安装第三方模块到当前文件夹的 node_modules 文件夹中，并自动把模块名写入 packag...
2019-09-10 17:01:06
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人