beichen3997的博客

<template v-for="(person,index) in Form.List"> <el-form-item :prop="'List.'+index + '.code'" :key="person.key" :rules="rules"> <el-input v-model="person.code"></el-input> </el-form-item> <el-form-item p.

<section class="search-area" v-if="selectOption.length > 1" ref="scrollTree"> <h-select v-model="selectedValue" style="margin: 0px 6px; width:90%; margin-bottom: 10px;" > <h-option v-for="opt in selectOption" ...

从零到一实现自己的脚手架工具CLI1. #!/usr/bin/env node2.npm init –y3.package.json 中添加 bin4.npm link 把命令链接到全局5.itcast –h| --help查看使用帮助6.itcast –v|--version 查看工具版本号7.itcast list 列出所有可用模板8.itcast init <template-name><project-name>基于指定的模板进行初..

前言： 因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）原理：当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会...

vue有时候在改变了数组的值的时候，视图并不会更新，这时候就需要调用vue变化数组的方法来实现一、变化数组方法push()pop()shift()unshift()splice()sort()reverse()二、替换一个数组filter()concat()slice()为什么vue数组改变了，视图不变？Tips由于 JavaScript 的限制，Vue 无法检测到以下数组变动1、当你使用索引直接设置一项时，例如 vm.items[indexOfItem] ...

父组件能够监听到子组件的生命周期，通过@hook:进行监听代码如下：// 这里是父组件<template> <child @hook:mounted="getChildMounted" /></template><script>method: { getChildMounted () { // 这里可以获取到子组件mounted的信息 }}</script>...

1.渲染过程顺序：父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()2.更新过程顺序：父组件更新过程：父组件beforeUpdate() -> 父组件updated()子组件更新过程：父组件beforeUpdate()

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。解决办法：在v-for的外层或内层包裹一个元素来使用v-if...

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：

