vue框架
半夏的前端笔记
这个作者很懒,什么都没留下…
展开
-
canvas画表格
data数据格式:[{“num”:388,“dfname”:“砼”,“zdmj”:156679.44,“jzmj”:5197303.22}, {“num”:24,“dfname”:“混”,“zdmj”:12888.83,“jzmj”:428493.83}]drawCanvasTable(data) { let canvas = document.querySelector("#canv"); let ctx = canvas.getContext("2.原创 2022-02-14 10:09:11 · 3897 阅读 · 4 评论 -
为什么elementui的表格点击click事件会执行两次
点击下图表格中的多选框列时候,会连续点击两次。解决方法:@click.native.prevent 阻止默认事件<el-table-column width="55"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.unshow" @click.native.prevent="clickCheckBox(scope.$index,scope.row.unshow)"&原创 2021-07-22 16:25:35 · 3236 阅读 · 1 评论 -
Vue中出现”xxxx“ is defined but never used
解决方法:在package.json或者.eslintrc.js中找到 eslintConfig 块,在其rules下加入"no-unused-vars": "off"即可"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules原创 2021-06-04 16:25:47 · 789 阅读 · 0 评论 -
elementui表格出现不对齐(错位)的现象
解决方案:每次更新表格数据的时候 调用doLayout()方法执行完这一步的时候,表格还是不对齐。调试表格的td元素的height和padding属性。调完之后,就正常了。原创 2021-03-10 09:34:35 · 4480 阅读 · 0 评论 -
‘xxxx‘ is defined but never used (no-unused-vars)报错
如图:红框框起来的是我引入了一个组件,然后就出现了图二的报错。解决办法: 创建一个名为 .eslintrc.js 的文件,如图,然后关闭项目,再次重启项目就可以了..eslintrc.js的文件内容如下:module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', 'eslint:recommended'原创 2021-01-25 14:42:27 · 446 阅读 · 0 评论 -
echarts的柱状图的柱条颜色设置
话不多说,上效果图代码如下:<template> <div class="bar" ref="bar" style="width:100%;height:100%"></div></template><script>export default { data() { return {}; }, props:['data'], mounted(){ this.$nextTick(()=>{原创 2021-01-25 14:21:38 · 2286 阅读 · 0 评论 -
vue使用scss
注意:这里用的是vue-cli@3.x创建的项目,至于vue-cli@2.x创建的项目并不适用该文章写的方法。1.使用vue-cli@3.x创建项目vue create demo2.安装scss相关的包npm install -S node-sass sass-loader3.安装完成之后,你就可以写scss语法了,只需要在组件中的style标签加上lang属性:< style lang=“scss” scoped >。4.第三步可能会遇到报错,这个时候你只需要终止项目运行,然后再原创 2021-01-25 10:09:46 · 560 阅读 · 0 评论 -
vue使用echarts
安装echarts模块npm install echarts -S或者使用淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S引入echarts在main.js中// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts draw() { // 绘制图表。原创 2021-01-12 10:18:44 · 424 阅读 · 0 评论 -
vue中img的src动态绑定路由问题
给img的src绑定路由,不能直接使用相对路径,需要使用requireconst HomeIcon = [ { id:1, text:"c", icon: require("../images/home/icon1.png") }, { id:2, text:"java", icon: require("../images/home/icon2.png") }, {原创 2020-06-18 11:08:29 · 750 阅读 · 0 评论 -
前端路由router原理
现如今,前端可以实现无须刷新页面的情况下显示新的应用状态。有两种模式可以实现:hash模式、history模式。hash模式hash模式,只能通过window.location.hash改变#后面的值,可以通过window.onhashchange来监听hash值的变化来显示对应的应用状态。有一点值得注意的是:假设你访问的是www.example.com/#/123,无论hash值怎么变化,后...原创 2020-04-29 11:04:12 · 215 阅读 · 0 评论 -
router和route
route的用法<router-link :to="{name:'newsDetail',query:{id:item.id,title:'newsList'}}"> <div> <i> <img :src="item.picUrl" alt="" width="100%" height="1...原创 2020-04-26 11:41:54 · 743 阅读 · 0 评论 -
vue使用less
安装命令:cnpm i less less-loader -S配置更改配置文件build/webpack.base.conf.js在module.export暴露的对象中,为module的rules添加如下配置:{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",}使用在style标签上添加...转载 2020-04-26 11:05:16 · 1064 阅读 · 0 评论 -
vue请求方式
axioscd democnpm i axios -S在main.js中引入axios//axios请求数据import Axios from 'axios'Axios.defaults.baseURL = 'http://tanzhouweb.com/vueProject123/'//配置请求头,非常重要,有了这个才可以正常使用POST等请求后台数据Axios.defaults...原创 2020-04-25 21:46:51 · 240 阅读 · 0 评论 -
vue项目搭建
会用到vue全家桶 vue vue-cli axios vue-router vue-vueX vue-cli 脚手架 一个基于vue的构建工具 搭建vue项目的环境 好处 兼容 方便 快速 完成遵循前后端分离 前端只做前端的事情 和后端没关系 vue开发...原创 2020-04-13 22:57:49 · 126 阅读 · 0 评论