vue
文章平均质量分 54
杨阳洋
一个从事前端工作的女程序媛
展开
-
前端配置外移
不同运行环境下部署前端项目,需要打包不同路径的前端包。配置外移可以实不同环境下部署项目,只需要修改配置文件即可。原创 2022-10-13 17:03:27 · 333 阅读 · 0 评论 -
vue列表垂直无缝滚动
实现新闻列表的轮播(如下图)上代码封装的so-marquee.vue<template> <div class="marquee-wrapper" :style="{ width: realWidth + 'px' }" > <div id="marqueeContainer" class="marquee-container" :.原创 2021-02-03 17:54:46 · 1755 阅读 · 1 评论 -
vue3.x篇四——vue router和vuex的使用
vue3.x搭载的是vue-router 4 和 vuex 4本节代码demo地址:demo项目链接1、demo图2、vue-router的用法首先要引入vue-router暴露的apiimport { useRoute, useRouter } from "vue-router";然后在setup()函数中做相应操作setup(){ const route = useRoute(); const router = useRouter(); const curRout.原创 2020-12-22 17:19:25 · 593 阅读 · 1 评论 -
vue3.x篇三:v-model用法
注意:v-mode在vue2.x和vue3.x中的使用方法有异同。本节代码demo地址:demo项目链接1、比较vue2.x和 vue3.xvue2.x:允许组件自定义用于 v-model 的 prop 和事件。但是,这仍然只允许在组件上使用一个 model。vue3.x:双向数据绑定的 API 已经标准化。(一个组件上允许使用多个model)具体的vue升级变动,请阅读官方vue3中文文档: vue3.x中文文档2、demo图3、代码Model.vue文件(父组件)<te.原创 2020-12-21 15:01:11 · 3634 阅读 · 1 评论 -
vue3.x篇二:生命周期
vue3.0的生命周期<template> <div>生命周期</div> <button @click="update">版本号{{version}}</button></template><script>//按需引入import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted原创 2020-12-17 10:51:44 · 170 阅读 · 4 评论 -
vue3.x篇一:搭建项目
利用vue-cli3以上版本脚手架搭建vue3.0项目首先确保你的vue-cli脚手架版本号在3以上,我这里用的v4.5.9。升级vue-cli请参考:升级vue-clivue -V查看脚手架版本号项目创建步骤如下:1、初始化一个vue3-demovue create vue3-demo2、直接选择Default (Vue 3 Preview)也可,只是生成的项目结构单一。我此处选择自定义3、按需添加你想要的插件(vue3.0搭载的Vuex和Router均为4.0版本的)4、选原创 2020-12-17 09:50:46 · 506 阅读 · 0 评论 -
element-ui组件中的事件传参+自定义传参
问题描述:vue中利用第三方组件,组件中的事件有时会返回参数,在保留原来的参数基础上增加自定义参数实现:(此处以element-ui中的checkbox为例)<el-checkbox :label="d_itm.id" @change="(flag,$event)=>_deptItemChange(flag,$event,d_itm)">{{d_itm.orgName}}</el-checkbox><!--flag 和 $event 是组件原始参数-.原创 2020-07-10 15:15:52 · 1808 阅读 · 0 评论 -
el-tree Scoped Slot自定义内容
问题描述element-ui中的el-tree组件自定义内容实现。依靠Scoped Slot<el-tree :expand-on-click-node="false" :props="{label:'orgName',isLeaf: 'leaf',children:'childList'}" node-key="id" :data="treeData" ref="tree" highlight-current show-overflow-tooltip @node-click.原创 2020-07-07 17:36:17 · 4620 阅读 · 0 评论 -
vue $router 打开空白页
默认是替换当前页this.$router.push('/index')可以用如下方法进行空白页打开let xtbl = this.$router.resolve('/host/wait')window.open(xtbl.href, '_blank');原创 2020-07-02 15:49:41 · 1320 阅读 · 0 评论 -
升级vue-cli3(爬坑记录)
emmm,突然想升级下vue的版本,然后要升级node和npm,在此做下笔记1、升级vue首先查看版本号,然后要把旧的版本卸载掉,重新安装新的版本# 查看版本号vue --version# ORvue -V# 卸载(1.x 或 2.x)npm uninstall vue-cli -g# OR vue-cli是 (1.x 或 2.x)yarn global remo...原创 2019-11-29 17:49:01 · 467 阅读 · 0 评论 -
vue开发微信H5——动态改变页面
需求说明动态的修改微信的title,vue2.0开发,基于微信安装插件 npm install vue-wechat-title --save在项目中引入(main.js) Vue.use(require('vue-wechat-title'))进行路由配置(index.js) routes: [ { path: '/', n...原创 2018-11-22 16:59:36 · 608 阅读 · 0 评论 -
vue笔记记录(二)——发起请求
开发过程中和后台进行数据的交互,需要用到axios 1、安装axios和qs$ npm install axios -s //安装axios$ npm install qs -s //安装qs2、在main.js中引入import axios from 'axios'import qs fr...原创 2018-07-27 15:18:59 · 364 阅读 · 0 评论 -
vue笔记记录(一) —— 搭建项目
利用webpack脚手架搭建vue项目npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev至此,一个简单的vue项目就搭建好了。大致目录结构如下:.├── build/ # webpack config fi...原创 2018-07-18 15:53:16 · 197 阅读 · 0 评论 -
assets与static的区别
assets与static的区别 相同点:资源在html中使用,都是可以的。不同点:使用assets下面的资源,在js中使用的话,路径要经过webpack中file-loader编译,路径不能直接写。assets中的文件会经过webpack打包,重新编译,推荐该方式。而static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。简单来...转载 2018-07-17 09:22:58 · 416 阅读 · 0 评论 -
export,import ,export default分别是什么
首先要知道export,import ,export default是什么ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块。 也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都...转载 2018-03-15 13:02:47 · 434 阅读 · 0 评论