- 博客(76)
- 收藏
- 关注
RSS订阅原创 事件绑定
<button v-on:click='num++'>点击</button><button @click='num++'>点击1</button>console.log(this === vm)$eventconsole.log(event.target.tagName)console.log(event.target.innerHTML)
2020-10-21 23:57:02
242
原创 双向数据绑定
1、2、<div v-once>{{info}}</div><div><input type="text" v-model='msg'></div>
2020-10-21 00:08:26
161
原创 数据绑定指令
<div v-text='msg'></div><div v-html='msg1'></div><div v-pre>{{msg}}</div>
2020-10-14 23:46:39
198
原创 指令v-cloak
1、<style type="text/css"> [v-cloak] { display: none; }</style>2、<div v-cloak>{{msg}}</div>
2020-10-14 21:54:24
119
原创 Vue入门
1、官网https://cn.vuejs.org/<script type="text/javascript" src="./js/vue.js"></script><script type="text/javascript"></script>
2020-10-13 00:08:47
86
原创 播放mv
<a href="javascript:;" v-if="item.mvid!=0">播放mv</a><video :src="mvUrl" controls="controls"></video>
2020-10-11 12:32:12
246
原创 播放动画
<audio :src="musicUrl" autoplay = "autoplay" controls = "controls" @play="play" @pause="pause"></audio><img :src="musicPic" alt="" :class="{playing:isPlaying}">
2020-10-11 09:49:44
93
原创 歌曲评论
<div> <dl v-for="item in hotComments"> <dt><img :src="item.user.avatarUrl" alt=""></dt> <dd>{{item.user.nickname}}</dd> <dd>{{item.content}}</dd> </dl></div>
2020-09-29 10:18:08
110
原创 音乐播放
<a href="javascript:;" @click="playMusic(item.id)">播放</a>console.log(response.data.data[0].url); ？？？
2020-09-28 17:46:06
252
原创 点击查询
<a href="javascript:;" @click="changeCity('北京')">北京</a>changeCity:function(city){ this.city = city; this.searchWeather();}
2020-09-26 16:52:16
1687
原创 回车查询
<script src="./js/demo.js"></script>axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city) .then(function(response){ console.log(response); console.log(response.data.data.forecast); }).catch(function(err){})
2020-09-26 10:13:22
127
原创 axios加vue
console.log(this.joke);var that = this;axios.get("https://autumnfish.cn/api/joke").then( function(response){ console.log(this.joke); console.log(response.data); that.joke = response.data; },function(err){ console.log(err); })
2020-09-24 22:54:32
96
原创 axios基本使用
1、<!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> document.querySelector(".get").onclick = function(){ axios.get("https://autumnfish.cn/api/joke/list?num=6") .then(function(
2020-09-23 23:59:15
1717
原创 记事本-隐藏
<div v-show="list.length != 0"></div><span v-if="list.length != 0">{{ list.length }} left</span><input type="button" value="清空" @click="clear" v-show="list.length != 0">
2020-09-23 00:17:00
189
原创 记事本-清空
1、<input type="button" value="清空" @click="clear">2、clear:function(){ this.list = [];}
2020-09-21 21:50:13
124
原创 记事本-删除
1、remove:function(index){ console.log("删除"); console.log(index); this.list.splice(index,1);}2、<button @click="remove(index)">删除</button>
2020-09-19 22:22:28
204
原创 记事本-新增
1、<input type="text" v-model="inputValue" @keyup.enter="add"><ul> <li v-for="(item,index) in list"> {{ index+1 }} {{ item }} </li></ul>2、list:["吃饭饭","睡觉觉","写代码"]add:function(){ this.list.push(this.input
2020-09-19 16:48:49
101
原创 v-on补充
1、<input type="button" value="点击" @click="doIt(666,'老铁')"><input type="text" @keyup.enter="sayHi">2、doIt:function(p1,p2){ console.log("做It"); console.log(p1); console.log(p2);}
2020-09-18 22:13:11
68
原创 v-for指令
1、<ul> <li v-for="(it,index) in arr"> {{ index+1 }}Vue Test:{{ it }} </li></ul><h2 v-for="item in vegetables" v-bind:title="item.name"> {{ item.name }}</h2>2、vegetables:[ {name:"西红柿"}, {name:"黄瓜"}]3、add
2020-09-17 23:40:34
153
原创 图片切换
1、data:{ imgArr:[ "./img/1.jpg", "./img/2.jpg", "./img/3.jpg" ], index:0}2 、<a href="javascript:void(0)" @click="prev" v-show="index != 0">上一张</a> <img :src="imgArr[index]" alt=""> <a href="javascript:voi
2020-09-16 23:47:10
139
原创 v-bind指令
1、<img v-bind:src="imgSrc" alt=""><br><img :src="imgSrc" alt="" :title="imgTitle + '!!!'" :class="isActive ? 'active' : ''" @click="toggleActive"><img :src="imgSrc" alt="" :title="imgTitle + '!!!'" :class="{active:isActive}" @click
2020-09-16 00:05:43
71
原创 v-if指令
1、toggleIsShow:function(){ this.isShow = !this.isShow;}2、 <p v-if="isShow">Vue 测试</p>
2020-09-14 23:00:28
297
原创 v-show指令
1、<input type="button" value="切换显示状态" @click="changeIsShow"><img v-show="isShow" src="./img/1.jpg" alt="">2、data:{ isShow:false},methods:{ changeIsShow:function(){ this.isShow = !this.isShow; }}
2020-09-13 23:07:15
233
原创 计数器
1、<button @click="sub"> -</button><span>{{ num }}</span><button @click="add"> +</button>methods:{ add:function(){ console.log("add"); if(this.num<10){ this.num++; }else{ alert("别点了，最大啦!!!"); }
2020-09-13 16:45:22
95
原创 v-on指令
1、data:{ food:"西红柿炒鸡蛋"},methods:{ demo:function(){ alert("Vue测试！！！"); }, changeFood:function(){ console.log(this.food); this.food+="好好吃!"; }}<input type="button" value="v-on指令" v-on:click="demo"><input type="button" value="v-on简写
2020-09-13 11:23:37
129
原创 v-html指令
1、content:"Vue 测试！！！"2、<p v-html="content"></p>3、content:"<a href='https://www.baidu.com/'>Vue 测试！！！</a>"
2020-09-12 21:33:53
330
1
原创 data数据对象
1、person:{ name:"张三", age:18},city:["石家庄","保定","邢台","邯郸"]2、<h2> {{person.name}} {{person.age}}</h2>3、<ul> <li>{{city[0]}}</li> <li>{{city[3]}}</li></ul>
2020-09-12 09:39:47
226
原创 el挂载点
<div class = "app"> {{ message }} <span> {{message}} </span></div>el:".app"el:"div"
2020-09-11 22:51:29
130
原创 第一个Vue程序
1、https://cn.vuejs.org/2、<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>3、<div id="app"> {{ message }}</div><script> var app = new Vue({ el:"#app", data:{
2020-09-10 22:09:23
129
原创 SpringBoot中创建交换器、队列和绑定关系
@AutowiredAmqpAdmin amqpAdmin;@Testpublic void test(){ amqpAdmin.declareExchange(new DirectExchange("demo.exchange")); amqpAdmin.declareQueue(new Queue("demo.queue",true)); amqpAdmin.declareBinding(new Binding("demo.queue",Binding.DestinationType.QUE
2020-08-26 21:47:12
545
1
原创 SpringBoot中使用RabbiMQ
1、@Servicepublic class BookService { @RabbitListener(queues = "aaa.demo") public void receive (Book book){ System.out.println("收到消息:" + book); }}2、@EnableRabbit3、@RabbitListener(queues = "aaa")public void receive(Message message){ System.ou
2020-08-24 23:22:58
103
原创 SpringBoot整合RabbitMQ
1、2、spring.rabbitmq.host=192.168.124.15spring.rabbitmq.username=guestspring.rabbitmq.password=guest3、@AutowiredRabbitTemplate rabbitTemplate;@Testpublic void contextLoads() { Map<String,Object> map = new HashMap<>(); map.put("msg",
2020-08-23 17:45:59
199
原创 SpringBoot中使用定时任务
1、@Servicepublic class ScheduledService { //second, minute, hour, day of month, month, and day of week. @Scheduled(cron = "0 * * * * MON-SAT") public void test(){ System.out.println("test..."); }}2、@EnableScheduling //开启基于注解的定时任务@SpringBootApp
2020-08-08 21:17:07
144
原创 SpringBoot中异步任务的使用
1、@Servicepublic class AsyncService { @Async //这是一个异步方法 public void test(){ try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } System.out.println("数据处理中。。。"); }}2、@RestControllerpublic class AsyncCo
2020-08-08 09:52:27
149
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人