Code is cheap，show me the code！

快速了解Vue

大四即将开始了，我还没拿到offer，害！不想了，与其感慨路难行，不如马上出发。

快速入门vue

1、 Vue基础

1.1 Vue简介

① JavaScript框架

② 简化DOM操作

③ 响应式数据驱动

1.2 第一个Vue程序

① 导入开发版本的Vue.js

② 创建Vue实例对象，设置el属性和data属性

③ 使用简介的模板语法把数据渲染到页面上

<body>

       <div id="app">

      {{ message }}

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app = new Vue({

       el:"#app",

       data:{

         message:"Hello Word!"

       }

      })

    </script>

  </body>

1.3 el:挂载点

El的作用：用来设置Vue实例挂在（管理）的元素

① Vue实例的作用范围是什么？

Vue会管理el选项命中的元素及其内部的后代元素

② 是否可以使用其他的选择器？

可以使用其他选择器，但是建议使用ID选择器

③ 是否可设置其他的dom元素？

可以使用其他的双标签，不能使用HTML和BODY

1.4 data：数据对象

① Vue中用到的数据定义在data中

② data中可以写复杂类型的数据

③ 渲染复杂类型数据时，遵循js的语法即可

2、本地应用

简单例子：a.内容绑定，事件绑定（v-text ，v-html ，v-on基础）

B.显示切换，属性绑定（v-show ，v-if ，v-bind）

c.列表循环，表单元素绑定（v-for ，v-on补充，v-model）

① 通过Vue实现常见的网页效果

② 学习Vue指令，以案例巩固知识点

③ Vue指令指的是，以v-开头的一组特殊语法

2-1 v-text

设置标签的文本值（textContent）

两种用法：

① v-text指令的作用是：设置标签的内容（textContent）

② 默认写法会替换全波内容，使用插值表达式{{}}可以替换指定内容

③ 内部支持写表达式

2-2 v-html

设置标签的innerHTML，使用上基本跟v-text一样，不同的是v-html可以读取链接，v-text单纯知识提取文本。

① v-html指令的作用：设置元素的innerHTML

② 内容中有html结构会被解析为标签

③ v-text指令无论内容是什么，只会解析为文本

④ 解析文本使用v-text，需要解析html结构使用v-html

2-3 v-on

为元素绑定事件

v-on:click/@click 单击事件

v-on:dblclick/@dblclick 双击事件

① v-on指令的作用是：为元素绑定事件

② 事件名不需要写on

③ 指令可以简写为@

④ 绑定的方法定义在methods属性中

案例一：计数器

案例分析：

代码

<body>

    <!-- html结构 -->

       <div id="app">

      <!-- 计数器功能区 -->

           <div class="input-num">

       <button @click="sub">

         \-

       </button>

       <span class="sp">{{num}}</span>

       <button @click="add">

         +

       </button>

      </div>

      

    </div>

    

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app = new Vue({

       el:"#app",

       data:{

         num:1

       },

       methods:{

         add:function(){

           console.log('add');

           if (this.num<10){

             this.num++;

           }else{

             alert("别点了！最大了！");

           }

           

         },

         sub:function(){

           console.log('sub');

           if (this.num>1){

             this.num --;

           }else{

             alert("最小是1哦！");

           }

         },

         

       },

      })

    </script>

  </body>

步骤

① 创建Vue示例时：el（挂载点），data（数据），methods（方法）

② v-on指令的作用是绑定事件，简写@

③ 方法中通过this，关键字获取data中的数据

④ v-text指令的作用是：设置元素的文本值，简写为{{}}

⑤ v-html指令的作用是：设置元素的inner HTML

2-4 v-show

根据表达值的真假，切换元素的显示（true）和隐藏（false）

 <body>

       <div id="app">

      <input type="button" name="" id="" value="切换显示状态" @click="changeIsShow" />

      <input type="button" name="" id="" value="累加年龄" @click="addAge" />

           <img v-show="isShow" src="../HTML+CSS/image/05/1.jpg" >

           <img v-show="age>=24" src="../HTML+CSS/image/05/1.jpg" >

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app = new Vue({

       el: "#app",

       data:{

         isShow:false,

         age:23

       },

       methods:{

         changeIsShow:function(){

           this.isShow = !this.isShow;

         },

         addAge:function(){

           this.age++;

         }

       }

      })

      

    </script>

  </body>

