Vue
Vue系列相关
mjzy
生命不息,奋进不止
展开
-
vue复习(三)动态参数
Vue 模板语法中我们可以通过 v-bind 绑定属性,例如 v-bind:msg="variable"variable 代表定义Vue实例 data 中定义的属性(property)msg 则是写死的属性但实际在某些情况下,我们希望 msg 也是可以动态改变的,也就是所谓的 动态参数,如下:<a v-bind:[attributeName]="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得转载 2020-12-29 16:45:14 · 871 阅读 · 0 评论 -
vue复习(二)插槽
插槽官方文档:传送门默认插槽当子组件中未使用<slot></slot>标签时,父组件内<Child></Child>标签间的内容会被忽略反之,父组件内<Child></Child>标签间的内容会替换 <slot></slot><slot></slot> 标签之间可以存在内容,当父组件的 <Child></Child>标签间没有内容时,就会默认显示 ` 标原创 2020-10-11 20:36:43 · 84 阅读 · 0 评论 -
Vue2.x复习(一)组件通信
运行环境node 10.xvue.js 2.xvue-cli 3.x组件通信父组件 => 子组件属性 props// childprops: { msg: String }// parent<Helloworld msg="welcome to your Vue.js App"/>特性 $attrs// child: 未在子组件props中声明的属性,可在子组件中使用 “$atttrs.属性名” 的方式引用<p>{{ $attrs.foo原创 2020-10-11 19:36:30 · 93 阅读 · 0 评论 -
Vue中的异步路由、异步组件、懒加载第三方类库
作者:Mr老朝链接:https://www.jianshu.com/p/dca3e41753ab来源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。网上说这块的很多,但是没看到有一篇能说全的。这里就说说怎么通过异步和懒加载的形式把首屏代码实现到最小。注意:首屏的代码不要异步加载,非首屏代码异步加载。不然初始代码加载完成后,还有等运行后再去加载首屏代码,反而拉慢首屏显示。一、现在异步组件最常见的技术用两种。1、依赖requireconst Editor = resol转载 2020-05-08 18:11:12 · 2276 阅读 · 1 评论 -
vue-cli引入svg图的方式
1. 安装 npm i svg-sprite-loader -D 开发依赖包2. 在项目src目录下新建一个icons目录目录结构- src - icons - svg - wx.svg - qq.svg3. 配置 vue.config.js 的 chainWebpack 属性链式操作详解// 使用export.module的原因是vue-...原创 2020-04-14 12:17:00 · 4631 阅读 · 0 评论 -
vuex 简易原理
let Vue;class Store { // 持有state,并使其响应化 // 实现commit和dispatch两个方法 constructor(options) { // 数据响应式 // this.state是Vue实例,访问this.state.count this.state = new Vue({ data: options.state...原创 2020-02-11 22:35:25 · 83 阅读 · 0 评论 -
vue-router简易原理
// 声明插件:vue插件需求实现一个install静态方法let Vue; // 保存Vue构造函数引用class KVueRouter { constructor(options) { this.$options = options; this.routeMap = {}; // {'/index': { component:Index,... }} // 当前url需...原创 2020-02-11 22:34:10 · 171 阅读 · 0 评论 -
Error: Can't find Python executable "python", you can set the PYTHON env variable
2020-01-20 在使用yarn安装依赖包时,报上述错误,缺少python环境,具体为何会同 python 的扯上关系暂未找到原由解决方式一:可去官网安装 Python2.7 ,然后配置环境变量具体可以参照该博客:http://blog.csdn.net/lyj_viviani/article/details/51763101解决方式二:npm install --global --...原创 2020-01-20 15:49:33 · 235 阅读 · 0 评论 -
.sync和v-model的异同
<template> <!-- v-model 是语法糖 --> <Input v-model="username"> <!-- 默认等效与下面这行 <Input :value="username" @input="username=$event.target.value"> --></template&...原创 2020-01-18 18:20:02 · 818 阅读 · 1 评论 -
Vue 表单控件的粗浅实现
kInput.vue页面数据的双向绑定数据修改时通知 KFormItem.vue 组件做校验<template> <input :type="type" @input="onInput" :value="value" v-bind="$attrs"/></template><script>export default { n...原创 2020-01-17 10:28:07 · 190 阅读 · 0 评论 -
Vue 组件间通讯
组件通讯父组件 => 子组件属性 props// 子组件props: { msg: ''}// 父组件<HelloWorld msg="welcome to Your Vue.js App"/>特性$attrs// 子组件:并未在props中声明的特性<p>{{$attrs.foo}}</p>// 父组件<H...原创 2020-01-16 15:20:42 · 142 阅读 · 0 评论 -
内联模板
当 inline-template 这个特殊的特性出现在一个子组件上是,这个组件将会使用其里面的内容做为模板,而不是将其作为被 分发的内容 。这使得模板的撰写工作更加灵活<my-component inline-template> <div> <p>These are compiled as the component's own template...原创 2020-01-03 14:15:07 · 274 阅读 · 1 评论 -
模块系统(待更新)
如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+),那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件(比如 src/main.js) 中全局导入基础组件的示例代码:import Vue from 'vue'import upperFirst from 'lodash/upperFirsh'...转载 2020-01-02 15:37:41 · 107 阅读 · 0 评论 -
动态组件
有的时候,在不同的组件之间进行动态的切换时非常有用的,比如在一个多标签的界面里:上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现:<!-- 组件会在 `currentTabComponent` 改变时改变 --><component v-bind:is="currentTabComponent"></comp...原创 2020-01-02 15:06:37 · 267 阅读 · 0 评论 -
解析 DOM 模板时的注意事项
下图是 Vue的官网中 对解析 DOM 模板时的注意事项:“如果我们从以下来源使用模板的话,这条限制是不存在的” 对于这句话困扰了我一段时间,觉得有必要做一个记录:<body> <div id="app"> <!-- is="" 的方式可以避开一些潜在的浏览器 **解析规则** ,正确渲染元素 --> <table> ...原创 2019-12-31 14:55:20 · 842 阅读 · 1 评论 -
Vue的v-model指令与model选项
<div id="app"> <button @click="onChangeList">改变列表</button> <br><br /> <ul> <test-demo1 v-for="value in list1" :key="value.id" v-model="value.na...原创 2019-12-12 18:58:44 · 508 阅读 · 0 评论 -
Vue计算属性的getter与setter以及侦听器
# 计算属性的Getter 和 Setter:<div id="app"> <p>{{ fullName }}</p></div>var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, computed: { fullN...原创 2019-12-06 22:58:21 · 391 阅读 · 0 评论 -
vue中的v-html指令
v-html指令会将 span 的内容替换成 rawHtml 的属性值,直接作为 HTML 代码解析。但是会忽略解析属性值中的数据绑定,意味着会作为纯粹的 HTML 代码,而不是 Vue template 模板进行解析,如下:<div id="app"> <span>{{msg}}</span> <p>Using mustaches:{{ ...原创 2019-12-04 16:56:36 · 1251 阅读 · 0 评论 -
Vue生命周期理解(初级)
# 声明周期概念每个 vue实例开始创建 -> Vue构造函数内部进行一系列处理 -> 销毁vue实例完毕 的过程称为“生命周期”,这中间可能经过:设置数据监听、编译模版、将实例挂载到 DOM 并在数据变化时更新 DOM … …存在处理过程,必然有着先后顺序,比如 将要开始处理时,设置数据监听完成时… …假设将这些重要的时刻命名为 “时间节点”。Vue构造函数在初始化时,抛出了...原创 2019-12-04 16:22:26 · 123 阅读 · 0 评论 -
小白的 vue.config.js 配置分析
首先,vue.config.js 文件必须要导出一个对象【涉及到模块概念】module.exports = {};对象属性详解# publicPath部署生产环境和开发环境的URL。默认值是 /,表示绝对路径的根目录下默认情况下,Vue CLI会假设你的应用是被部署在一个域名的根路径上。例如:https://www.my-app.com/。如果应用时部署在一个子路径上,你就需要用...原创 2019-12-02 16:35:22 · 904 阅读 · 0 评论