Vue
国际庄
这个作者很懒,什么都没留下…
展开
-
事件绑定
<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 · 200 阅读 · 0 评论 -
双向数据绑定
1、2、<div v-once>{{info}}</div><div><input type="text" v-model='msg'></div>原创 2020-10-21 00:08:26 · 120 阅读 · 0 评论 -
数据绑定指令
<div v-text='msg'></div><div v-html='msg1'></div><div v-pre>{{msg}}</div>原创 2020-10-14 23:46:39 · 149 阅读 · 0 评论 -
指令v-cloak
1、<style type="text/css"> [v-cloak] { display: none; }</style>2、<div v-cloak>{{msg}}</div>原创 2020-10-14 21:54:24 · 87 阅读 · 0 评论 -
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 · 60 阅读 · 0 评论 -
播放mv
<a href="javascript:;" v-if="item.mvid!=0">播放mv</a><video :src="mvUrl" controls="controls"></video>原创 2020-10-11 12:32:12 · 200 阅读 · 0 评论 -
播放动画
<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 · 62 阅读 · 0 评论 -
歌曲评论
<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 · 81 阅读 · 0 评论 -
歌曲封面
<img :src="musicPic" alt="">原创 2020-09-28 23:07:02 · 102 阅读 · 0 评论 -
音乐播放
<a href="javascript:;" @click="playMusic(item.id)">播放</a>console.log(response.data.data[0].url); ???原创 2020-09-28 17:46:06 · 202 阅读 · 0 评论 -
点击查询
<a href="javascript:;" @click="changeCity('北京')">北京</a>changeCity:function(city){ this.city = city; this.searchWeather();}原创 2020-09-26 16:52:16 · 1630 阅读 · 0 评论 -
回车查询
<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 · 94 阅读 · 0 评论 -
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 · 62 阅读 · 0 评论 -
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 · 1669 阅读 · 0 评论 -
记事本-隐藏
<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 · 127 阅读 · 0 评论 -
记事本-清空
1、<input type="button" value="清空" @click="clear">2、clear:function(){ this.list = [];}原创 2020-09-21 21:50:13 · 87 阅读 · 0 评论 -
记事本-统计
<span>{{ list.length }} left</span>原创 2020-09-20 11:21:53 · 68 阅读 · 0 评论 -
记事本-删除
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 · 165 阅读 · 0 评论 -
记事本-新增
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 · 74 阅读 · 0 评论 -
v-model指令
<input type="text" v-model="message" @keyup.enter="getM">原创 2020-09-19 10:52:49 · 112 阅读 · 0 评论 -
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 · 50 阅读 · 0 评论 -
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 · 109 阅读 · 0 评论 -
图片切换
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 · 120 阅读 · 0 评论 -
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 · 48 阅读 · 0 评论 -
v-if指令
1、toggleIsShow:function(){ this.isShow = !this.isShow;}2、 <p v-if="isShow">Vue 测试</p>原创 2020-09-14 23:00:28 · 267 阅读 · 0 评论 -
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 · 196 阅读 · 0 评论 -
计数器
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 · 69 阅读 · 0 评论 -
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 · 105 阅读 · 0 评论 -
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 · 278 阅读 · 1 评论 -
v-text指令
<h2 v-text="message+'*'">北京</h2><h2>{{ message +'*'}}北京</h2>原创 2020-09-12 11:55:27 · 229 阅读 · 0 评论 -
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 · 194 阅读 · 0 评论 -
el挂载点
<div class = "app"> {{ message }} <span> {{message}} </span></div>el:".app"el:"div"原创 2020-09-11 22:51:29 · 100 阅读 · 0 评论 -
第一个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 · 104 阅读 · 0 评论 -
Vue.js开发工具
VSCode + Live Server原创 2020-09-09 22:15:44 · 178 阅读 · 0 评论