zhangjing1019的博客

前言：本篇文章只做VUE3.0和VUE2.0语法上的不同分析，不做性能和源码架构等的分析。

proxy打印出来是一个这样的对象直接打印proxy里面的值可能会报undefined最简单的解决办法就是： // 导入toRaw函数 import { toRaw } from '@vue/reactivity'; // 该函数返回转换后的对象 const crystal = toRaw(menu); // 输出可以看到已经不是proxy对象了 console.log(crystal);这样就能打印出proxy里原始的对象...

前言vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。掌握这些实用小技巧，可以让你事半功倍。1、路由懒加载，能让你首次加载更快路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个栗子????，如果这样写，加载的时候会全部都加载进来。const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component:

文档里 form 表单的 labelCol 属性只写了 {span: 3, offset: 12} 的用法，和参考 Grid Col 的属性参数，并没有说可以设置 style 属性和用法。其实可以直接设置label的宽度:labelCol="{ style: 'width: 100px' }"欢迎关注我的个人技术博客 javascript艺术...

在平时的业务场景中，我们需要用到一个年份的选择组件。但是在antd2.x的版本中，antd的DatePicker组件还没有mode属性，不能单独设置为年份选择器。mode="year"时，面板弹不出且不能选择日期，解决办法就是用open、@openchang 、@panelChange解决 <a-date-picker mode="year" style="width: 100%" v-model=".

什么是微前端通俗易懂的来说，微前端是可以将一个大应用的不同部分进行独立的部署，各个部分之间相互独立，独立部署的能力允许他们构建孤立或松散耦合的服务。即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端的核心设计理念技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端

VUE3.0亮点Performance (比 vue2 runtime快了2倍)Tree shaking（按需编译代码）Ts support （更优秀的Ts支持）Composition API（组合 API）Custom Renderer API （自定义渲染器）内置新特性组件性能重写了虚拟 dom 的实现vue3.0将 vdom 更新性能由与模版整体大小 相关提升为与动态内容的数量相关优化插槽生成在当前的 Vue 版本中，当父组件重新渲染时，其子组件也必须重新渲染。 使用 V

