VUE - 技术教程文章
Vue3中的Proxy作用在哪里？【代码】【图】
目录前言Vue没有Proxy会怎么样？proxy开始前言在讲解Proxy之前，我们有些前置知识点是必要掌握的：Object相关静态函数Reflect相关静态函数简单说明知识盲点名称介绍Object.isExtensible()方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或nullObject.preventExtensions()方法让一个对象变的不可扩展，也就是永远不...
vue get/post请求如何携带cookie的问题【代码】
一：只需要在main.js中写这三行代码即可import axios from ‘axios‘axios.defaults.withCredentials=true;//让ajax携带cookieVue.prototype.$axios = axios;如果cookie携带不过去的话，请求响应的时候他会报错显示登陆过期的呦！！！顺便说一下原生js携带cookie的方法： xhrFields: { withCredentials: true },加一段上述代码即可来源：https://blog.csdn.net/liuxin_1991/article/details/8...
Vue 开发自定义插件学习记录 -- 入门【代码】
首先，你需要了解插件实现的基本原理 插件基本原理： 我们都知道用Vue.use注册插件，那你知道Vue.use(plugin) 干了什么？以下是我对Vue官网的一些摘录和个人的理解 Vue.use( plugin ) 参数：{Object | Function} plugin 用法：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当...
vue基础01【代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>[v-cloak]{display: none;}#app{width: 800px;margin: 20px auto;}#tb{width: 800px;border-collapse: collapse;margin: 20px auto;}#tb th{background-color: #0094ff;color:white;font-size: 16px;padding: 5px;text-align: center;border: 1px solid black;}#tb td{padding: 5px;text-align: center;border: 1px solid black;}</sty...
vue父子传值
App.vue<template> <div id="app"> <img src="./assets/logo.png" /> <!-- <router-view /> --> <father /> </div></template> <script>import father from "./components/father";export default { name: "App", components: { father }};</script> <style>#app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align:...
Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种：1.直接页面级的开发，script直接引入Vue2.工程性开发，webpack+loader或者直接使用脚手架工具Vue-cli，里面的文件都配置好了webpack可以进行配置，配置多文件入口，进行多页面开发第二种Vue开发，结合webpack打包完文件会很大，怎么解决这个问题?1.webpack代码拆分：code-spliting2.提取公共（如提取css,js）3.预渲染：使用prerender-spa-plugin插件4.后台————开启压缩，gzip (会很有用)5.异步...
vue 里面日历能够自定义价格。【代码】
cell-month 组件<template><div class="cell-month"><div class="weeklist"><!--星期几--><div class="week_box"><p v-for="(item,index) in weekData">{{item}}</p></div><!--slot插入时间--><slot slot="select_month"></slot><!--具体的时间--><div class="monthDayList"><divv-for="(item,index) in daysData" class="dayList"@click="selectDate(item,index)":class="{selectDay:isSelect == index,unData:item.day == ‘ ‘}...
Vue的watch监听事件【代码】
Vue的watch监听事件相关Html:<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>名称案例</title><script src="../js/vue-2.4.0.js"></script> </head> <body> <div id="app"><input type="text" v-model="firstname" @keyup="getFullname">+<input type="text" v-model="lastname" @keyup="getFullname">=<input type="text" v-model="fullname"></div><script>var vm = new Vue({el: "#app",data: {firstnam...
Vue项目中自动将px转换为rem【代码】【图】
一、配置与安装步骤： 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹： 2、在 config 文件夹中创建 rem.js： 3、将以下代码复制到 rem.js 中：(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})(); 4、在 src 文件夹下的 main.js 中引入：import ‘./config/rem‘ 5、在 Vue ...
Vue.js——60分钟组件快速入门（下篇）【代码】【图】
概述上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”今天我们将着重介绍slot和父子组件之间的访问和通信，slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件，它用于组件之间...
阐述vue项目中package.json与package-lock.json作用及区别【图】
我们每次新建一个项目的时候会发现在项目中会有这么俩个相似的文件，并且一个里边东西很多一个里边的东西很简洁，那么他们到底有什么区别与联系。 npm5之前的版本，是不会生成package-lock.json这个文件的。npm5版本及以后，才会生成package-lock.json文件；当使用npm安装包的时候，npm都会生成或者更新package-lock.json文件，npm5版本及以后的版本，在安装包的时候，不需要加 --save（-s） 参数，也会自动在package.json中保存...
Vue2 学习笔记4【代码】
文中例子代码请参考github父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: ‘#app‘,data: {msg: ‘这是父组件中的消息‘},components: {son: {template: ‘<h1>这是子组件 --- {{finfo}}</h1>‘,props: [‘finfo‘]}}});</script>使用v-bind或简化指令，将数据传递到子组件中：<div ><son :finfo="msg"></son></div>完整...
vue登录插件引来的后续问题【代码】【图】
上次介绍了下写的登录弹框插件，过了几天发现点击去注册或者改密码的跳转失效。报错this.$router.push is not a function,继续打印this.$router也是undefined（可以先看一下上一篇博客提到的弹框登录插件）this.$router.push({ path:‘/register‘})尝试了很久，试了三种方法。需要注意的是：登录弹框是通过this.$login调用方法来动态插入组件的，这个登录弹框不在路由的组件管理范围内。第一：引入子路由，需要加router-view但是这...
vue mixins 合并策略
1、datamixins中的data会合并到data中，有冲突的话，data中数据覆盖mixins中的数据。 2、钩子函数mixins中的钩子函数也会执行，先执行mixins中的钩子函数。 3、methods、components 和 directivesmethods、components 和 directives会执行，但有冲突时，原methods、components 和 directives会覆盖mixins中的methods、components 和 directives。 参考：https://cn.vuejs.org/v2/guide/mixins.html原文：https://www.cnblogs.com/m...
加载多个Vue版本导致的bug
团队自己开发的一个UI基础库依赖于Vue^2.5.16, 开发业务项目的时候由于Vue已经更新到2.6.10了，业务项目里面的Vue依赖是~2.5.16,所以导致安装项目依赖时，UI基础库安装了2.6.10版本，项目库安装了2.5.21版本，这样在运行时加载了两个版本的Vuejs库。updateChildComponent这个函数会在给实例的$attrs和$listener属性赋值，处理前将isUpdatingChildComponent置为true，处理后将isUpdatingChildComponent置为false。只有在更新子组件时...
vue - blog开发学习4【代码】
1、新建页面的修改，集成富文本编辑 edit-post.vue（新建和修改都用该组件）<template><div class="editor"><span class="h5 text-left">标题</span><Input v-model="title" size="large" placeholder="请输入标题~~~"/><span class="h5 text-left">内容</span><TinymceEditor ref="editor" v-model="content" :disabled="disabled" @onClick="onClick"></TinymceEditor><Button @click="submitPost">发布</Button><Button type="d...
vue3.x vue.config.js文件配置【代码】
创建 vue.config.js 文件const path = require(‘path‘)const resolve = dir => path.join(__dirname, dir)module.exports = {publicPath: process.env.NODE_ENV === ‘production‘ ? ‘/‘ : ‘/‘,// 打包输出outputDir: "dist",// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: ‘assets‘,// eslint-loader 是否在保存的时候检查lintOnSave: process.env.NODE_ENV !== ‘production‘,...
Vue style里面使用@import引入外部css, 作用域是全局的解决方案【代码】
问题描述使用@import引入外部css，作用域却是全局的<template></template><script>export default {name: "user"}; </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import "../static/css/user.css"; .user-content{background-color: #3982e5; } </style>Add "scoped" attribute to limit CSS to this component only这句话大家应该是见多了, 我也使用scoped, 但是使用@import引...
vue.js【代码】
遍历循环数组： v-for <div id="app"><p v-for="item in list">{{item}}</p><p v-for="(item,i) in list">索引值：{{i}} --- 每一项： {{item}}</p></div><script>var vm =new Vue({el:‘#app‘,data:{list:[1,2,3,4,5,6]}})</script> <div id="app"><p v-for="item in list">Id: {{item.id}}---name: {{item.name}}</p></div><script>var vm =new Vue({el:‘#app‘,data:{list:[{ id: 1, name:‘zs1‘},{ id: ...
vue 实践技巧合集
前言本文纯属个人平时实践过程中的一些经验总结，算是一点点小技巧吧，不是多么高明的技术，如果对你有帮助，那么不胜荣幸。本文不涉及罕见API使用方法等，大部分内容都是基于对vue的一些实践而已。由于涉嫌投机取巧，可能会带来一些不符合规范的副作用，请根据项目要求酌情使用。多个页面都使用的到方法，放在 vue.prototype 上会很方便 刚接触 vue 的时候做过一件傻事，因为封装了一个异步请求接口post,放在 post.js 文件里面，...
Vue开源
Vue开源 - 为移动而生的Vue JS 2组件框架vonic ★1494 - 快速构建移动端单页应用eme ★1390 - 优雅的Markdown编辑器vue-multiselect ★1166 - Vue.js选择框解决方案vue-table ★824 - 简化数据表格VueCircleMenu ★776 - 漂亮的vue圆环菜单vue-chat ★748 - vuejs和vuex及webpack的聊天示例radon-ui ★633 - 快速开发产品的Vue组件库vue-waterfall ★605 - Vue.js的瀑布布局组件vue-carbon ★595 - 基于 vue 开发MD风格的移动端vue...
vue文件上传 vue-simple-upload的使用方法【图】
极其可怕，在使用vue-simple-upload插件做文件上传的时候，遇到总是访问不到后台的接口。我以为我插件使用有问题，各种改，因为不熟悉，假象地改了几遍。emmmm~~原来是我的action参数给的小写的post，开始控制台报错了，给了那么明显的暗示，我居然没有懂起~~~好，第一步，下载npm install vue-simple-uploader --save第二步，引导要使用的组建里去：import FileUpload from ‘vue-simple-upload/dist/FileUpload‘ 第三步，再定义...
Vue indent eslint缩进webstorm冲突解决【代码】【图】
参考教程官方回复ESlint设置 rules: {'no-multiple-empty-lines': [1, {max: 3}], // 控制允许的最多的空行数量'vue/script-indent': ['error', 2, {baseIndent: 1}], // 控制js缩进},overrides: [{files: ['*.vue'],rules: {'indent': 'off'}}]WebStorm修改配置兼容File => Setting => Editor => Code Style => HTML 找到Do not indent children of 的选项，添加 script 标签就完美解决缩进问题。原文：https://www.cnblogs....
Vue EasyUI 调整大小v-Resizable的坑【代码】
具体安装，参考https://www.w3cschool.cn/vueeasyui/vueeasyui-p8h937nn.html 坑：这样无效 v-Resizable 直接套在 LayoutPanel 标签里面<template><div><Layout style="width: 700px; height: 250px"><LayoutPanel region="north" style="height: 50px"><div class="title">North Region</div></LayoutPanel><LayoutPanel region="south" style="height: 50px"><div class="title">South Region</div></LayoutPanel><LayoutPanel...
01_创建 Vue 3.x 项目（vite）【代码】
1.vite vite 是 Vue 作者开发的一款意图取代webpack的工具 原理：利用 ES6 中 import 会发送请求去加载文件的特点，拦截请求，做一些预编译，减少 webpack 冗余的打包时间2. 安装 create -vite -app - 1.如果已经安装过旧版，先卸载npm install -g create-vite-app或 yarn add create-vite-app - 2.创建项目create-vite-app projectName - 3.启动cd projectName npm install npm run dev 注：Vue3.0兼容Vue2.x 原文...
vue 中 v-slot【代码】
最近做的一个项目里面很多这个v-slot，对这个真的是不懂。（https://blog.csdn.net/weixin_34357436/article/details/91435871）后来看了看稍微懂一点了。子组件定义name，父组件使用v-slot:name来打通父子组件。父组件必需写上template标签，格式为v-slot:name="slotProps"。子组件必需写上 name,相当于一个标记,一个ID。父组件向子组件传标签，子组件向父组件传值。父组件<div class=‘father‘><template v-slot:footer><!--传标...
理解mpvue的生命周期【代码】【图】
mpvue是美团基于vue开发的一个开发小程序的框架，从而以vue的语法来开发小程序。在生命周期上，mpvue同时支持了vue的生命周期和小程序的生命周期，这可能让新上手的同学费解。这篇文章就来讲讲mpvue的混合生命周期。一个bug在深入之前，先说一个mpvue开发中的常见的坑。假设你在一个页面中有打开了一个弹窗，然后在没有关闭的情况下返回上一页，然后再重新进入时，弹窗依然在那里。按道理说，返回上一页时，弹窗所在的page实例已经...
Vue基础指令【代码】【图】
一 Vue框架简介 Vue是一个构建数据驱动的web界面的渐进式框架。 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件1 <div id="app"> 2 <span>你的名字是{{name}}</span> 3 </div> 4 var app=new Vue({ 5 el: ‘#app‘, 6 data:{ 7 name:‘wdb‘8 } 9 })二 Vue指令 Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能， 它...
Vue的基础使用【代码】
Vue的介绍渐进式的JavaScript框架vue react angualr作者:尤雨溪 facebook 谷歌公司文档:中文 建议:如果你想学好vue 1.看视频 初步的了解vue 2.学vue的课 时刻看官网文档 https://cn.vuejs.org/前端框架和库的区别功能上的不同jquery库：包含DOM(操作DOM)+请求，就是一块功能。art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板 跟python的模板类似)框架：大而全的概...
vue 组件之纯表格渲染--没有事件交互【代码】【图】
组件 名称小写==》 用-链接02===> 属性==> empty-text="暂无数据" 当表格中没有数据 就会显示 暂无数据<el-table-column v-for="item in tabColumn":key="item.prop":prop="item.prop":label="item.label":width="item.width":align="item.align"empty-text="暂无数据"></el-table-column>03==> :align="item.align" 是居中的方式 有 left center right 组件.vue<template><el-table :data="tableData" stripe style="width: ...