vue
关注
分享
扫一扫
258258ch
前端学习小白
展开
-
Vue组件间的通信(一）
（一）props的传送与接收（用于父组件给子组件传递数据）子传父：案例：子：MyList父：App在app中定义addtodo方法，如果想让Mylheader中的数据或者方法传送到app中，则在Myheader标签上添加：addtodo=“addtodo” 在Myheader.vue中声明接收props：【addtodo】使用时则在Mylist定义的方法中调用对应的方法和参数this.addtodo(参数）如果是子传爷爷，则子先传父，父接收声明，父..原创 2022-02-23 22:02:04 · 95 阅读 · 0 评论 -
用Vue制作简易音乐播放器
body,ul,dl,dd { margin: 0px; padding: 0px;}.wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url("images/bg.jpg") no-repeat; background-size: 100% 100%;}.play_wrap { width: 800px; height: 544px.原创 2021-08-03 20:46:37 · 823 阅读 · 4 评论 -
利用axios和vue实现查询天气的功能
利用axios网络数据实现查询天气功能，具体思路如下：（1）利用v-on.enter实现按下回车；（2）然后利用axios接口和v-model查询数据；（3）v-for数组实现数据渲染；这里参数为city，接口地址为：http://wthrcdn.etouch.cn/weather.min; 用get获取数据。实现效果如下：代码如下：css部分：body{ font-family: "Microsoft YaHei";}.wrap{...原创 2021-08-01 22:05:22 · 673 阅读 · 0 评论 -
用Vue实现考研记事本
实现效果如下：可进行删除和增加操作。（删除政治）设计思路如下：（1）记事本主要由输入框、列表组成；（2）利用v-mode获取和设置表单的值；（3）同时在div中添加按钮绑定事件；（4）用v-for根据数据实现列表结构；（5）根据索引index进行删除操作。代码如下：html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2021-08-01 08:38:43 · 195 阅读 · 0 评论 -
利用Vue完成图片交换
实现效果如下：点击左侧或者右侧按钮，切换图片。设计思路如下：（1）定义图片数组；（2）添加图片索引index，从0开始；（3）利用@click实现src属性绑定；（4）图片切换逻辑：当左侧索引不为0时，左侧按钮可以实现切换；当右侧索引小于图片索引长度时，右侧按钮可以实现右侧切换。（5）图片显示。当左侧按钮可以点击时，显示对应图片，并且左侧按钮实现索引index--；右侧则相反。CSS代码如下：* { margin: 0; padding.原创 2021-07-31 00:19:24 · 922 阅读 · 2 评论