Vue
啊啊怪
这个作者很懒,什么都没留下…
展开
-
双向绑定
双向绑定当我们的数据发生变化之后,我们的视图会同步的更新;当我们的视图更新,我们的数据也会同步的更新在Vue中,我们是通过v-model来实现双向绑定,v-model毕竟只是一种语法糖,不用v-model我们也可以实现它的功能,参考以下链接理解v-model<template> <div id="App"> //双向绑定 <input type="text" v-model="message"> //单向数据流 <input原创 2021-04-18 16:15:36 · 180 阅读 · 0 评论 -
Vue请求后端接口导出excel表格
项目中遇到一个需求,用户下载文件,会从后端那里请求接口获得数据并下载导出excel表格后端小哥给我返回的是二进制数据流,需要前端自己去处理这些数据如下图,请求接口返回的数据都是乱码这里我们可以在axios的请求里添加,这样返回的二进制数据就会被读取为Blob的数据,responseType: ‘blob’fetchGet1(url, params) { return axios({ url, method: 'get', params,原创 2021-03-16 23:19:32 · 3229 阅读 · 1 评论 -
用Vue实现动态全选按钮功能
使用了计算属性computed的特点来实现动态全选按钮的功能,代码如下<template> <div class="box"> <div class="allselect" @click="allSelect()"> <img :src="isAllSelect ? selectUrl : notSelectUrl" alt="" /> <div>全选</div> </div>原创 2021-01-21 23:30:50 · 709 阅读 · 1 评论 -
当为Vue中的data赋值computed计算属性后,出现undefined的原因
今天遇到一个问题,当我给data数据初始化一个computed计算属性时,在页面上竟然没有显示,放代码<template> <div class="container"> <div>num1:{{num1}}</div> <div>num2:{{num2}}</div> <div>data中的数据{{sum}}</div> </div></template&g原创 2021-01-19 23:03:03 · 8195 阅读 · 3 评论 -
理解在vue自定义组件中使用v-model
今天在看视频的时候,看到有人将一个input封装成一个自定义组件,然后他写的代码是这样的//父组件<k-input v-model="model.username"></k-input>//子组件<input type="text" :value="inputValue" @input="onInput">//子组件export default { data () { return { }; }, props:{ inp原创 2020-12-31 15:47:20 · 227 阅读 · 0 评论 -
Vue组件通信:子传父的简易理解
子传父最常用的方法是使用$emit父组件<template> <div id="App"> <div>父组件</div> <child @childClick="parentClick"></child> <div>{{parentMessage}}</div> </div></template><script>import Chi原创 2020-12-07 22:46:05 · 365 阅读 · 0 评论 -
如何用原生JS代码实现v-model功能
原生JS代码<input type="text" id="username" value=""><h1></h1><script> let inputDom=document.querySelector("#username") inputDom.oninput=function(){ document.querySelector("h1").innerHTML=inputDom.value }</script>原创 2020-12-02 16:14:26 · 1325 阅读 · 0 评论 -
Vue组件通信:父传子的简易理解
在Vue的组件中,数据总会在父子组件中来回传递,今天来简单理解一下Vue组件的父传子通信在这里我使用了三个组件,层层调用//Detail.vue GoodList的父组件<template> <!--recommends是Detail.vue中通过向服务器发送请求传来的数据--> <goods-list :goods="recommends"></goods-list></template>//GoodList.vue原创 2020-12-02 12:12:57 · 243 阅读 · 0 评论