vue
坚持学习前端日记
一个喜欢前端的程序员
展开
-
node与vue部署后台管理
首先需要一台服务器,新手可以去腾讯白嫖或者试用一台,选择window或者Linux 如果你一时不太熟或者不喜欢 又或者你暂时不太熟,又想比较快的部署一个网站,建议选择window,假设你已经有了node的后端项目,与MySQL数据库或者其他,一般白嫖的服务器不会很多,大概六十到四十g左右的样子,自己用是绝对够用,先在服务器安装node 然后把项目移到服务器里面去,服务器一般有远程连接或者window有资源盘的连接,把项目复制到指定文件下,比如我目前搭建的环境,是node vue还有nginx ngin原创 2022-07-08 09:34:05 · 534 阅读 · 0 评论 -
vue源码的stateMixin学习--1
创建一些api data props set del watchfunction stateMixin(Vue) { // flow somehow has problems with directly declared definition object // when using Object.defineProperty, so we have to procedurally build up // the object here. var dataDef = {};原创 2021-09-14 17:40:32 · 257 阅读 · 0 评论 -
vue初始化开始--学习1--initMixin
initMixin(Vue); stateMixin(Vue); eventsMixin(Vue); lifecycleMixin(Vue); renderMixin(Vue);initMixin函数初始化var uid$3 = 0;Vue.prototype._init 加入这个初始化函数 使用场景 所有组件初始都会使用var vm = this;// a uidvm._uid = uid$3++;每一个组件执行这个函数都会加入一个 uid表示是第几个组件var s..原创 2021-09-14 17:07:16 · 300 阅读 · 0 评论 -
vue源码5--学习数组与对象的响应式
var arrayProto = Array.prototype; var arrayMethods = Object.create(arrayProto); var methodsToPatch = [ "push", "pop", "shift", "unshift", "splice", "sort", "reverse", ]; /** * Intercept mutating methods and emit eve原创 2021-09-14 15:32:21 · 173 阅读 · 0 评论 -
vue学习4--Dep对象与watcher对象
var Dep = function Dep() { this.id = uid++; this.subs = []; }; Dep.prototype.addSub = function addSub(sub) { this.subs.push(sub); }; Dep.prototype.removeSub = function removeSub(sub) { remove(this.subs, sub); }; Dep.prototyp.原创 2021-09-14 15:14:54 · 524 阅读 · 0 评论 -
vue源码3--学习
/** * Convert an Array-like object to a real Array. */ function toArray(list, start) { start = start || 0; var i = list.length - start; var ret = new Array(i); while (i--) { ret[i] = list[i + start]; } return ret; }原创 2021-09-14 15:08:27 · 127 阅读 · 0 评论 -
vue源码--闭包缓存--2
// 字符串分割 结合 空对象 循环数组 赋值对象 形成 mapfunction makeMap(str, expectsLowerCase) { var map = Object.create(null); var list = str.split(","); for (var i = 0; i < list.length; i++) { map[list[i]] = true; } return expectsLowerCase ?原创 2021-09-14 14:37:11 · 159 阅读 · 0 评论 -
记录vue源码判断--1
通过匿名函数执行 传入 this 代表window global形参 表示window里面的typeof exports判断 表示 是否 支持 模块导入判断是否为function 看看是不是可以在浏览器 挂载vue位于全局变量如果可以就把 function 也就是 vue的函数 给到 factory 然后赋值isUndef isDef isTrue isFalse isPrimitive用于判断判断对象function isObject(obj) { return obj !.原创 2021-09-14 14:17:38 · 342 阅读 · 0 评论 -
vue的$nextTick 两层嵌套 -- 解决v-if嵌套v-for节点问题
<template> <div class="video-sur"> <div class="header"> <img src="/img/icon.png" height="14px" alt="" srcset="" /><span style="margin-left: 5px; display: inline-block" >视频监控</span >原创 2021-07-01 12:15:57 · 1987 阅读 · 2 评论 -
vue打包安卓
第一步新建vue项目注意dist文件 里面 通常打包之后 有static 或者没有这个是在配置里面的然后 关键的位置来了打包安卓使用 Hbuilder 的路径需要注意vue项目里面打包出来 需要服务器运行 所以 一直给了一个url 路由/a/b/c 类似这样的我们需要去项目里面去 修改 比如最新的脚手架 提供了 vue.config.js文件把打包publicpath 改为 ./可以去 打包之后 的 html文件里面 修改 如下 两种方式都是可以的然后我们需要通过使用Hbuil原创 2021-06-17 11:51:44 · 1146 阅读 · 2 评论 -
echarts学习3--饼图的设置
let option = { color: ['yellow','skyblue','rgb(233, 101, 101)','rgb(82, 231, 231)','rgb(82, 231, 231)'], // 改变标题颜色 与线条颜色 统一 legend: { // top: "top", // show: false, // 标题的隐藏 默认是true 为展示 orient: 'vertical', // .原创 2021-06-02 15:35:53 · 1074 阅读 · 0 评论 -
echarts学习2--折线图(折线与平滑的曲线)
在于smooth属性默认是false false就是直线 true就是曲线原创 2021-06-02 15:28:25 · 3195 阅读 · 0 评论 -
vue滚动轮播的组件使用
效果如图 点击右边 左边可以 过渡 平移listData为数组对象 自行调整import scroll from "vue-seamless-scroll"<div class="video-scroll" @click="butChange"> <scroll :class-option="optionSwitch2" class="seamless-warp3"> <span slot="left-switch" class="lef.原创 2021-06-02 15:25:12 · 339 阅读 · 1 评论 -
vue组件通信--emit/on
开头先简单说一下组件用的最多的就是组件里面包含各种各样的组件 处理组件的各种关系组件有全局的有局部的,在vue-cli类似的脚手架里面 通常使用template,style script 其实还有一种方式使用的有多 就是在script里面使用render函数接收props与上下文内容 也是可以的如下图组件导入使用的开头也就是对应这 思想一样 代码有一点点区别其实还是一样的。进入正题 申请 但凡不是和html标签元素同名的 都是子组件<dinput :value="str" @input原创 2021-05-28 14:59:29 · 320 阅读 · 0 评论 -
vview组件库vue树实现复现
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ViewUI example</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> <script type="原创 2021-04-25 12:03:35 · 1086 阅读 · 0 评论 -
谈论vue一下v-on
// scope.row 是element 表格的 当前行 e是事件触发默认的event事件集合// 使用箭头函数可以两边都获取 如同执行两个函数一样 // 如果只有一个普通函数变量名 就 只能获取 你传入的 或者 没有形参情况的eventv-on:confirmhandler="(e)=>confirmhandler(e,scope.row)">this.$emit('confirmhandler',Event)...原创 2021-03-26 10:11:14 · 110 阅读 · 0 评论 -
解决vue路由跳转不能拿到最新的路径
this.$nextTick(()=>{ this.tabChange({ name: this.$route.meta.title, url: this.$route.path, active: sessionStorage.getItem('active') }) })原创 2021-03-20 11:36:26 · 577 阅读 · 0 评论 -
自定义前端脚手架的搭建
欢迎去gitee点赞打包运行压缩解析vue自定义脚手架原创 2021-02-25 21:48:56 · 2319 阅读 · 0 评论 -
vue挂载
上图:如图所示:vue挂载的方法有两种,编译模板的方法有三种但最终都会变为虚拟节点成为渲染函数render–>template–>el 挂载的位置是el或mount来获取节点 进行替换内容经过了什么从生命周期开始beforecreated:执行了生命周期函数 把全局api挂载到vue的原型上面,这个原型的绝大部分都被组件实例得到了实现,只有一些特殊的api比如一些配置vue.config vue.use vue.errorhangler performance 等等作为全局特有的c.原创 2021-02-03 15:34:31 · 6296 阅读 · 3 评论 -
vue使用css变量
// html 模板 template <span class="red" :style="styleVar" @click="add">as</span> // js data() { return { styleVar: { "--colorBlue": "blue", "--colorRed": "red", "--fontSize": "30px", "--fontSizeTest":原创 2021-02-01 10:33:58 · 863 阅读 · 0 评论 -
provide与inject
left可以传this 然后子组件可以拿到父组件的实例信息inject->data(方法与数据合并了)->provide(函数返回对象或者对象(拿不到this))->created原创 2021-02-01 10:07:44 · 98 阅读 · 0 评论 -
vue项目里面使用阿里图标库
阿里图标库登录账号 把喜欢的图标下载 选择font class 创建项目 放入然后 下载至本地 有一个压缩包 都解压到任意目录然后main.js导入import './assets/icon/iconfont.css'import './assets/icon/iconfont.js'如果你想使用里面的字体一定使用这个样式 全局覆盖@font-face { font-family: "iconfont" !important; src: url("./assets/icon/i.原创 2021-01-22 14:59:12 · 229 阅读 · 0 评论 -
封装axios与express加密token
import axios from 'axios'axios.interceptors.request.use(success => { // console.log(success) return success}, err => { console.log(err) return err})axios.interceptors.response.use(success => { // console.log(success) return success原创 2021-01-20 17:00:17 · 243 阅读 · 1 评论 -
自嗨小型vuejs
class Vue { constructor(options) { console.log(options) this.data = options.data console.log(this.data) console.log(this) this.template = options.template this.el = options.el this.observe(this.原创 2021-01-20 15:12:10 · 199 阅读 · 0 评论 -
vue路由动态增加组件渲染
export const routes = [ { path: '/', name: 'Home', component: Home, { path: '/', // 必须含有默认 才能动态 component: { render: h => h('div',{},12311) } }] }, { path: '/about', name: 'About', // route原创 2020-12-16 17:39:32 · 809 阅读 · 1 评论 -
vue父子组件加载顺序
解析:Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:加载渲染过程 : 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程 : 父 beforeUpdate -> 子 beforeUpdate -> 子 updated ->原创 2020-12-03 09:20:01 · 847 阅读 · 0 评论 -
vue的diff算法节点操作与异步缓存队列刷新视图
原创 2020-12-03 08:51:32 · 169 阅读 · 0 评论 -
vue初始化加载源码解析
created自上而下,由于mounted自下而上initlifecycle events rendercall hook beforecreateinject注入数据在前避免与data重复 state(data/props) provide提供created$set 触发了对象属性的改变 与数组索引的变化 来将最新的数据 加入dep 然后 通知视图 变更渲染一个组件一个watcher 一个对象一个observe 一个depset触发同一个属性第一次会入队dep然后触发多次 不会入队 相同原创 2020-12-03 08:48:36 · 220 阅读 · 0 评论 -
vue脚手架的跨域配置
module.exports = { devServer: { open: true, proxy: { '/getDiscList': { target: 'http://localhost:8000/tp5/publica/index/Cook/show',// 要跨域的域名 changeOrigin: true, // 是否开启跨域 pathRewrite: .原创 2020-12-01 21:48:55 · 560 阅读 · 2 评论 -
vue里面结合element的js下载pdf
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script><script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>把文件放在脚手架的文件静态或者动态的文件夹里面使用HTML导入<script src=".js/html2canvas.js"原创 2020-11-27 13:49:26 · 481 阅读 · 0 评论 -
v-if与v-for
官网有说v-if与v-for不要放在一起用因为v-if的优先级大,获取不到v-for的值所以一般多是v-for之后里面包含v-if,循环的时候判断是否显示隐藏什么内容,而且使用v-if就会涉及到v-show的区别,一个是移除dom节点,一个是隐藏节点不占据位置,所以在频繁切换的地方使用v-show,而不频繁的使用v-if在使用v-for的时候如果你需要打印过滤之后的东西,建议使用computed计算机属于里面绑定data的响应式数据读取缓存,来动态改变,避免写多次重复的代码,优化代码结构。如果计算机属原创 2020-11-21 20:46:18 · 1124 阅读 · 0 评论 -
vuex简单源码实现
let Vue // 在变量声明 不然会保存class Store // Vue.store({}) 对应使用结构 // export default {Stroe,install} install用于use插件{ constructor(option = {}) { // install 执行成功 Vue上面就会存在$store原型 this.state = new Vue({ // 当 data:option.state原创 2020-11-08 16:28:57 · 113 阅读 · 0 评论 -
vue路由杂谈
使用vue做单页面网站 ,路由的配置是必不可少的,我们需要配置路由使用use 注册到vue的实例里面 其实,也就是执行了install的方法,也因为这样我们可以给vue写很多插件,路由有hash 与history 一个是带#号一个是不带的 ,首先 这两个属性 都在 bom对象的location对象与history里面 存在我们可以通过location.hash来获取通过监听hash变化来控制页面显示隐藏同样我们可以获取history 这需要控制state运用如上的方法 来实现 路由 不管是 v原创 2020-10-13 20:51:24 · 185 阅读 · 0 评论 -
vue使用axios结合PHP多文件上传
<input type="file" ref="file" @change="upd" multiple>//单文件不需要加判断 多文件multiple加一个判断。 由于e.target.files是可迭代的对象我们先转换数组循环判断也是可以做单文件上传upd: function (e) { console.log(this.$refs.file) console.log(e.target.files instanceof Array)//fa原创 2020-09-21 23:27:30 · 378 阅读 · 0 评论 -
vuex详细分析
mapGetters,mapActions,mapState,mapMutations把vuex里面的各个模块的数据仓库 同步 异步 初始化都遍历到一起,方便多人合作 ,各自维护数据,但是 从代码上看不出是什么仓库<template> <div class="hello"> <h1>{{ msg }}</h1> {{b}}{{q}}{{aa}} <button @click="getValue(1)">点击</原创 2020-09-18 17:44:57 · 89 阅读 · 0 评论 -
vue如何实现视图渲染
从脚手架入手template 模板 比如<template><div><span v-if="bool"></span></div></template><script>exprot default{data:function(){return {bool:"true"}}}</script>一步步来分析data使用函数来返回数据对象将这些数据对象做数据劫持使用object.原创 2020-08-20 13:11:45 · 837 阅读 · 0 评论 -
axios的封装
import http from './http/index'Vue.use(http);//import {http} from './http/index'//Vue.prototype.$http=http;如下是index文件import axios from 'axios'export const http=async function(){ function But(){ return new Promise((resolve,reject)=>{原创 2020-08-18 14:24:41 · 268 阅读 · 0 评论 -
前端面试第二波
昨天参加了一场面试分初试与复试自我介绍初试问了JavaScript的Bom 与dominnerText与innerHtml的区别常用的数据类型在vue里面怎么样输入路径不让他进入特定路由网页如何控制一个特定用户可以看见页面 普通用户看不见问了前后端分离 会做吗后端数据交互用axios吗 会封装使用吗生态全家桶都用过吗复试来了一个三十多快四十的大佬直接问做过什么项目没有怎么学习vue的是用什么搭建vue问了mysql数据库怎么样做复杂查询问会前后端分离吗学过nodejs吗然原创 2020-08-18 12:54:46 · 251 阅读 · 0 评论 -
vue3.0的插槽
vue2.6 使用 父组件slot=“name” slot-scope=“data” 可以使用div或templatevue3.0 使用父组件v-slot:name="data"或者#name=“data”子组件两个都一样<p> <child> <template v-slot:tou="data">touj <span>{{data.data}}</span> </template> </child&原创 2020-07-27 21:46:35 · 2858 阅读 · 0 评论 -
vue使用formdata上传多个文件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> </div> <script src="js/vue.min.js" type="text/javascript" charset="utf-8">&原创 2020-07-26 15:47:05 · 4790 阅读 · 4 评论