![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
一名写前端的GISer
这个作者很懒,什么都没留下…
展开
-
vue3中兄弟组件间传递
3、父组件parent.vue将数据传递给子组件child1。1、兄弟组件child2将数据传递给父组件parent。问题:同一个父组件中的兄弟组件间通信。2、父组件parent接收传递的数据。(1)兄弟组件1将数据传递给父组件。(2)父组件将数据传递给兄弟组件2。4、子组件child1接收数据。父组件parent.vue。parent.vue中代码。原创 2024-03-25 15:15:53 · 332 阅读 · 0 评论 -
vue中动态生成li,并且选中的li动态改变背景色
【代码】vue中动态生成li,并且选中的li动态改变背景色。原创 2023-12-26 10:07:38 · 7078 阅读 · 1 评论 -
找不到 "babel-runtime/regenerator'' 如何解决
转自:https://www.zhihu.com/question/373994430转载 2020-03-18 22:11:07 · 3676 阅读 · 0 评论 -
Vue计算属性computed之get、set
1、需求当 姓 或者 名 的改变时,姓名 改变;当 姓名 改变时,姓 或者 名 改变;注:姓名框中,姓和名之间用空格隔开2、代码实现 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&a转载 2018-11-26 21:38:11 · 275 阅读 · 0 评论 -
Vue基础语法之class、style绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_class与style绑定</title> <style> .classA { color: r转载 2018-11-27 11:17:07 · 160 阅读 · 0 评论 -
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符(如@keyup.enter)
1、绑定监听@click:(以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')"&转载 2018-11-27 23:15:07 · 162027 阅读 · 1 评论 -
Vue基础语法之使用v-model绑定表单元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08_表单输入绑定</title></head><body><!--1. 使转载 2018-11-27 23:47:24 · 1406 阅读 · 0 评论 -
vue基础--通过$emit 实现组件间通信
通过$emit 实现子组件向父组件通信官网定义:vm.$emit( event, arg )解释:子组件中通过$emit 绑定一个自定义事件event(formSubmit1),当这个这个语句被执行到的时候,就会将参数arg(textToTranslate)传递给父组件,父组件通过@event(@formSubmit1)监听并接收参数(textToTranslate)父组件:App.v...转载 2019-01-07 10:30:11 · 848 阅读 · 0 评论 -
Vuex入门
转自:https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc...mapState的用法见https://www.imooc.com/article/22673?block_id=tuijian_wz转载 2019-04-15 16:14:04 · 112 阅读 · 0 评论 -
mapState,...mapState对象展开符简述
当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了。我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性。 mapState 的作用就是帮我们把一个对象或数组里的值转化成计算属性的写法。将传入的数组或对象转成 computed 计算属性能够识别的代码。例子1:mapState的一种使用方式及它的实际代码效果例子2...转载 2019-04-18 15:08:51 · 10283 阅读 · 0 评论 -
Vue基础之内置指令ref、v-cloak
1、内置指令(ref、v-cloak)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak]转载 2018-11-29 21:46:26 · 451 阅读 · 0 评论 -
Vue基础--生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue--生命周期</title></head><body><!--1. v转载 2018-11-28 21:05:35 · 269 阅读 · 0 评论 -
vue一般组件的使用
1、引入组件2、映射成标签3、使用组件标签原创 2018-11-14 10:29:44 · 168 阅读 · 0 评论 -
.vue文件
//在<template/>标签下只能有一个子节点元素,如果写多个如<div/>这样的标签则会报错 <template> <div> //(3)--使用标签 <FooterGuide></FooterGuide> </div></template&am原创 2018-11-12 15:57:51 · 375 阅读 · 0 评论 -
Vue组件间通信1--props
1、App.vue组件中的comments传递给子组件List.vue(1)父组件App.vue(2)子组件List.vue2、List.vue组件中的 comment 传递给子组件Item.vue (1)父组件List.vue(2)子组件Item.vue效果图:上面的是组件间传递值,方法传递也类似 ...原创 2018-11-14 15:13:12 · 192 阅读 · 0 评论 -
vue2.0 v-for中 :key 的作用
提高循环性能,其实这个东西写不写都行,就算你写错了他也不会报错,但是一般写for循环写上比较好。key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。 转自:htt...转载 2018-11-14 15:31:24 · 221 阅读 · 0 评论 -
Vue计算属性computed
转自:https://www.cnblogs.com/chaixiaozhi/p/8688820.html转载 2018-11-16 09:37:45 · 94 阅读 · 0 评论 -
VueJS样式绑定之内联样式v-bind:style
转自:https://www.cnblogs.com/boonya/p/7092710.html转载 2018-11-15 11:48:25 · 1253 阅读 · 0 评论 -
Vue组件间通信2--Vue自定义事件
自定义事件方式一(常用)1、给TodoHeader标签对象绑定addTodo事件监听2、触发自定义事件:addTodo 自定义事件方式二1、给<TodoHeader>绑定addTodo事件监听2、触发自定义事件:addTodo ...原创 2018-11-22 09:11:09 · 595 阅读 · 0 评论 -
Vue组件间通信4--消息订阅与发布
安装pubsub-jsnpm install pubsub-js --save优点:可以进行任意组件间的信息传递。1、发布消息 PubSub.publish('msg', data)下面的例子中,msg为‘type’ , data为communicateType2、订阅消息PubSub.subscribe('msg', function(msg, data){})...原创 2018-11-23 20:56:08 · 1432 阅读 · 1 评论 -
Vue组件间通信3--slot插槽
1、在TodoFooter组件中写出插槽slot的位置和name2、在App组件中,通过slot 与name的值关联,确定插槽处插入的标签原创 2018-11-22 14:43:48 · 1052 阅读 · 0 评论 -
axios的基本使用
1、下载npm install axios --save2、使用原创 2018-11-22 16:03:44 · 230 阅读 · 0 评论 -
Node.js和vue-cli构建vueJS基础项目
1、安装nodejs2、安装vue-cli脚手架工具 npm install vue-li –g安装完成之后,执行vue-V(大写V),如下图表示安装成功3、在D盘下创建文件vueworks4、利用webpack初始化项目在vueworks路径下,使用 vue init webpack my-vue 命令创建名叫 my-vue 的项目(注意:my-...转载 2018-11-02 16:26:10 · 861 阅读 · 0 评论