Vue 基础

本文介绍了Vue框架的基本使用,包括数据绑定、DOM操作、指令如v-model、v-for,以及结合axios进行网络请求的实战案例。通过创建小黑记事本应用展示了Vue的组件化和事件处理能力。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue简介:

①: javaScript框架  ②: 简化Dom操作 ③: 响应式数据驱动

写vue 首先引入vue的jar包

<script type="text/javascript" src="js/vue.js"></script>
el:挂载点:

data:数据对象:

methods:事件

Vue指令:

V-text:设置标签的文本值(textContent)

v-html:设置标签的innerHTML

v-on:为元素绑定事件

v-show:根据表达值的真假,切换元素的显示和隐藏

v-if:根据表达值的真假,切换元素的显示和隐藏

v-bind:设置元素的属性(比如:src,title,class)

v-for:根据数据生成列表结构

v-on补充:传递自定义参数,事件修饰符

v-model:获取和设置表单元素的值(双向数据绑定)

案例:小黑记事本:

显示:

<li class="todo" v-for="(item,index) in arr"> // 为一组数组
<span class="index">{{index+1}}</span> <label>{{item}}</label> //每添加一条下面数据会增加

添加为:

@keyup.enter="enterWord" //为 enter键 为确认
enterWord(){
  this.arr.push(this.content);
},

删除为:

<button class="destroy" @click="del(index)"></button>  //相当于删除按钮
del(i){
  this.arr.splice(i,1);
},

统计和清空:

<!-- 统计和清空 -->
<footer class="footer" v-if="arr.length>0">
  <span class="todo-count"> <strong>{{arr.length}}</strong> 条数据 </span> //自动增加时
  <button class="clear-completed" @click="clear">
    Clear
  </button>
</footer>
清空代码:

clear(){
    this.arr=[];
  }
}

axios:功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

下载到本地后可以改为<script src="js/axios.min.js"></script> 

随机获取 笑话以及检查名字是否被注册

测试:

应用:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/tianindex.css" />
  </head>

  <body>
    <div class="wrap" id="app">
      <div class="search_form">
        <div class="logo"><img src="img/logo.png" alt="logo" /></div>
        <div class="form_group">
          <input
            type="text"
            class="input_txt"
            placeholder="请输入查询的天气"
            v-model="content"
            @keyup.enter="getTQ"
          />
          <button class="input_sub" @click="getTQ">搜 索</button>
        </div>
        <div class="hotkey">
          <a href="javascript:;" @click="getTQ('北京')">北京</a>
          <a href="javascript:;" @click="getTQ('上海')">上海</a>
          <a href="javascript:;" @click="getTQ('广州')">广州</a>
          <a href="javascript:;" @click="getTQ('深圳')">深圳</a>
        </div>
      </div>
      <ul class="weather_list">
        <li v-for="item in arr">
          <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
          <div class="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date"><span>{{item.date}}</span></div>
        </li>
      </ul>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script type="application/javascript" src="js/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script type="application/javascript" src="js/axios.min.js"></script>
    <!-- 自己的js -->
  <script>
    var aaa=new Vue({
      el:"#app",
      data:{
            content:"",
          arr:[],
      },
      methods:{
        getTQ(city){
          var that=this;
          axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.content).then(function(result) {
            console.log(result);
            that.arr=result.data.data.forecast;
          })
          axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(function(result) {
            console.log(result);
            that.arr=result.data.data.forecast;
          })
        }
      }

    })
  </script>
  </body>
</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>悦听player</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/playerIndex.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper'>
          <ul class="song_list">
           <li v-for="song in songs"><a href="javascript:;" @click="player(song.id)"></a> <b>{{song.name}}</b> <span v-show="song.mvid!=0"><i @click="playMv(song.mvid)"></i></span></li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlaying}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="picUrl" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="comment in comments">
              <dt><img :src="comment.user.avatarUrl"  alt=""></dt>
              <dd class="name">{{comment.user.nickname}}</dd>
              <dd class="detail">
                {{comment.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio'  v-bind:src="songUrl" controls autoplay loop class="myaudio" @play="isPlaying=true" @pause="isPlaying=false"></audio>
      </div>
      <div class="video_con" v-show="isShowMv">
        <video  controls="controls" :src="mvUrl"></video>
        <div class="mask" ></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="js/axios.min.js"></script>

</body>
<script>
    var app=new Vue({
      el:"#player",
      data:{
        query:"",
        songs:[],
        songUrl:"",
        //评论
        comments:[],
        //mv路径
        mvUrl:"",
        //开启mv
        isShowMv:false,
        //动画
        picUrl:"",
        //动画转动 默认关闭
        isPlaying:false,
      },
      methods:{
        //搜索
        searchMusic(){
          var that=this;

          axios.get(`https://autumnfish.cn/search?keywords=${this.query}`).then(function (result) {
          that.songs=result.data.result.songs;
          console.log(that.songs)
          })
        },
        //播放
        player(id){
          var that=this;
          this.isPlaying=true;
          axios.get(`https://autumnfish.cn/song/url?id=${id}`).then(function (result) {
                that.songUrl=result.data.data[0].url;
          })
          axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${id}`).then(function (result) {
           that.comments=result.data.hotComments;
          })
          axios.get(`https://autumnfish.cn/song/detail?ids=${id}`).then(function (result) {
            console.log(result)
            that.picUrl=result.data.songs[0].al.picUrl;
          })
        },
        //播放MV
        playMv(mid){
          var that=this;
          axios.get(`https://autumnfish.cn/mv/url?id=${mid}`).then(function (result) {
            that.isShowMv=true;
            that.mvUrl=result.data.data.url;
          })
        },
      }
    })
</script>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值