<template> <div> <p> {{ firstNum }} </p> <p> {{ secondNum }} </p> <p> {{ thirdNum }} </p> </div></template> <script> export default { computed: { .

手贱，升级vue-cli到3.然后排错排了一下午，总体上来说升级3优点大于缺点这里说下cli3中如何禁用 写代码时的唐僧--eslint 使用配置文件来选择禁用范围 创建文件.eslintignore 加入如下内容 **/*.js**/*.vue 禁用下一行 // eslint-disable-next-line to ignore the next l...

近期做vue的缓存等，路由比较复杂，认识了几个新的钩子函数，在此记录下生命周期函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeRouteEnterbeforeRouteLeaveactivateddeactivatedbeforeDestroydestroyed一、 组件间函数的关系1....

<el-table size="medium" :default-sort="defaultSort" :data="tableList" ref="tab" class="mt20" :style="{'width':'100%'}" :height="tableHeight...

legend: [ { itemWidth: 33, data: [ { name: "蒸发量", icon: "rect" } ], bottom: ...

table动态布局以及使用fixed定位造成的结果解决办法重新计算table布局 this.$nextTick(()=>{ this.$refs.tab.doLayout() })解决后效果...

一，创建项目使用npm安装vue-cli 3和typescriptnpm i -g @vue/cli typescript使用vue create命令快速搭建新项目的脚手架vue create vue-tsvue-ts 是我们的项目名称，执行上面的命令后，出现如下选项这里是单项选择，可以按上/下键切换选项，按enter进入下一步。这两个选项分别表示：...

<style >.btnFalse{ background: #000 !important;}.btnFalses{ background: #fff !important; color:#67C23A !important;}</style > this.$confirm(`是否启用规则：${row.code}${row.nam...

这里写自定义目录标题vue-router路由组件传参解耦 布尔模式 对象模式 函数模式 vue-router路由组件传参解耦路由组件中使用$route取路由参数会导致该路由与该组件形成高度绑定耦合原始取参方式// 路由组件const User = { template: '<div>User {{ $route.params.id }...

可进行修改，此版本是父级关联子级，点击子级不需要选择父级的业务需求完整关联的可在下面修改treeList.vue<template> <div> <my-trees :list="list" @getResult="getResult" ref="treeMenu"></my-trees> </div>...

<!-- 负责区域 --><template> <section> <section class="content-body mt20"> <div class="body-header"> <h4 class="title-header">转让区域 </h4&...

<template> <section class="main-content"> <section class="content-body pall15"> <section class="content-body mt20"> <ul class="title...

接受的页面<!-- storeOperations.vue门店运营一览 --><template> <section class="main-content"> <iframe id="child" width="0" src="http://www.list.com/acs/ceshi"> ...

打开时关闭时<template> <div id="rec" @mousedown="drag($event)" @click="showList" ref="rec" class="addClass" style="position:fixed;right: 100px;top: 100px; width: 80px;height: 54px; border...

myList.vue<template> <div class="select"> <div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div> <my-tree...

myLIst.vue<template> <div> <my-trees :list="list"></my-trees> </div></template><script>import myTrees from './treeMenus'export default { com...

<div id="app"> <select v-for="(arrItem,key) in selectList" v-model="selectArr[key]" @focus="position=key" @change="selected" :key="key" style="margin:10px;padding:10px"> <option ...

<template> <div id="app"> <div class="select"> <div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div> <div c...

想在“当前位置”获取子页面的title属性，但是main页面和子页面在不同的端口上，直接获取会出现：“Blocked a frame with origin from accessing a cross-origin frame”跨域问题于是改用postMessage进行跨域访问；子页面中： 1 2 3 4 5 6 7 ...

需求：防止时间范围内的查询到数据过多，希望设置最大可选一周的是时间范围完成效果：见下图查看官方文档，disabledDate中，time.getTime() 的范围既是禁用的时间范围pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); },}知道了怎么禁...

在el-table 中动态添加表头字段时有时候会出现表头跟下面的数据对应不上的情况，这是因为在element中el-table的底层原理中，表头时一个table，中间数据为一个table，el-table一共创建了2个table,他们呢之间时通过index进行一一对应的，要想解决需要在el-table-column的标签添加唯一标识符key 表示一一对应<el-table-co...

从vue-cli脚手架搭建,到实际项目中用到，比如vuex状态管理；css预编译语言scss；还可能会借助ui框架element-ui；以及与服务端数据交互axios；还有部署到服务器端；才是完整的项目流程，刚入门在这里耗了比较多时间，这里搭建个最简洁的全家桶方便大家学习可以跳过下面步骤直接下载使用：https://github.com/MVPVP/ypt2...使用步骤：下载代码=》安装依赖...

<template>　　<el-tree :data="navs" :props="defaultProps" show-checkbox ref="tree" highlight-current draggable node-key="navId" :default-expand-all="defaultExpand"> </el-tree>　...

Vue官方文档异步组件：在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了让事情更简单， Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。原图文来自http://www.cnblogs.com/Kummy/p/5254754.htmlvue 按需加载 相关文章...

此软件包提供Vue 2.0的Node.js服务器端呈现。安装 API 渲染器选项 为什么使用 bundleRenderer? 创建服务器捆绑 组建缓存 客户端结合(id:installation)<a name="installation" /><span id="installation">跳转到这里</span><a name=...

一、安装jQuery依赖在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖：npm install jquery --save# 如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快cnpm install jquery --save二、修改配置文件完成安装jQuery依赖之后，我们要修改 webpack.base.conf 文件配置文件。注意我现在的...

<body><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script><div id="box"> <new-input v-model="name"></new-input> {{name}}</div><scr...

<!--name: "assetsCirculationDetails"--><template> <section class="main-content"> <div class="content-top-column"> <h2></h2> &l...

一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作，为了实现高效...

<el-date-picker v-model="dioData.reqDate" placeholder="网约时间" value-format="timestamp" dateType="time"></el-date-picker>// 加上value-format="timestamp" 即可