Vue-基础
alo_ne
这个作者很懒,什么都没留下…
展开
-
a对象-b对象的值
var aaa = [ { "1": { "value": 552 }, "key": "教学科研", "doc_count": 552 }, { "1": { "value": 167 }, "key": "党政管理", "doc_count": 167 }, { "1": { "value": 65 ..原创 2021-07-26 15:25:29 · 87 阅读 · 0 评论 -
vue--组件库
1、滚动消息提示cnpm install vue-seamless-scroll --save2、lcd计数牌npm i v-odometer原创 2021-07-20 16:53:30 · 200 阅读 · 0 评论 -
vue父组件异步获取动态数据传递给子组件 获取不到值的问题已完美解决
前几天遇到一个问题,在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的,问题找到了,怎么解决那?有两种方法解决,请看下面代码。方法一<template> <div class="list"> <ul v-if="list.length != 0"> <li v-fo原创 2021-07-20 16:16:44 · 4763 阅读 · 2 评论 -
vue 中使用Odometer
<template> <div> <IOdometer class="iOdometer" :value="num" format="(ddd).dd" /> </div></template><script>import IOdometer from "vue-odometer";import "odometer/themes/odometer-theme-default.css";export defau原创 2021-07-19 14:06:37 · 983 阅读 · 0 评论 -
vue中 显示默认图片
element组件<el-image :src="imgPath" style="width: 380px; height: 240px"> <div slot="error"> <img src="/course/img/defaultIamge.png" style="width: 380px; height: 240px" /> </div></el原创 2021-04-09 17:28:23 · 982 阅读 · 0 评论 -
vue--中更换背景图
data(){returen{url:require("../img/pic.png")}},methods:{doucment.getElementById("pic").style.background = "url("+this.url+")"}原创 2021-04-08 17:40:02 · 407 阅读 · 0 评论 -
vue--标签中使用三元运算符
<span :class="`${s2?'s2':'step2}`"></span>原创 2020-12-29 11:54:08 · 14312 阅读 · 0 评论 -
vue父组件向子组件传值(事件)
vm.on(event,callback):监听当前实例上的自定义事件。事件可以由vm.on( event, callback ):监听当前实例上的自定义事件。事件可以由vm.on(event,callback):监听当前实例上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$emit( event, […args] ):触发当前实例上的事件。附加参数都会传给监听器回调。父组件中:<template> <div>原创 2020-09-10 16:36:07 · 866 阅读 · 0 评论 -
vue中图表智适应
在myChart.setOption后添加window.onresize = myChart.resize;如果有多个图形,可以封装成方法:mounted(){ this.changEcharts(); }, methods:{ changEcharts() { window.addEventListener('resize', ()=> { this.drawLineDom.resize(); this.todayFlowDom.resize(); this.hitRateD原创 2020-08-31 17:39:31 · 86 阅读 · 0 评论 -
websocket
let websocket = null; if ('WebSocket' in window) websocket = new WebSocket(api.sweiper) if ('WebSocket' in window) websocket = new WebSocket('ws://192.168.10.129:8081/imserver/100') else console.log("您的浏览器不支持WebSocket"); ...原创 2020-08-10 15:08:37 · 74 阅读 · 0 评论 -
vue清除控制台
在 vue.config.js 中的 configureWebpack 选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置,vue.config.js配置如下:configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.warn原创 2020-08-10 11:40:34 · 800 阅读 · 0 评论 -
Vue打包成dist文件后修改ip地址方法
为了方便把代码发给别人去部署 所以需要进行修改相应 的ip地址此时就需要给出配置接口去修改步骤一:在public中创建一个config.js文件之后引入所有可能改变的代码 放在windows下步骤二:在index.html中引入script标签引入步骤三:可以直接使用了特别提醒:如果是放在dom中直接使用不可以直接这么写需要在脚本中引用...原创 2020-08-04 12:01:20 · 4509 阅读 · 1 评论 -
Vue-深度选择器
在使用vue的时候,为了避免组件之间相互影响,可以在样式中加入一个css样式。但是这样的直接坏处是父组件的样式不会渗透到子组件中去。vue提供了深度作用选择器可以解决这个问题:<template> <div class="aa"> <a-breadcrumb> <a-breadcrumb-item>首页</a-breadcrumb-item> </a-breadcrumb> <a-.原创 2020-07-19 09:41:02 · 749 阅读 · 0 评论 -
Vue-vuex仓库的使用
vuex可以使同级的组件实现共享数据共享,是一个数据管理仓库 具体可以参考vuex文档使用vuex首先需要引入: //安装包cnpm i vuex //引入vueximport Vuex from "vuex" //使用Vue.use(Vuex) //创建实例const store = new Vuex.Store({ state: { //数据 类似于data age: 10, firstName: 'zhang', lastNam原创 2020-06-18 21:39:52 · 980 阅读 · 0 评论 -
Vue-脚手架中router(路由)的基本用法
在谈路由之前的的确保了解Vue组件以及脚手架。在谈路由之前先简单介绍一下脚手架的安装。因为使用路由的用脚手架npm install -g @vue/cli当然npm是国外的安装比较慢,这可以采用淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org之后就可以采用淘宝镜像安装了cnpm i -g @vue/cli查看版本 vue -V之后创建一个案例vue create demo1运行 npm r原创 2020-06-18 16:50:58 · 2115 阅读 · 0 评论 -
Vue-过滤器、计算属性、监听器
一、过滤器vue支持在{{}} 中添加一个“|” 对书籍进行过滤,经常用在格式化文本:如字母的大写、货币的添加等。定义方法:过滤器是通过vue实例来添加filters来设置,可以是全局的,也可以局部因为过滤器本身是js函数,所以也可以传参数’。具体示例如下: <h1>{{name |setname('同学')}}</h1> //‘同学是参数’ filters: { setname(val, arg1) {原创 2020-06-15 19:23:57 · 192 阅读 · 0 评论 -
Vue-生命周期函数
一、生命周期:指的是实例对象从构造函数开始执行到被GC(垃圾回收)回收销毁的整个存在时期。生命周期函数也叫钩子函数。二、用途:vue实例从创建到销毁有不同的时期,可以利用不同时期的钩子函数去完成不停的操作。三、示意图最常用的是created:主要用来初始化data 这样不需要在页面中渲染同时也能ajax请求以及mounted:用来初始化dom和加载echarts。...原创 2020-06-14 21:23:04 · 138 阅读 · 0 评论 -
Vue-Vue常用指令
1、v-if指令根据条件的真假,确定是否在页面显示当前元素。 <h1 v-if='true'>8888888888888</h1>2、v-show指令根据条件的真假,确定是否在页面显示当前元素。和1的区别是 show已经渲染在页面 它改变的是display的值;而if则是没有在页面显示。如果某个标签反复出现消失,则使用show比较好,这样的好处是可以优化页面,减少卡顿。 if可以用在比如B站上面的头像登录显示 <h1 v-show='true'&原创 2020-06-09 12:02:38 · 181 阅读 · 0 评论