Vue学习笔记
记录Vue的学习笔记以及一些Vue的知识点
Summer⊙
这个作者很懒,什么都没留下…
展开
-
【vue】实现点击复制功能
vue实现点击复制功能原创 2022-11-30 16:22:20 · 1674 阅读 · 1 评论 -
【vue】获取系统当前日期
获取系统当前日期原创 2022-09-25 16:42:19 · 765 阅读 · 0 评论 -
【vue】在同一个vue项目中引入两个不同版本的echarts
在同一个vue项目中引入两个不同版本的echarts原创 2022-09-14 16:04:38 · 1393 阅读 · 0 评论 -
解决Access-Control-Allow-Credentials跨域问题
Access-Control-Allow-Credentials跨域问题原创 2022-08-10 15:32:06 · 3458 阅读 · 0 评论 -
【Vue】全局事件总线(EventBus)的使用
注册事件总线main.js使用接收销毁事件总线注意使用完最好要在beforeDestroy中销毁原创 2022-07-07 16:16:43 · 830 阅读 · 0 评论 -
type check failed for prop “property“. Expected String with value “0“, got Number with value 0.
type check failed for prop “property“. Expected String with value “0“, got Number with value 0.问题原因:数据类型不匹配,他要的是String类型,但数据是Number,就会报这个错原创 2022-06-24 15:49:23 · 1083 阅读 · 0 评论 -
【Vue学习笔记】 Vue默认插槽、具名插槽、作用域插槽
插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据插槽分为三种:默认插槽 具名插槽 作用域插槽1.默认插槽定义: 默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中简述: 将父组件的自定义html和data插入子组件的对应位置特点: 父组件决定结构和数据2.具名插槽定义: 具名插槽简单地说就是具有名字的插槽,只是默认插槽只有一个插入位置,具名插槽可以有多个插入位置,根据名字来识别对转载 2022-06-08 16:18:00 · 2911 阅读 · 0 评论 -
【Vue学习笔记】vue-cli配置代理服务器(devServer.proxy)解决跨域问题
这种方式只能配置一个,并且不能自由的决定请求是否经过代理服务器方式二(可配置多个)使用时如下:原创 2022-06-08 11:05:42 · 616 阅读 · 0 评论 -
【Vue学习笔记】vue实现呼吸灯效果
目录一.代码二.效果一.代码<!-- 呼吸效果 --> <div class="root"> <h2 :style="{opacity}">呼吸效果 </h2> </div>const vm = new Vue({ el: '.root', data() { return {原创 2022-04-06 17:47:13 · 2757 阅读 · 0 评论 -
【Vue学习笔记】过滤器(filter)格式化时间(时间戳)——用dayjs插件
目录一.实现效果二.去BootCDN下载dayjs插件三.引入dayjs四.代码实现四.总结五.参考一.实现效果二.去BootCDN下载dayjs插件链接: BootCDN链接: dayjs三.引入dayjs<script src="../js/dayjs.min.js"></script>四.代码实现<div class="root"> <div id="root"> <h2>显示格式原创 2022-03-25 17:13:23 · 2251 阅读 · 0 评论 -
【Vue学习笔记】获取表单数据——input、radio、checkbox、select、textarea
目录一.获取表单数据(案例)1.效果2.代码二.总结三.参考一.获取表单数据(案例)1.效果注意:这个案例只是简单的再前端输出获取的表单内容,并没有提交到后台2.代码<div class="root"> <form @submit.prevent="demo"> <!-- trim去掉首尾空格,中间的空格去不掉 --> 账号:<input type="text" v-model.trim原创 2022-03-25 16:05:22 · 2737 阅读 · 0 评论 -
【vue学习笔记】用监视属性watch和计算属性computed实现模糊查询以及排序
需要实现的功能:根据用户书的的内容显示相应的内容,模糊查询一.用监视属性watch写<!-- 模糊查询 --> <div class="root"> <input type="text" placeholder="请输入姓名" v-model="name"> <ul> <li v-for="(p, index) in filPerson" :key="person.id"> .原创 2022-03-18 14:55:28 · 1066 阅读 · 0 评论 -
学习笔记——Object.defineProperty()方法
一.基本用法Object.defineProperty()方法是给对象添加属性用的Object.defineProperty(object, propertyname, descriptor);其中三个参数分别是:object:对象propertyname:属性名descriptor:要添加的属性值let person = { name: '张三', sex: '男'}Object.defineProperty(person, 'age', { value: 18, //这个a原创 2022-02-22 15:02:18 · 3549 阅读 · 0 评论 -
Vue学习笔记——监视属性(watch)
目录一.监视属性watch1.案例——点击按钮切换天气2.总结二.深度监视1.监视多级结构中某个属性的变化2.监视多级结构中所有属性的变化2.深度监视总结一.监视属性watch类型:{ [key: string]: string | Function | Object | Array }详细:一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。1.案例——点击按钮切换天气&原创 2022-03-03 14:08:57 · 763 阅读 · 0 评论 -
Vue学习笔记——computed计算属性(用三种方法实现姓名的拼接,及其区别)
一.姓名案例效果1.姓名案例,用插值语法实现2.姓名案例,用methods实现3.姓名案例,用计算属性(computed)实现二.总结一.姓名案例效果需要实现的效果:输入姓和名,动态的显示全名修改前修改后1.姓名案例,用插值语法实现<div class="root"> 姓:<input type="text" v-model="firstName"><br> 名:<input type="text"原创 2022-03-02 16:09:23 · 1025 阅读 · 0 评论