getParentTag(startTag) { var self = this; // 传入标签是否是DOM对象 if (!(startTag instanceof HTMLElement)) return; // 父级标签是否是body,是着停止返回集合,反之继续 let nodeName = ""; if (s...

paste事件就是粘贴事件需要通过clipboardData获得粘贴的内容<table> <tr> <td @paste="pasteMe($event)"></td> </tr></table>pasteMe() { //获得粘贴的文字 let self = t...

vue render JSX写法一、为什么要用JSX写法JSX写法相比render写法，更接近html语法；遇到变量， 用{}，{}里面写变量，<script type="text/jsx">export default { data() { return { } }, watch: { }, co...

github源码地址：https://github.com/zhjing1019/moreTreeTable使用方法一、下载该组件npm install more-tree-table二、多表头表格 <more-tree-table :colData="colHead" :rowData="rowHead" :tableValue="t...

vue click事件获取当前元素对象 点击当前行获取下一行 li2 li3 new Vue({ el: '#app',

转自：https://www.cnblogs.com/ylHeyden/p/7544373.htmlVue的官方自定义directive，基本调用简洁如下:Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触发，通常做一些事件监听的初始化 inserted: function () {...

一、解释 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。二、用法 provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。 inject选项应该是：一个字符串数组或一个对象，对象的key是本地的绑定名 //父组件provi...

一、如下代码，给 student对象新增 age 属性data () { return { test: { name: '', age: '' } }}二、众所周知，直接给test赋值操作，虽然可以新增属性，但是不会触发视图更新mounted () { this.tes...

一款可编辑表格，可以自定义表格内容和格式，表格中有常用的input，select，datePIcker，selectTree等，可以拖拽表格，类似于excel拖拽赋值的功能，并对表格进行实时校验使用了vue和render函数和jsx写法贴一个源码地址https://github.com/zhjing1019/CanEditGrid组件的使用1、组件...

复杂表格，支持表格展示，树形表格展示，对表格进行拖拽排序，以及表格排序，表格拖拽排序，自定义表格内容，是一个基于vue的表格插件话不多说 ，直接贴源码地址：https://github.com/zhjing1019/ComplexGrid树形表格拖拽排序组件的使用下载组件npm install complex-grid引用组件im...

module.exports = { // 用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值， // 所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 publicPath: '/', // 当运行 vue-cli-service build 时生成...

一、如果是单页面程序public目录下有个index.html和favicon.icoico的路径二、如果是多页面程序publc目录下放ico图标public下的index页面然后在vue.config.js里的page配置ico的路径...

一、vue-router传递参数分为三大类(1)声明式的导航 <router-link> //传递参数<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>//接受参数，参数会自动拼接到页面路径中/news?us...

一、在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 ，需要用vue内置的方法二、Vue.set() 响应式新增与修改数据此时我们需要知道Vue.set()需要哪些...

render 中 slot 的一般默认使用方式如下： this.$slots.default 对用 template的<slot>的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。在render函数中动态使用多个slot，并且给slot传值一、我的业务逻辑： 使用了三个组件， 组件A调用组件B，组件B调用组件C，组件C是自己...

进入/离开 & 列表过渡概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js单元素/组

vue里面本身带有两个回调函数：一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。另一个是`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。栗子： {{item}}new Vue({ el:'#demo', data:{ list=[0,1,2,3,4,5,6,7,8,9,10] }, me

前面vue2.0和webpack都已经有接触了些（vue.js入门，webpack入门之简单例子跑起来），现在开始学习如何构造自己的vue2.0+webpack环境。1.首先新建一个目录vue-wkdemo，这是我们的项目目录。执行 npm init 命令生成package.json文件。执行npm init之后，会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行 npm init

webpack+vue2.0+nodeJs搭建环境npm 和 nodejs还有淘宝镜像npm 的全称是 nodejs包管理，现在越来越多的项目(包)都可以通过npm来安装管理，nodejs是js运行在服务器端的平台，它使得js的能力进一步提高，我们还要使用nodejs配合 webpack 来完成热加载的功能。所以读者最好有nodejs的开发经验，如果有express的经验更

function getRequest(url, params) { return new Promise((resolve, reject) => { Vue.$http.get( url, { params: params }, {emulateJSON: true} ) .then((res) =>

我的项目本来用的element，但是switch开关不符合设计要求，于是自己封装了一个switch组件，并且实现了switch开关的双向数据绑定<template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="swit...

分享一下我去如何解决vue render 中 如何正确配置img的src 路径？一、我的项目中有俩层组件， 第一层父组件，第二层是render函数封装的组件，父组件调用render函数组件二、render函数中需要创建<img>标签，img中的src是父组件传进来的； src正确传进来，图片却不不显示。三、解决办法： 首先在...

一、安装sass依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass报错，记得一管理员cmd运行下载依赖包    然后运行项目  背景图片颜色改变就成功了！ ...

1.首先需要安装node环境，版本最新比较好，最低4.0+吧   我本地的node环境是6.4:　2.express中文官网：http://www.expressjs.com.cn/,在这里大家可以学习完整的express框架 3.到官网可以学一些express的基础用法，初始化一个项目seed可以使用express生成器npm install express-genera...

一． vue-cli初始化1. 全局安装 vue-cli　　npm install --global vue-cli2. 创建一个基于 webpack 模板的新项目　　vue init webpack my-project3. 安装依赖　　cd my-project　　npm install (换源安装: npm install --registry https://registry.npm.ta...

一、环境搭建1.1、去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  )     注意node的版本，只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.下载安装包之后直接点击安装即可。1.2、利用npm安装webpack 命令行语句为npm install ...

vue组件实现Tab切换功能&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Demo&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/vue/2.4.1/vue

Vue2.0总结———vue使用过程常见的一些问题 Vue目前的的开发模式主要有两种：1.直接页面级的开发，script直接引入Vue2.工程性开发，webpack+loader或者直接使用脚手架工具Vue-cli，里面的文件都配置好了webpack可以进行配置，配置多文件入口，进行多页面开发第二种Vue开发，结合webpack打包完文件会很大，怎么解决这个问题?1.webpack代码拆分：cod...