随笔分类 - Vue.js
摘要：在vue中，实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的。 一、生命周期图示 二、vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下： 2.修改页面input时，被自动调用的选项顺序如下： 3.组件销毁时，执行顺序如下：
阅读全文
摘要：1.安装vee-validate 2.main.js里引用vee-validate插件 3.自定义校验规则，包含格式为[1~9999]的正则表达式 4.自定义违反校验规则时提示的error messages （定义规则可参照官方文档：https://baianat.github.io/vee-val
阅读全文
摘要：1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来： 2.在routes.js为每个模块定义是否在内存常驻中：
阅读全文
摘要：v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案:https://cn.vuejs.org/v2/guide/components-slots.html 1.单个插槽 | 匿名插槽 1.1<navigation-link
阅读全文
摘要：1.方法1：.native修饰符 1.1.native修饰符：将原生事件绑定到组件的根元素上 1.2缺点： 如以下根元素实际上是一个 <label> 元素时，原生事件不能被绑定到input事件上： 2.方法2：$listeners 属性（它是一个对象，里面包含了作用在这个组件上的所有监听器。） 2.
阅读全文
摘要：1.在定义组件时调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件enlarge-text： 代码解释：<button v-on:click="$emit('enlarge-text')">：监听click事件，click事件被触发时触发enlarge-text事件 2.用 v-
阅读全文
摘要：普通的Vue实例data是一个对象： 组件的data是一个方法： 详情见官网：https://cn.vuejs.org/v2/guide/components.html
阅读全文
摘要：均为解决CSS全局作用域问题（样式冲突（污染））的一个解决方案。 1.Scoped CSS 当 <style> 标签有 scoped 属性时，相当于在元素中添加了一个唯一属性用来区分。 它通过使用 PostCSS 来实现以下转换，转换结果： 2.CSS Modules 通过给样式名加hash字符串后
阅读全文
摘要：{String | Object | Function} 一个 HTML 标签字符串，组件选项对象，或者 解析上述任何一种的一个 async 异步函数，必要参数。 {Object} 一个包含模板相关属性的数据对象 这样，您可以在 template 中使用这些属性。可选参数。 {String | Ar
阅读全文
摘要：1.require 1.1完整路径的require语句： 1.2带表达式的 require 语句：自动创建一个上下文(context) 如果你的 require参数含有表达式(expressions)，会自动创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一
阅读全文
摘要：语法糖 ：是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发，简化代码是书写。 Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写。 1.v-bind可以省略，直接写一个冒号“:”：
阅读全文
摘要：在vue的中文官网有这样的说明： HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。 如果你使用字符串模板，那么这
阅读全文
摘要：1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) { let httpClient = null; if (ajaxConfig) { httpClient = axios.create(ajaxConfig);
阅读全文
摘要：Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。 1.el Vue实例： 模板： 2.$mount Vue实例： 模板：
阅读全文
摘要：1、引入 vue-i18n import Vue from 'vue' import VueI18n from 'vue-i18n' import merge from 'lodash/merge' 2.准备本地的文言信息 const messages = { zh: { message: { he
阅读全文
浙公网安备 33010602011771号