① v-show指令的作用是：根据真假切换元素的显示状态

② 原理是修改元素的display，实现显示隐藏

③ 指令后面的内容，最终都会解析为布尔值

④ 值为true元素显示，职位false元素隐藏

⑤ 数据发生改变之后，对应元素的显示状态会同步更新

2-5 v-if

根据表达值的真假，切换元素的显示和隐藏（操纵DOM元素）

<body>

       <div id="app">

      <input type="button" name="" id="" value="切换显示" @click="toggleIsShow"/>

           <p v-if="isShow">欧振江，你真的要加油了！</p>

           <p v-show="isShow">与其迷茫，不如先行动</p>

      <input type="button" value="显示" @click="add"/>

           <p v-if="num>1">路遥知马力</p>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app = new Vue({

       el: "#app",

       data:{

         isShow:false,

         num:0

         

       },

       methods:{

         toggleIsShow:function(){

           this.isShow = !this.isShow;

         },

         add:function(){

           this.num++;

           console.log('num')

         }

       }

      })

      

    </script>

  </body>

① v-if 指令的作用是：根据表达式的真假切换元素的显示状态

② 本质是通过操纵DOM元素来切换显示状态

③ 表达式的值为true，元素存在于DOM树中，为false，从DOM数中移除

④　频繁的切换使用v-show,反之使用v-if，前者的切换消耗小

2-6 v-bind

设置元素的属性（比如：src,title,class）

① v-bin指令的作用是：为元素绑定属性

② 完整写法是 v-bind：属性名

③ 简写的话可以直接胜率v-bind，只保留：属性名

④　需要动态的增删class建议使用对象的方式

2-7 案例二：切换图片

案例分析

<body>

       <div id="mask">

           <div class="center">

       <h2 class="title">

         图片转换案例

       </h2>

       <!-- 图片 -->

              <img :src="imgArr[index]" >

       <!-- 左箭头 -->

       <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev"> < </a> -->

       <li v-show="index!=0" @click="prev"> < </li>

       <!-- 右箭头 -->

       <!-- <a href=# v-show="index<imgArr.length-1" @click="next"> > </a> -->

       <li v-show="index<imgArr.length-1" @click="next"> > </li>

      </div>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app = new Vue({

       el: "#mask",

       data:{

         imgArr:[

           "../HTML+CSS/image/05/1.jpg",

           "../HTML+CSS/image/05/2.jpg",

           "../HTML+CSS/image/05/3.jpg",

           "../HTML+CSS/image/05/4.jpg",

           "../HTML+CSS/image/05/5.jpg",

           "../HTML+CSS/image/05/6.jpg",

           "../HTML+CSS/image/05/7.jpg",

           "../HTML+CSS/image/05/8.jpg",

           "../HTML+CSS/image/05/9.jpg"

         ],

         index:3,

         

       },

       methods:{

         prev:function(){

           this.index --;

         },

         next:function(){

           this.index ++;

         }

       }

      })

      

    </script>

  </body>

① 列表数据使用数字保存

② v-bind指令可以设置元素属性，比如src

③ v-show和v-if都可以切换元素的显示状态，频繁切换使用v-show

2-8 v-for

根据数据生成列表结构

<body>

       <div id="app">

      <input type="button" name="" id="" value="添加数据" @click="add"/>

      <input type="button" name="" id="" value="移除数据" @click="remove"/>

      <ul>

       <li v-for="(it,index) in arr ">

         {{index+1}} 四大一线城市：{{it}}

       </li>

      </ul>

      <h2 v-for="item in vegetables" :title="item.name">

       {{item.name}}

      </h2>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app = new Vue({

       el: "#app",

       data:{

         arr:["北京","上海","广州","深圳"],

         vegetables:[

           {name:"番茄炒蛋"},

           {name:"糖醋排骨"}

           

         ]

       },

       methods:{

         add:function(){

           this.vegetables.push({name:"糖醋排骨"});

           this.arr.push("杭州");

         },

         remove:function(){

           this.vegetables.shift();

           this.arr.shift();

         }

         

       }

      })

      

    </script>

  </body>

① v-for指令的作用是：根据数据生成列表结构

② 数组经常和v-for结合使用

③ 语法是（item，index）in 数据

④ item和index可解和其他指令一起使用

⑤ 数组长度的更新会同步到页面上，是响应式的

2-9 v-on补充

传递自定义参数，事件修饰符

      <input type="button" name="" id="" value="点击" @click="doIt(666,'老铁')" />

      <input type="text" name="" id="" value="" @keyup.enter="sayHi"/>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app =new Vue({

       el:"#app",

       methods:{

         doIt:function(p1,p2){

           alert("zuota");

           alert(p1);

           alert(p2);

         },

         sayHi:function(){

           alert("吃了没？");

         }

       }

      })

    </script>

① 事件绑定的方法写成函数调用的形式，可以传入自定义参数

② 定义方法时需要定义形参来接收传入的实参

③ .enter 可以限制处罚的按键为回车（enter键）

④ 事件的后面 .修饰符 可以对事件进行限制

⑤ 事件修饰符有很多种

2-10 v-model

获取和设置表单元素的值（双向数据绑定）

  <input type="button" name="" id="" value="修改message值" @click="setM"/>

      <input type="text" v-model="message" name="" id="" value="" @keyup.enter="getM"/>

      <h2 >{{message}}</h2>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

       <script>

      var app =new Vue({

       el:"#app",

       data:{

         message:"欧振江",

       },

       methods:{

         getM:function(){

           alert(this.message);

         },

         setM:function(){

           this.message = "好好努力！"

         }

       }

      })

    </script>

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据回合表单元素值相关联
绑定的数据——表单元素的值

2-11 案例三：小黑记事本

记事本：

① 列表结构可以通过v-for指令解和数据生成

② v-on结合事件修饰符可以对事件进行限制，比如**.enter**

③ v-on 在绑定事件时可以传递自定义参数

④ 通过v-model可以开苏的设置和获取表单元素的值

⑤ 基于数据的开发方式

3、网络应用

Vue结合网络数据开发应用

主要学习内容是axios（网络请求库）、axios+vue（结合Vue一起开发）、案例：天气预报

3-1 Axios

功能强大的网络请求库

语法和使用规则

注意内容：

① axios必须先导入才能使用

② 使用get或post方法即可发送相对应的请求

③ then方法中的回调函数会在请求成功或失败时处罚

④ 通过回调函数的形参可以获取相应内容，或错误信息

axios文档传送门

3-2 axios+vue

    <input type="button" value="获取笑话" @click="getJoke">

        <p> {{ joke }}</p>

  </div>

  <!-- 官网提供的 axios 在线地址 -->

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

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

    /*

      接口:随机获取一条笑话

      请求地址:https://autumnfish.cn/api/joke

      请求方法:get

      请求参数:无

      响应内容:随机笑话

    */

    var app = new Vue({

      el:"#app",

      data:{

        joke:"很好笑的笑话"

      },

      methods: {

        getJoke:function(){

          // console.log(this.joke);

          var that = this; // 确保this.joke不改变

          axios.get("https://autumnfish.cn/api/joke").then(function(response){

            // console.log(response)

            console.log(response.data);

            // console.log(this.joke);

            that.joke = response.data;

          },function (err) { })

        }

      },

    })

 

  </script>

① axios回调函数中的this已经改变，无法访问到data中的数据

② 把this保存起来，回调函数中直接使用保存的this即可

3-3 案例四：天知道

回车查询：

① 应用的逻辑代码建议和页面分离，使用单独的js文件编写

② axios回调函数中this指向改变了，需要额外的保存一份

点击查询：

① 自定义参数可以让代码的复用性更高

② methods中定义的方法内部，可以通过this关键字点出其他方法

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>天知道</title>

 <link rel="stylesheet" href="./CSS/天知道1.css" />

 <link rel="stylesheet" href="./CSS/天知道2.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" v-model="city" @keyup.enter="searchWeather"  class="input_txt" placeholder="请输入查询的天气"/>

    <button class="input_sub">

     搜 索

    </button>

   </div>

      <div class="hotkey">

        <a href="javascript:;" @click="changeCity('北京')">北京</a>

        <a href="javascript:;" @click="changeCity('上海')">上海</a>

        <a href="javascript:;" @click="changeCity('广州')">广州</a>

        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>

   </div>

  </div>

  <ul class="weather_list">

   <li v-for="item in weatherList">

        <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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 <!-- 官网提供的 axios 在线地址 -->

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

 <!-- 自己的js -->

  <script src="./JS/天知道.js"></script>

</body>

 

</html>

 

Javascript

    /*

 请求地址:http://wthrcdn.etouch.cn/weather_mini

 请求方法:get

 请求参数:city(城市名)

 响应内容:天气信息

 

 \1. 点击回车

 \2. 查询数据

 \3. 渲染数据

 */

 var app = new Vue({

   el:"#app",

   data:{

     city:'武汉',

     weatherList:[]

   },

   methods: {

     searchWeather:function(){

       // console.log('天气查询');

       // console.log(this.city);

      // 调用接口

      // 保存this

      var that = this;

      this.forecastList = [];

      axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)

      .then(function(response){

        // console.log(response);

        // console.log(response.data.data.forecast);

        that.weatherList = response.data.data.forecast;

      },function(err){ })

    },

    changeCity:function(city){

      this.city = city;

      this.searchWeather();

    }

   },

 })

4、综合应用

4-1 案例五：悦听音乐

歌曲搜索：

① 服务器返回的数据比较复杂时，获取的时候需要注意层级结构。

② 通过审查元素快速定位到需要操纵的元素

歌曲播放：

① 歌曲id以来歌曲搜索的结果，对于不用数据的也需要关注。

歌曲封面：

① 在Vue中通过v-bind操纵属性

② 本地无法获取的数据，基本都会有对应的接口

歌曲评论：

① 在vue中通过v-for生成列表。

播放动画：

① audio标签的play事件会在音频播放的时候触发。

② audio标签的pause事件会在音频暂停的时候触发。

③ 通过对象的方式设置类名，类名生效与否取自于后面值的真假。

播放MV：

① 不同的接口需要的数据是不同的，文档的阅读需要仔细。

② 页面播放结构复杂之后，通过审查元素的方式去快速定位相关元素。

③ 响应式的数据都需要在data中定义。

代码

<!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>Document</title>

 <!-- 样式 -->

 <link rel="stylesheet" href="./css/index.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' ref='song_wrapper'>

     <ul class="song_list">

      <li v-for="item in musicList">

       <!-- 点击放歌 -->

              <a href="javascript:;" @click='playMusic(item.id)'></a>

       <b>{{item.name}}</b>

       <span>

        <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>

       </span>

      </li>

 

     </ul>

          <img src="images/line.png" class="switch_btn" alt="">

    </div>

    <!-- 歌曲信息容器 -->

        <div class="player_con" :class="{playing:isPlay}">

          <img src="images/player_bar.png" class="play_bar" />

     <!-- 黑胶碟片 -->

          <img src="images/disc.png" class="disc autoRotate" />

          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />

    </div>

    <!-- 评论容器 -->

        <div class="comment_wrapper" ref='comment_wrapper'>

     <h5 class='title'>热门留言</h5>

          <div class='comment_list'>

 

      <dl v-for="item in hotComments">

       <dt>

                <img :src="item.user.avatarUrl" alt="" />

       </dt>

       <dd class="name">{{item.user.nickname}}</dd>

       <dd class="detail">

        {{item.content}}

       </dd>

      </dl>

     </div>

          <img src="images/line.png" class="right_line">

    </div>

   </div>

      <div class="audio_con">

        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>

   </div>

      <div class="video_con" v-show="showVideo">

        <video ref='video' :src="mvUrl" controls="controls"></video>

        <div class="mask" @click="closeMv"></div>

   </div>

  </div>

 </div>

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 <!-- 官网提供的 axios 在线地址 -->

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

  <script type="text/javascript">

  // 设置axios的基地址

  axios.defaults.baseURL = 'https://autumnfish.cn';

  // axios.defaults.baseURL = 'http://localhost:3000';


 

  // 实例化vue

  var app = new Vue({

   el: "#player",

   data: {

    // 搜索关键字

    query: '',

    // 歌曲列表

    musicList: [],

    // 歌曲url

    musicUrl: '',

    // 是否正在播放

    isPlay: false,

    // 歌曲热门评论

    hotComments: [],

    // 歌曲封面地址

    coverUrl: '',

    // 显示视频播放

    showVideo: false,

    // mv地址

    mvUrl: ''

   },

   // 方法

   methods: {

    // 搜索歌曲

    searchMusic() {

     if (this.query == 0) {

      return

     }

     axios.get('/search?keywords=' + this.query).then(response => {

      // 保存内容

      this.musicList = response.data.result.songs;

 

     })

 

     // 清空搜索

     this.query = ''

    },

    // 播放歌曲

    playMusic(musicId) {

     // 获取歌曲url

     axios.get('/song/url?id=' + musicId).then(response => {

      // 保存歌曲url地址

      this.musicUrl = response.data.data[0].url

     })

     // 获取歌曲热门评论

     axios.get('/comment/hot?type=0&id=' + musicId).then(response => {

      // console.log(response)

      // 保存热门评论

      this.hotComments = response.data.hotComments

 

     })

     // 获取歌曲封面

     axios.get('/song/detail?ids=' + musicId).then(response => {

      // console.log(response)

      // 设置封面

      this.coverUrl = response.data.songs[0].al.picUrl

     })

 

    },

    // audio的play事件

    play() {

     this.isPlay = true

     // 清空mv的信息

     this.mvUrl = ''

    },

    // audio的pause事件

    pause() {

     this.isPlay = false

    },

    // 播放mv

    playMv(vid) {

     if (vid) {

      this.showVideo = true;

      // 获取mv信息

      axios.get('/mv/url?id=' + vid).then(response => {

       // console.log(response)

       // 暂停歌曲播放

       this.$refs.audio.pause()

       // 获取mv地址

       this.mvUrl = response.data.data.url

      })

     }

    },

    // 关闭mv界面

    closeMv() {

     this.showVideo = false

     this.$refs.video.pause()

    },

    // 搜索历史记录中的歌曲

    historySearch(history) {

     this.query = history

     this.searchMusic()

     this.showHistory = false;

    }

   },

 

  })

 

 </script>

</body>

 

</html>

Vue快速入门 @ 欧振江 | 2021-08-25T21:49:36+08:00 | 12 分钟阅读 | 更新于 2021-08-25T21:49:36+08:00

快速入门vue

1、 Vue基础

1.1 Vue简介

1.2 第一个Vue程序

1.3 el:挂载点

1.4 data：数据对象

2、本地应用

2-1 v-text

2-2 v-html

2-3 v-on

案例一：计数器

2-4 v-show

2-5 v-if

2-6 v-bind

2-7 案例二：切换图片

2-8 v-for

2-9 v-on补充

2-10 v-model

2-11 案例三：小黑记事本

3、网络应用

3-1 Axios

3-2 axios+vue

3-3 案例四：天知道

4、综合应用

4-1 案例五：悦听音乐

欧振江的博客与其感慨路难行，不如马上出发。

快速入门vue

1、 Vue基础

1.1 Vue简介

1.2 第一个Vue程序

1.3 el:挂载点

1.4 data：数据对象

2、 本地应用

2-1 v-text

2-2 v-html

2-3 v-on

案例一：计数器

2-4 v-show

2-5 v-if

2-6 v-bind

2-7 案例二：切换图片

2-8 v-for

2-9 v-on补充

2-10 v-model

2-11 案例三：小黑记事本

3、网络应用

3-1 Axios

3-2 axios+vue

3-3 案例四：天知道

4、综合应用

4-1 案例五：悦听音乐

2、本地应用