一篇文章带你了解网页框架——Vue简单入门

这篇文章将会介绍我们前端入门级别的框架——Vue的简单使用

如果你以后想从事后端程序员，又想要稍微了解前端框架知识，那么这篇文章或许可以给你带来帮助

温馨提醒：在学习该文章前，请先学习HTML，CSS，JavaScript，Ajax等前端知识

Vue基础

首先，我们从官方文档中可以得到下述描述：

  • Vue是一套用于构建用户界面的渐进式框架。
  • Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
  • 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

其中我们需要格外注意的是：

  • Vue只负责前端页面的设计，并不能完全实现前端的所有功能

Vue主要特点：

  • 采用JavaScript框架

  • 简化Dom操作

  • 响应式数据驱动

VsCode插件推荐

在正式开始介绍Vue之前，我想向大家安利一个VsCode插件——Live Server

Live Server 插件可以同步代码和网页的更新：

  • 当你保存代码时，你的页面将会同步进行刷新，省略了手动点击页面的步骤，在开发中提供便利

Vue代码框架

首先我们需要学会Vue的基本使用

  1. 导入相关包
  1. <!--Vue为我们提供了两个版本，我们通常采用开发环境版本，具有检错功能便于学习-->
  3. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  4. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  6. <!-- 生产环境版本，优化了尺寸和速度 -->
  7. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 基本框架使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Vue基础</title>
  9. </head>
  11. <body>
  13.    <!--首先我们创建一个div，并绑定id为app-->
  14.   <div id="app">
  15.       <!--我们采用{{}}来调用相关Vue中的data中存放的数据-->
  16.     {{ message }}
  17.   </div>
  19.   <!-- 导入vue：开发环境版本，包含了有帮助的命令行警告 -->
  20.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  22.     <!--书写js代码-->
  23.   <script>
  24.       <!-- 以下为vue基本框架 new Vue({el,data,method})-->
  25.     var app = new Vue({
  26.         <!--el实现挂载点-->
  27.       el:"#app",
  28.         <!--data存放相关数据-->
  29.       data:{
  30.           <!--数据属性-->
  31.         message:" 你好 小黑! "
  32.       }
  33.     })
  34.   </script>
  35. </body>
  37. </html>

EL挂载点介绍

学习过Vue的基本使用后，我们先对EL挂载点做出最基本的介绍：

  • EL挂载点负责设置页面中属性与Vue属性的连接
  • EL挂载点设置后，页面属性可以调用Vue中的数据（data）和方法（method）

EL挂载点注意点：

  • Vue的作用范围在EL挂载点的本体元素以及后代元素中
  • Vue的EL挂载点可以依赖于各种选择器，例如类选择器等，但推荐使用ID选择器
  • Vue的EL挂载点不可以作用在HTML和BODY两个页面最大元素上

我们给出简单示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>el:挂载点</title>
  9. </head>
  11. <body id="body">
  12.     <!--这里的{{ message }}不会有所显示，因为未与Vue连接-->
  13.   {{ message }}
  14.   <h2 id="app" class="app">
  15.       <!-- 这里的{{ message }}会显示，因为属于Vue连接本体-->
  16.     {{ message }}
  17.       <!-- 这里的{{ message }}会显示，因为属于Vue连接后代元素-->
  18.     <span> {{ message }} </span>
  19.   </h2>
  20.   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  21.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  22.   <script>
  23.     var app = new Vue({
  24.       // 以下均可使用，
  25.       // el:"#app",
  26.       // el:".app",
  27.       // el:"div",
  29.       // body无法连接
  30.       el:"#body",
  31.       data:{
  32.         message:"秋落"
  33.       }
  34.     })
  35.   </script>
  36. </body>
  38. </html>

Data数据对象介绍

学习过Vue的基本使用后，我们对Data做出最基本的介绍：

  • Data用于存储页面元素中使用的各类属性
  • 属性可以包括各种类型，例如文本，数组等复杂类型
  • 渲染复杂类型数据时，遵循JavaScript的语法基本都可以使用

我们给出简单示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>data:数据对象</title>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <!--使用{{}}调用data数据-->
  14.         {{ message }}
  15.         <!--对象采用.来调用内部元素-->
  16.         <h2> {{ school.name }} {{ school.mobile }}</h2>
  17.         <ul>
  18.             <!--数组采用[index]来选择内部元素-->
  19.             <li>{{ campus[0] }}</li>
  20.             <li>{{ campus[3] }}</li>
  21.         </ul>
  22.     </div>
  23.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  24.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  25.     <script>
  26.         var app = new Vue({
  27.             el:"#app",
  28.             data:{
  29.                 message:"你好!",
  30.                 school:{
  31.                     name:"河南师范大学",
  32.                     mobile:"0373-3325000"
  33.                 },
  34.                 campus:["东校区","西校区","新乡校区","平原湖校区"]
  35.             }
  36.         })
  37.     </script>
  38. </body>
  40. </html>

Vue本地应用

在介绍了Vue的基本使用后，我们针对Vue内部的各种属性方法来做出一一介绍

每条属性或方法我们都会给出解释和相关案例

v-text

文本解释：

v-text：设置标签的文本值

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-text指令</title>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <!--我们采用v-text来设置标签内文本，注意会覆盖掉内部文本，“深圳”将不再显示-->
  14.         <h2 v-text="message+'!'">深圳</h2>
  15.         <h2 v-text="info+'!'">深圳</h2>
  16.         <!--另一种文本书写方式{{}}-->
  17.         <h2>{{ message +'!'}}深圳</h2>
  18.     </div>
  19.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  20.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21.     <script>
  22.         var app = new Vue({
  23.             el:"#app",
  24.             data:{
  25.                 message:"河南师范大学",
  26.                 info:"软件学院"
  27.             }
  28.         })
  29.     </script>
  30. </body>
  32. </html>

v-html

文本解释：

v-html：以html的格式来设置标签的文本值

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-html指令</title>
  9. </head>
  11. <body>
  12.     <!--v-html:设置元素的innerHTML-->
  14.     <!--采用v-html后显示的是河南师范大学的加粗版，但采用v-text后显示的是<strong>河南师范大学</strong>-->
  15.     <div id="app" v-html="context">
  17.     </div>
  18.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  19.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  20.     <script>
  21.         var app = new Vue({
  22.             el:"#app",
  23.             data:{
  24.                 content:"<strong>河南师范大学</strong>"
  25.             }
  26.         })
  27.     </script>
  28. </body>
  30. </html>

v-on

文本解释：

v-on：为元素绑定事件，可以采用@代替

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>v-on</title>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <!--v-on：后面跟事件名 用于绑定事件 可以用@代替 后面用methods中的方法即可-->
  12.         <input type="button" value="点击" v-on:click="doIt">
  13.         <input type="button" value="点击" @click="doIt">
  14.     </div>
  16.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  17.     <script>
  18.         var app = new Vue({
  19.             el:"#app",
  20.             methods:{
  21.                 doIt:function(){
  22.                     alert("河南师范大学");
  23.                 }
  24.             }
  25.         })
  26.     </script>
  27. </body>
  28. </html>

v-show

文本解释：

v-show：根据表达值的真假，切换元素的显示和隐藏（隐藏后源代码仍存在）

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>v-show指令</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.         <!--点击后改变isShow的值，将isShow变为true或false，以此控制img的显示与隐藏-->
  12.       <input type="button" value="切换显示状态" @click="changeIsShow">
  13.         <!--点击增加年龄值-->
  14.       <input type="button" value="累加年龄" @click="addAge">
  15.         <!--v-show用于控制元素的存在或隐藏，这里采用isShow变量，根据isShow的值来判断是否存在-->
  16.       <img v-show="isShow" src="./img/monkey.gif" alt="">
  17.         <!--根据年龄值大小控制元素的存在或隐藏，只是为了表示v-show的参数需要是一个true或false的判定-->
  18.       <img v-show="age>=18" src="./img/monkey.gif" alt="">
  19.     </div>
  20.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21.     <script>
  22.       var app = new Vue({
  23.         el:"#app",
  24.         data:{
  25.           isShow:false,
  26.           age:17
  27.         },
  28.         methods: {
  29.             // 进行 isShow 的true或false更改
  30.           changeIsShow:function(){
  31.             this.isShow = !this.isShow;
  32.           },
  33.           addAge:function(){
  34.             this.age++;
  35.           }
  36.         },
  37.       })
  38.     </script>
  39.   </body>
  40. </html>

v-if

文本解释：

v-if：根据表达值的真假，切换元素的显示和隐藏（隐藏后，源代码不存在）

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-if指令</title>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <!--以下操作实际效果同v-show相同，但隐藏后在页面的展示栏中无法看到源代码，属于彻底隐藏-->
  13.         <input type="button" value="切换显示" @click="toggleIsShow">
  14.         <p v-if="isShow">河南师范大学</p>
  15.         <p v-show="isShow">河南师范大学 - v-show修饰</p>
  16.         <h2 v-if="temperature>=35">热死啦</h2>
  17.     </div>
  18.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  19.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  20.     <script>
  21.         var app = new Vue({
  22.             el:"#app",
  23.             data:{
  24.                 isShow:false,
  25.                 temperature:20
  26.             },
  27.             methods: {
  28.                 toggleIsShow:function(){
  29.                     this.isShow = !this.isShow;
  30.                 }
  31.             },
  32.         })
  33.     </script>
  34. </body>
  36. </html>

v-bind

文本解释：

v-bind：设置元素的属性（比如：src，title。class）

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-bind指令</title>
  9.     <style>
  10.         .active{
  11.             border: 1px solid red;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <!--v-bind通常可以隐藏，直接写 :属性 即可-->
  19.     <div id="app">
  20.         <!--这里采用v-bind设置页面图片-->
  21.         <img v-bind:src="imgSrc" alt="">
  22.         <br>
  23.         <!--这里采用v-bind略写方式设置页面图片，后面采用 data 变量控制图片展示-->
  24.         <!--同样采用v-bind控制title，class等属性，采用三元运算符来控制active-->
  25.         <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
  26.         <br>
  27.         <!--通过点击事件来控制class-->
  28.         <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
  29.     </div>
  30.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  31.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  32.     <script>
  33.         var app = new Vue({
  34.             el:"#app",
  35.             data:{
  36.                 imgSrc:"http://www.itheima.com/images/logo.png",
  37.                 imgTitle:"黑马程序员",
  38.                 isActive:false
  39.             },
  40.             methods: {
  41.                 toggleActive:function(){
  42.                     this.isActive = !this.isActive;
  43.                 }
  44.             },
  45.         })
  46.     </script>
  47. </body>
  49. </html>

v-for

文本解释：

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

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-for指令</title>
  9. </head>
  11. <body>
  12.     <div id="app">
  14.         <!--简单的添加删除操作，针对h2的数据-->
  15.         <input type="button" value="添加数据" @click="add">
  16.         <input type="button" value="移除数据" @click="remove">
  18.         <ul>
  19.             <!--简单v-for，参数为（数据名称[任起]，下标[index]） in data数组-->
  20.             <li v-for="(it,index) in arr">
  21.                 <!--在内部，可以使用数据名称和下标值-->
  22.                 {{ index+1 }}城市推荐:{{ it }}
  23.             </li>
  24.         </ul>
  26.         <!--数组中装有对象也是同样的使用方法-->
  27.         <h2 v-for="item in vegetables" v-bind:title="item.name">
  28.             {{ item.name }}
  29.         </h2>
  31.     </div>
  33.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  35.     <script>
  36.         var app = new Vue({
  37.             el:"#app",
  38.             data:{
  39.                 arr:["北京","上海","广州","深圳"],
  40.                 vegetables:[
  41.                     {name:"鱼"},
  42.                     {name:"鸡"}
  43.                 ]
  44.             },
  45.             methods: {
  46.                 add:function(){
  47.                     this.vegetables.push({ name:"红烧鱼" });
  48.                 },
  49.                 remove:function(){
  50.                     this.vegetables.shift();
  51.                 }
  52.             },
  53.         })
  54.     </script>
  55. </body>
  57. </html>

v-on+

文本解释：

v-on+：补充v-on的部分知识点

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-on补充</title>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <!--方法中可以携带参数，正常调用即可-->
  14.         <input type="button" value="点击" @click="doIt(666,'老铁')">
  15.         <!--可以选取事件的部分事件做反应，例如@keyup.enter就是点击enter键生效，我们通常采用"."来表示事件限制-->
  16.         <input type="text" @keyup.enter="sayHi">
  17.     </div>
  19.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21.     <script>
  22.         var app = new Vue({
  23.             el:"#app",
  24.             methods: {
  25.                 doIt:function(p1,p2){
  26.                     console.log("做it");
  27.                     console.log(p1);
  28.                     console.log(p2);
  29.                 },
  30.                 sayHi:function(){
  31.                     alert("吃了没");
  32.                 }
  33.             },
  34.         })
  35.     </script>
  36. </body>
  38. </html>

v-model

文本解释：

v-model：实现双向绑定，便捷设置

代码解释：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>v-model指令</title>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <!--点击按钮实现setM方法-->
  14.         <input type="button" value="修改message" @click="setM">
  15.         <!--我们将文本内容与message数据双向绑定-->
  16.         <!--当我们修改文本的值时，VsCode中的代码不会发生变化，但实际上message已经发生变化，我们将message的值单独列出来-->
  17.         <input type="text" v-model="message" @keyup.enter="getM">
  19.         <!--当上述message发生改变时，message本身发生变化，那么调用它的显示值也发生变化-->
  20.         <h2>{{ message }}</h2>
  21.     </div>
  23.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  25.     <script>
  26.         var app = new Vue({
  27.             el:"#app",
  28.             data:{
  29.                 message:"河南师范大学"
  30.             },
  31.             methods: {
  32.                 getM:function(){
  33.                     alert(this.message);
  34.                 },
  35.                 setM:function(){
  36.                     this.message ="软件学院";
  37.                 }
  38.             },
  39.         })
  40.     </script>
  41. </body>
  43. </html>

案例：计算器

下面我们通过一个案例来巩固前面所学习的一些知识点

案例要求：

  • 我们希望通过"-"和"+"控制中间数字的大小（最小为0，最大为10）

知识点复习：

  • EL挂载点，Data数据，Methods方法
  • v-on，v-text方法

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>计算器</title>
  9.       <!--css配置-->
  10.     <style>
  11.       #app {
  12.         width: 480px;
  13.         height: 100px;
  14.         margin: 200px auto;
  15.       }
  16.       .input-num {
  17.         margin-top: 20px;
  18.         height: 100%;
  19.         display: flex;
  20.         border-radius: 10px;
  21.         overflow: hidden;
  22.         box-shadow: 0 0 4px black;
  23.       }
  24.       .input-num button {
  25.         width: 150px;
  26.         height: 100%;
  27.         font-size: 40px;
  28.         color: gray;
  29.         cursor: pointer;
  30.         border: none;
  31.         outline: none;
  32.       }
  33.       .input-num span {
  34.         height: 100%;
  35.         font-size: 40px;
  36.         flex: 1;
  37.         text-align: center;
  38.         line-height: 100px;
  39.       }
  40.     </style>
  42.   </head>
  44.   <body>
  45.       <!--index主页-->
  47.       <!--设置Vue的id绑定-->
  48.     <div id="app">
  49.       <img src="http://www.itheima.com/images/logo.png" alt="" />
  50.       <!-- 计数器 -->
  51.       <div class="input-num">
  52.           <!--绑定事件sub-->
  53.         <button @click="sub"> - </button>
  54.           <!--数字展示-->
  55.         <span>{{ num }}</span>
  56.           <!--绑定事件add-->
  57.         <button @click="add"> + </button>
  58.       </div>
  59.     </div>
  60.   </body>
  62. </html>
  64. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  66. <!-- 编码 -->
  67. <script>
  68.   /*
  69.     1. data中定义num属性,类型是数字,渲染到2个按钮中间
  70.     2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减
  71.     3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加
  72.   */
  73.   // 创建Vue实例
  74.   var app = new Vue({
  75.     el: "#app",
  76.     data: {
  77.       // 修改的数字
  78.       num:1
  79.     },
  80.     methods: {
  81.       // 减
  82.       sub:function(){
  83.         // 递减
  84.         if(this.num>0){
  85.           this.num--;
  86.         }else{
  87.           alert("数字最小为0");
  88.         }
  89.       },
  90.       // 加
  91.       add:function(){
  92.         // 累加
  93.         if(this.num<10){
  94.           this.num++;
  95.         }else{
  96.           alert("数字最大为10");
  97.         }
  98.       }
  99.     }
  100.   });
  101. </script>

案例：图片切换

下面我们通过一个案例来巩固前面所学习的一些知识点

案例要求：

  • 我们通过点击左右两边的图片切换符号来切换中间图片

知识点复习：

  • EL挂载点，Data数据，Methods方法
  • v-on，v-show，v-bind方法

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.       <!--css样式在下面单列-->
  9.     <link rel="stylesheet" href="./css/index.css" />
  10.   </head>
  12.   <body>
  13.     <div id="mask">
  14.       <div class="center">
  15.         <h2 class="title"><img src="./images/logo.png" alt=""> 学校环境 </h2>
  17.           <!--展示图片，切换的中心点-->
  18.         <img :src="imgList[index]" alt="" />
  20.           <!--左转图片-->
  21.           <!--添加绑定事件prev，用于图片的切换-->
  22.           <!--添加v-show，当左侧无图片时，隐藏-->
  23.         <a
  24.           href="javascript:void(0)"
  25.           @click="prev"
  26.           class="left"
  27.           v-show="index>0"
  28.         >
  29.           <img src="./images/prev.png" alt="" />
  30.         </a>
  32.           <!--右转图片-->
  33.           <!--添加绑定事件right，用于图片的切换-->
  34.           <!--添加v-show，当右侧无图片时，隐藏-->
  35.         <a
  36.           href="javascript:void(0)"
  37.           @click="next"
  38.           class="right"
  39.           v-show="index<imgList.length-1"
  40.         >
  41.           <img src="./images/next.png" alt="" />
  42.         </a>
  44.       </div>
  45.     </div>
  47.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  49.     <script>
  50.       const app = new Vue({
  51.         el: "#mask",
  52.         data: {
  53.             // 图片元素
  54.           imgList: [
  55.             "./images/00.jpg",
  56.             "./images/01.jpg",
  57.             "./images/02.jpg",
  58.             "./images/03.jpg",
  59.             "./images/04.jpg",
  60.             "./images/05.jpg",
  61.             "./images/06.jpg",
  62.             "./images/07.jpg",
  63.             "./images/08.jpg",
  64.             "./images/09.jpg",
  65.             "./images/10.jpg",
  66.           ],
  67.             // 图片序号
  68.           index: 0
  69.         },
  70.         methods: {
  71.           // 上一张
  72.           prev() {
  73.             this.index--;
  74.           },
  75.           // 下一张
  76.           next() {
  77.             this.index++;
  78.           }
  79.         }
  80.       });
  81.     </script>
  82.   </body>
  83. </html>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. html,
  7. body,
  8. #mask {
  9.   width: 100%;
  10.   height: 100%;
  11. }
  13. #mask {
  14.   background-color: #c9c9c9;
  15.   position: relative;
  16. }
  18. #mask .center {
  19.   position: absolute;
  20.   background-color: #fff;
  21.   left: 50%;
  22.   top: 50%;
  23.   transform: translate(-50%, -50%);
  24.   padding: 10px;
  25. }
  26. #mask .center .title {
  27.   position: absolute;
  28.   display: flex;
  29.   align-items: center;
  30.   height: 56px;
  31.   top: -61px;
  32.   left: 0;
  33.   padding: 5px;
  34.   padding-left: 10px;
  35.   padding-bottom: 0;
  36.   color: rgba(175, 47, 47, 0.8);
  37.   font-size: 26px;
  38.   font-weight: normal;
  39.   background-color: white;
  40.   padding-right: 50px;
  41.   z-index: 2;
  42. }
  43. #mask .center .title img {
  44.   height: 40px;
  45.   margin-right: 10px;
  46. }
  48. #mask .center .title::before {
  49.   content: "";
  50.   position: absolute;
  51.   width: 0;
  52.   height: 0;
  53.   border: 65px solid;
  54.   border-color: transparent transparent white;
  55.   top: -65px;
  56.   right: -65px;
  57.   z-index: 1;
  58. }
  60. #mask .center > img {
  61.   display: block;
  62.   width: 700px;
  63.   height: 458px;
  64. }
  66. #mask .center a {
  67.   text-decoration: none;
  68.   width: 45px;
  69.   height: 100px;
  70.   position: absolute;
  71.   top: 179px;
  72.   vertical-align: middle;
  73.   opacity: 0.5;
  74. }
  75. #mask .center a :hover {
  76.   opacity: 0.8;
  77. }
  79. #mask .center .left {
  80.   left: 15px;
  81.   text-align: left;
  82.   padding-right: 10px;
  83.   border-top-right-radius: 10px;
  84.   border-bottom-right-radius: 10px;
  85. }
  87. #mask .center .right {
  88.   right: 15px;
  89.   text-align: right;
  90.   padding-left: 10px;
  91.   border-top-left-radius: 10px;
  92.   border-bottom-left-radius: 10px;
  93. }

案例：记事本

下面我们通过一个案例来巩固前面所学习的全部知识点

案例要求：

  • 新增：书写内容，点击Enter后，便利贴放于页面
  • 删除：点击内容后方的"x"号后，该内容消失
  • 统计：统计内容数量，在左下角显示
  • 清空：点击右下角清空键，内容全部清空
  • 隐藏：当无内容时，下述记事本部分隐藏

代码展示：

  1. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.   <title>小黑记事本</title>
  6.   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7.   <meta name="robots" content="noindex, nofollow" />
  8.   <meta name="googlebot" content="noindex, nofollow" />
  9.   <meta name="viewport" content="width=device-width, initial-scale=1" />
  10.     <!--css样式在下列出-->
  11.   <link rel="stylesheet" type="text/css" href="./css/index.css" />
  12. </head>
  14. <body>
  15.   <!-- 主体区域 -->
  16.   <section id="todoapp">
  17.     <!-- 输入框 -->
  18.     <header class="header">
  19.       <h1>小黑记事本</h1>
  20.         <!--输入栏，实现双向绑定，当点击时使用add方法-->
  21.       <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
  22.         class="new-todo" />
  23.     </header>
  24.     <!-- 列表区域 -->
  25.     <section class="main">
  26.       <ul class="todo-list">
  27.           <!--记事主题内容，采用v-for遍历记事内容list的内容，输出在页面-->
  28.         <li class="todo" v-for="(item,index) in list">
  29.           <div class="view">
  30.               <!--记事内容-->
  31.             <span class="index">{{ index+1 }}.</span>
  32.             <label>{{ item }}</label>
  33.               <!--删除按钮，点击时触发remove功能，参数为当前index-->
  34.             <button class="destroy" @click="remove(index)"></button>
  35.           </div>
  36.         </li>
  37.       </ul>
  38.     </section>
  39.     <!-- 统计和清空 -->
  40.       <!--记事本主体，当不存在记事内容时，隐藏-->
  41.     <footer class="footer" v-show="list.length!=0">
  42.       <span class="todo-count" v-if="list.length!=0">
  43.           <!--统计值：直接采用list的长度代替-->
  44.         <strong>{{ list.length }}</strong> items left
  45.       </span>
  46.         <!--记事本主体，当不存在记事内容时，隐藏-->
  47.       <button v-show="list.length!=0" class="clear-completed" @click="clear">
  48.         Clear
  49.       </button>
  50.     </footer>
  51.   </section>
  52.   <!-- 底部 -->
  53.   <footer class="info">
  54.     <p>
  55.       <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
  56.     </p>
  57.   </footer>
  59.   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  60.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  62.   <script>
  63.     var app = new Vue({
  64.         // 实现Vue绑定
  65.       el: "#todoapp",
  66.       data: {
  67.           // list表示记事内容
  68.         list: ["写代码", "吃饭饭", "睡觉觉"],
  69.           // 表示目前输入内容，双向绑定
  70.         inputValue: "好好学习,天天向上"
  71.       },
  72.       methods: {
  73.           // 新添方法，将输入值填入计时内容中
  74.         add: function () {
  75.           this.list.push(this.inputValue);
  76.         },
  77.           // 删除方法，删除当前下表为index的内容
  78.         remove: function (index) {
  79.           this.list.splice(index, 1);
  80.         },
  81.           // 清除方法，清除所有方法
  82.         clear: function () {
  83.           this.list = [];
  84.         }
  85.       },
  86.     })
  87.   </script>
  89. </body>
  91. </html>
  1. html,
  2. body {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  6. body {
  7.   background: #fff;
  8. }
  9. button {
  10.   margin: 0;
  11.   padding: 0;
  12.   border: 0;
  13.   background: none;
  14.   font-size: 100%;
  15.   vertical-align: baseline;
  16.   font-family: inherit;
  17.   font-weight: inherit;
  18.   color: inherit;
  19.   -webkit-appearance: none;
  20.   appearance: none;
  21.   -webkit-font-smoothing: antialiased;
  22.   -moz-osx-font-smoothing: grayscale;
  23. }
  25. body {
  26.   font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  27.   line-height: 1.4em;
  28.   background: #f5f5f5;
  29.   color: #4d4d4d;
  30.   min-width: 230px;
  31.   max-width: 550px;
  32.   margin: 0 auto;
  33.   -webkit-font-smoothing: antialiased;
  34.   -moz-osx-font-smoothing: grayscale;
  35.   font-weight: 300;
  36. }
  38. :focus {
  39.   outline: 0;
  40. }
  42. .hidden {
  43.   display: none;
  44. }
  46. #todoapp {
  47.   background: #fff;
  48.   margin: 180px 0 40px 0;
  49.   position: relative;
  50.   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  51. }
  53. #todoapp input::-webkit-input-placeholder {
  54.   font-style: italic;
  55.   font-weight: 300;
  56.   color: #e6e6e6;
  57. }
  59. #todoapp input::-moz-placeholder {
  60.   font-style: italic;
  61.   font-weight: 300;
  62.   color: #e6e6e6;
  63. }
  65. #todoapp input::input-placeholder {
  66.   font-style: italic;
  67.   font-weight: 300;
  68.   color: gray;
  69. }
  71. #todoapp h1 {
  72.   position: absolute;
  73.   top: -160px;
  74.   width: 100%;
  75.   font-size: 60px;
  76.   font-weight: 100;
  77.   text-align: center;
  78.   color: rgba(175, 47, 47, .8);
  79.   -webkit-text-rendering: optimizeLegibility;
  80.   -moz-text-rendering: optimizeLegibility;
  81.   text-rendering: optimizeLegibility;
  82. }
  84. .new-todo,
  85. .edit {
  86.   position: relative;
  87.   margin: 0;
  88.   width: 100%;
  89.   font-size: 24px;
  90.   font-family: inherit;
  91.   font-weight: inherit;
  92.   line-height: 1.4em;
  93.   border: 0;
  94.   color: inherit;
  95.   padding: 6px;
  96.   border: 1px solid #999;
  97.   box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  98.   box-sizing: border-box;
  99.   -webkit-font-smoothing: antialiased;
  100.   -moz-osx-font-smoothing: grayscale;
  101. }
  103. .new-todo {
  104.   padding: 16px;
  105.   border: none;
  106.   background: rgba(0, 0, 0, 0.003);
  107.   box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
  108. }
  110. .main {
  111.   position: relative;
  112.   z-index: 2;
  113.   border-top: 1px solid #e6e6e6;
  114. }
  116. .toggle-all {
  117.   width: 1px;
  118.   height: 1px;
  119.   border: none; /* Mobile Safari */
  120.   opacity: 0;
  121.   position: absolute;
  122.   right: 100%;
  123.   bottom: 100%;
  124. }
  126. .toggle-all + label {
  127.   width: 60px;
  128.   height: 34px;
  129.   font-size: 0;
  130.   position: absolute;
  131.   top: -52px;
  132.   left: -13px;
  133.   -webkit-transform: rotate(90deg);
  134.   transform: rotate(90deg);
  135. }
  137. .toggle-all + label:before {
  138.   content: "❯";
  139.   font-size: 22px;
  140.   color: #e6e6e6;
  141.   padding: 10px 27px 10px 27px;
  142. }
  144. .toggle-all:checked + label:before {
  145.   color: #737373;
  146. }
  148. .todo-list {
  149.   margin: 0;
  150.   padding: 0;
  151.   list-style: none;
  152.   max-height: 420px;
  153.   overflow: auto;
  154. }
  156. .todo-list li {
  157.   position: relative;
  158.   font-size: 24px;
  159.   border-bottom: 1px solid #ededed;
  160.   height: 60px;
  161.   box-sizing: border-box;
  162. }
  164. .todo-list li:last-child {
  165.   border-bottom: none;
  166. }
  168. .todo-list .view .index {
  169.   position: absolute;
  170.   color: gray;
  171.   left: 10px;
  172.   top: 20px;
  173.   font-size: 16px;
  174. }
  176. .todo-list li .toggle {
  177.   text-align: center;
  178.   width: 40px;
  179.   /* auto, since non-WebKit browsers doesn't support input styling */
  180.   height: auto;
  181.   position: absolute;
  182.   top: 0;
  183.   bottom: 0;
  184.   margin: auto 0;
  185.   border: none; /* Mobile Safari */
  186.   -webkit-appearance: none;
  187.   appearance: none;
  188. }
  190. .todo-list li .toggle {
  191.   opacity: 0;
  192. }
  194. .todo-list li .toggle + label {
  195.   /*
  196. 		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
  197. 		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
  198. 	*/
  199.   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  200.   background-repeat: no-repeat;
  201.   background-position: center left;
  202. }
  204. .todo-list li .toggle:checked + label {
  205.   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
  206. }
  208. .todo-list li label {
  209.   word-break: break-all;
  210.   padding: 15px 15px 15px 60px;
  211.   display: block;
  212.   line-height: 1.2;
  213.   transition: color 0.4s;
  214. }
  216. .todo-list li.completed label {
  217.   color: #d9d9d9;
  218.   text-decoration: line-through;
  219. }
  221. .todo-list li .destroy {
  222.   display: none;
  223.   position: absolute;
  224.   top: 0;
  225.   right: 10px;
  226.   bottom: 0;
  227.   width: 40px;
  228.   height: 40px;
  229.   margin: auto 0;
  230.   font-size: 30px;
  231.   color: #cc9a9a;
  232.   margin-bottom: 11px;
  233.   transition: color 0.2s ease-out;
  234. }
  236. .todo-list li .destroy:hover {
  237.   color: #af5b5e;
  238. }
  240. .todo-list li .destroy:after {
  241.   content: "×";
  242. }
  244. .todo-list li:hover .destroy {
  245.   display: block;
  246. }
  248. .todo-list li .edit {
  249.   display: none;
  250. }
  252. .todo-list li.editing:last-child {
  253.   margin-bottom: -1px;
  254. }
  256. .footer {
  257.   color: #777;
  258.   padding: 10px 15px;
  259.   height: 20px;
  260.   text-align: center;
  261.   border-top: 1px solid #e6e6e6;
  262. }
  264. .footer:before {
  265.   content: "";
  266.   position: absolute;
  267.   right: 0;
  268.   bottom: 0;
  269.   left: 0;
  270.   height: 50px;
  271.   overflow: hidden;
  272.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
  273.     0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
  274.     0 17px 2px -6px rgba(0, 0, 0, 0.2);
  275. }
  277. .todo-count {
  278.   float: left;
  279.   text-align: left;
  280. }
  282. .todo-count strong {
  283.   font-weight: 300;
  284. }
  286. .filters {
  287.   margin: 0;
  288.   padding: 0;
  289.   list-style: none;
  290.   position: absolute;
  291.   right: 0;
  292.   left: 0;
  293. }
  295. .filters li {
  296.   display: inline;
  297. }
  299. .filters li a {
  300.   color: inherit;
  301.   margin: 3px;
  302.   padding: 3px 7px;
  303.   text-decoration: none;
  304.   border: 1px solid transparent;
  305.   border-radius: 3px;
  306. }
  308. .filters li a:hover {
  309.   border-color: rgba(175, 47, 47, 0.1);
  310. }
  312. .filters li a.selected {
  313.   border-color: rgba(175, 47, 47, 0.2);
  314. }
  316. .clear-completed,
  317. html .clear-completed:active {
  318.   float: right;
  319.   position: relative;
  320.   line-height: 20px;
  321.   text-decoration: none;
  322.   cursor: pointer;
  323. }
  325. .clear-completed:hover {
  326.   text-decoration: underline;
  327. }
  329. .info {
  330.   margin: 50px auto 0;
  331.   color: #bfbfbf;
  332.   font-size: 15px;
  333.   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  334.   text-align: center;
  335. }
  337. .info p {
  338.   line-height: 1;
  339. }
  341. .info a {
  342.   color: inherit;
  343.   text-decoration: none;
  344.   font-weight: 400;
  345. }
  347. .info a:hover {
  348.   text-decoration: underline;
  349. }
  351. /*
  352. 	Hack to remove background from Mobile Safari.
  353. 	Can't use it globally since it destroys checkboxes in Firefox
  354. */
  355. @media screen and (-webkit-min-device-pixel-ratio: 0) {
  356.   .toggle-all,
  357.   .todo-list li .toggle {
  358.     background: none;
  359.   }
  361.   .todo-list li .toggle {
  362.     height: 40px;
  363.   }
  364. }
  366. @media (max-width: 430px) {
  367.   .footer {
  368.     height: 50px;
  369.   }
  371.   .filters {
  372.     bottom: 10px;
  373.   }
  374. }

Vue网络应用

我们在本篇开头说过Vue的作用仅仅是用来完成静态页面

所以如果想要完成项目开发功能，还需要与后台交互的技术Ajax（主要采用Axios技术）

Axios技术

Axios技术是原生的Ajax进行封装，简化书写

我们在之前的Ajax专题中有完整的介绍过Ajax和Axios技术，在这里我们仅做简单回忆：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.     <title>axios基本使用</title>
  9. </head>
  11. <body>
  13.     <!--两个按钮分别用来实现两种数据获取-->
  14.     <input type="button" value="get请求" class="get">
  15.     <input type="button" value="post请求" class="post">
  17.     <!-- 官网提供的 axios 在线地址 -->
  18.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  19.     <script>
  20.         /*
  21.             接口1:随机笑话
  22.             请求地址:https://autumnfish.cn/api/joke/list
  23.             请求方法:get
  24.             请求参数:num(笑话条数,数字)
  25.             响应内容:随机笑话
  26.         */
  28.         // 事件绑定
  29.         document.querySelector(".get").onclick = function () {
  30.             // axios的get格式：get后跟url，response为返回体，err为错误
  31.             axios.get("https://autumnfish.cn/api/joke/list?num=6")
  32.             .then(function (response) {
  33.                 console.log(response);
  34.               },function(err){
  35.                   console.log(err);
  36.               })
  37.         }
  38.         /*
  39.              接口2:用户注册
  40.              请求地址:https://autumnfish.cn/api/user/reg
  41.              请求方法:post
  42.              请求参数:username(用户名,字符串)
  43.              响应内容:注册成功或失败
  44.          */
  46.         // 事件绑定
  47.         document.querySelector(".post").onclick = function () {
  48.             // axios的post格式：post后跟url和请求体，response为返回体，err为错误
  49.             axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
  50.             .then(function(response){
  51.                 console.log(response);
  52.                 console.log(this.skill);
  53.             },function (err) {
  54.                 console.log(err);
  55.               })
  56.           }
  58.     </script>
  59. </body>
  61. </html>

Axios+Vue技术

我们常常用Vue作为页面的设计框架，同时采用Axios作为前后端交互的技术

两者的结合其实并没有互相掺杂，大致上还保留原本的形式，最大的改变只有数据来源发生变化

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>axios+vue</title>
  9. </head>
  11. <body>
  13.     <div id="app">
  14.         <input type="button" value="获取笑话" @click="getJoke">
  15.         <p> {{ joke }}</p>
  16.     </div>
  18.     <!-- 官网提供的 axios 在线地址 -->
  19.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  20.     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  21.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  23.     <script>
  24.         /*
  25.             接口:随机获取一条笑话
  26.             请求地址:https://autumnfish.cn/api/joke
  27.             请求方法:get
  28.             请求参数:无
  29.             响应内容:随机笑话
  30.         */
  32.         // 采用Vue开启框架页面
  33.         var app = new Vue({
  34.             el:"#app",
  35.             data:{
  36.                 // 页面数据展示
  37.                 joke:"很好笑的笑话"
  38.             },
  39.             methods: {
  40.                 // 获得笑话的方法，采用axios技术进行数据请求
  41.                 getJoke:function(){
  42.                     var that = this;
  43.                     axios.get("https://autumnfish.cn/api/joke").then(function(response){
  44.                         console.log(response.data);
  45.                         that.joke = response.data;
  46.                     },function (err) {  })
  47.                 }
  48.             },
  49.         })
  50.     </script>
  52. </body>
  54. </html>

案例：天气预报

我们同样采用一个简单的案例来巩固Vue网络应用

案例需求：

  • 我们可以手动查找输入框内的城市的天气情况
  • 我们可以点击页面内含有的城市的天气情况

代码展示：

  1. <!--主页面展示-->
  3. <!DOCTYPE html>
  4. <html lang="en">
  6. <head>
  7.   <meta charset="UTF-8" />
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10.   <title>天知道</title>
  11.     <!--CSS链接-->
  12.   <link rel="stylesheet" href="css/index.css" />
  13. </head>
  15. <body>
  16.     <!--Vue绑定-->
  17.   <div class="wrap" id="app">
  18.     <div class="search_form">
  19.       <div class="logo"><img src="img/logo.png" alt="logo" /></div>
  20.       <div class="form_group">
  21.           <!--双向绑定city，添加事件@keyup.enter="queryWeather"-->
  22.         <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" />
  23.           <!--添加事件@keyup.enter="queryWeather"-->
  24.         <button class="input_sub" @click="queryWeather">
  25.           搜 索
  26.         </button>
  27.       </div>
  29.         <!--展示列出的城市，点击触发事件-->
  30.       <div class="hotkey">
  31.         <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
  32.       </div>
  34.         <!--展示返回的天气数据-->
  35.     </div>
  36.     <ul class="weather_list">
  37.         <!---->
  38.       <li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
  39.         <div class="info_type">
  40.           <span class="iconfont">{{ item.type }}</span>
  41.         </div>
  42.         <div class="info_temp">
  43.           <b>{{ item.low}}</b>
  44.           ~
  45.           <b>{{ item.high}}</b>
  47.         </div>
  49.         <div class="info_date">
  50.           <span>{{ item.date }}</span>
  51.         </div>
  53.       </li>
  54.     </ul>
  55.   </div>
  57.   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  58.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  59.   <!-- 官网提供的 axios 在线地址 -->
  60.   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  62.   <script>
  63.     new Vue({
  64.       el: "#app",
  65.       data: {
  66.           // 输入框城市，双向绑定
  67.         city: "武汉",
  68.           // 天气情况
  69.         forecastList: [],
  70.           // 城市展示
  71.         hotCitys: ["北京", "上海", "广州", "深圳"]
  72.       },
  73.       methods: {
  74.         queryWeather() {
  75.             // 将天气情况清零
  76.           this.forecastList = [];
  77.             // axios获得天气状况
  78.           axios
  79.             .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
  80.             .then(res => {
  81.               console.log(res);
  82.               this.forecastList = res.data.data.forecast;
  83.             })
  84.             .catch(err => {
  85.               console.log(err);
  86.             })
  87.             .finally(() => { });
  88.         },
  89.           // 点击城市触发queryWeather方法，获得天气情况
  90.         clickSearch(city) {
  91.           this.city = city;
  92.           this.queryWeather();
  93.         }
  94.       }
  95.     });
  96.   </script>
  97. </body>
  99. </html>
  1. /*
  2. css展示
  3. 页面前置css修改
  4. */
  6. body,ul,h1,h2,h3,h4,h5,h6{
  7.     margin: 0;
  8.     padding: 0;
  9. }
  10. h1,h2,h3,h4,h5,h6{
  11.     font-size:100%;
  12.     font-weight:normal;
  13. }
  14. a{
  15.     text-decoration:none;
  16. }
  17. ul{
  18.     list-style:none;
  19. }
  20. img{
  21.     border:0px;
  22. }
  24. /* 清除浮动，解决margin-top塌陷 */
  25. .clearfix:before,.clearfix:after{
  26.     content:'';
  27.     display:table;
  28. }
  29. .clearfix:after{
  30.     clear:both;
  31. }
  32. .clearfix{
  33.     zoom:1;
  34. }
  36. .fl{
  37.     float:left;
  38. }
  39. .fr{
  40.     float:right;
  41. }
  43. /*
  44. css展示
  45. 页面内部css修改
  46. */
  48. body{
  49.     font-family:'Microsoft YaHei';
  50. }
  51. .wrap{
  52.     position: fixed;
  53.     left:0;
  54.     top:0;
  55.     width:100%;
  56.     height:100%;
  57.     /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
  58.     /* background:#8fd5f4; */
  59.     /* background: linear-gradient(#6bc6ee, #fff); */
  60.     background:#fff;
  62. }
  63. .search_form{
  64.     width:640px;
  65.     margin:100px auto 0;
  66. }
  67. .logo img{
  68.     display:block;
  69.     margin:0 auto;
  70. }
  71. .form_group{
  72.     width:640px;
  73.     height:40px;
  74.     margin-top:45px;
  75. }
  76. .input_txt{
  77.    width:538px;
  78.    height:38px;
  79.    padding:0px;
  80.    float:left;
  81.    border:1px solid #41a1cb;
  82.    outline:none;
  83.    text-indent:10px;
  84. }
  86. .input_sub{
  87.     width:100px;
  88.     height:40px;
  89.     border:0px;
  90.     float: left;
  91.     background-color: #41a1cb;
  92.     color:#fff;
  93.     font-size:16px;
  94.     outline:none;
  95.     cursor: pointer;
  96.     position: relative;
  97. }
  98. .input_sub.loading::before{
  99.     content:'';
  100.     position: absolute;
  101.     left: 0;
  102.     top: 0;
  103.     width: 100%;
  104.     height: 100%;
  105.     background: url('../img/loading.gif');
  106. }
  108. .hotkey{
  109.     margin:3px 0 0 2px;
  110. }
  112. .hotkey a{
  113.     font-size:14px;
  114.     color:#666;
  115.     padding-right:15px;
  116. }
  117. .weather_list{
  118.     height:200px;
  119.     text-align:center;
  120.     margin-top:50px;
  121.     font-size:0px;
  122. }
  123. .weather_list li{
  124.     display:inline-block;
  125.     width:140px;
  126.     height:200px;
  127.     padding:0 10px;
  128.     overflow: hidden;
  129.     position: relative;
  130.     background:url('../img/line.png') right center no-repeat;
  131.     background-size: 1px 130px;
  132. }
  134. .weather_list li:last-child{
  135.     background:none;
  136. }
  138. /* .weather_list .col02{
  139.     background-color: rgba(65, 165, 158, 0.8);
  140. }
  141. .weather_list .col03{
  142.     background-color: rgba(94, 194, 237, 0.8);
  143. }
  144. .weather_list .col04{
  145.     background-color: rgba(69, 137, 176, 0.8);
  146. }
  147. .weather_list .col05{
  148.     background-color: rgba(118, 113, 223, 0.8);
  149. } */
  151. .info_date{
  152.     width:100%;
  153.     height:40px;
  154.     line-height:40px;
  155.     color:#999;
  156.     font-size:14px;
  157.     left:0px;
  158.     bottom:0px;
  159.     margin-top: 15px;
  160. }
  161. .info_date b{
  162.     float: left;
  163.     margin-left:15px;
  164. }
  166. .info_type span{
  167.     color:#fda252;
  168.     font-size:30px;
  169.     line-height:80px;
  170. }
  171. .info_temp{
  172.     font-size:14px;
  173.     color:#fda252;
  174. }
  175. .info_temp b{
  176.     font-size:13px;
  177. }
  178. .tem .iconfont {
  179.     font-size: 50px;
  180.   }

结束语

好的,关于Vue入门案例的内容就介绍到这里,希望能为你带来帮助!

附录

该文章属于学习内容，具体参考B站黑马程序员vue前端基本教程

这里附上链接：01.课程介绍_哔哩哔哩_bilibili

一篇文章带你了解网页框架——Vue简单入门的更多相关文章

  1. 一篇文章带你了解服务器操作系统——Linux简单入门

    一篇文章带你了解服务器操作系统--Linux简单入门 Linux作为服务器的常用操作系统,身为工作人员自然是要有所了解的 在本篇中我们会简单介绍Linux的特点,安装,相关指令使用以及内部程序的安装等 ...

  2. 一篇文章带你了解NoSql数据库——Redis简单入门

    一篇文章带你了解NoSql数据库--Redis简单入门 Redis是一个基于内存的key-value结构数据库 我们会利用其内存存储速度快,读写性能高的特点去完成企业中的一些热门数据的储存信息 在本篇 ...

  3. 一篇文章带你掌握主流基础框架——Spring

    一篇文章带你掌握主流基础框架--Spring 这篇文章中我们将会介绍Spring的框架以及本体内容,包括核心容器,注解开发,AOP以及事务等内容 那么简单说明一下Spring的必要性: Spring技 ...

  4. 一篇文章带你掌握主流服务层框架——SpringMVC

    一篇文章带你掌握主流服务层框架--SpringMVC 在之前的文章中我们已经学习了Spring的基本内容,SpringMVC隶属于Spring的一部分内容 但由于SpringMVC完全针对于服务层使用 ...

  5. 一篇文章带你掌握主流办公框架——SpringBoot

    一篇文章带你掌握主流办公框架--SpringBoot 在之前的文章中我们已经学习了SSM的全部内容以及相关整合 SSM是Spring的产品,主要用来简化开发,但我们现在所介绍的这款框架--Spring ...

  6. 一篇文章带你掌握主流数据库框架——MyBatis

    一篇文章带你掌握主流数据库框架--MyBatis MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射. 在之前的文章中我们学习了MYSQL和JDBC,但是这些东西远远不 ...

  7. 一篇文章带你掌握MyBatis简化框架——MyBatisPlus

    一篇文章带你掌握MyBatis简化框架--MyBatisPlus 我们在前面的文章中已经学习了目前开发所需的主流框架 类似于我们所学习的SpringBoot框架用于简化Spring开发,我们的国人大大 ...

  8. MYSQL（基本篇）——一篇文章带你走进MYSQL的奇妙世界

    MYSQL(基本篇)--一篇文章带你走进MYSQL的奇妙世界 MYSQL算是我们程序员必不可少的一份求职工具了 无论在什么岗位,我们都可以看到应聘要求上所书写的"精通MYSQL等数据库及优化 ...

  9. 一篇文章带你了解热门版本控制系统——Git

    一篇文章带你了解热门版本控制系统--Git 这篇文章会介绍到关于版本控制的相关知识以及版本控制神器Git 我们可能在生活中经常会使用GitHub网页去查询一些开源的资源或者项目,GitHub就是基于G ...

随机推荐

  1. Nginx 平滑升级、Nginx的一些基础配置

    # Nginx 平滑升级 # 方案一:使用Nginx服务信号进行升级 # 1.将就版本的sbin目录下可执行nginx进行备份(mv nginx nginxold) # 2.将新版本 configur ...

  2. 项目操作案例丨西门子PLC通过网关连接ACS800变频器

    本案例控制对象为炉条机.以及蒸汽的控制以及现场数据参数的显示以及报警. PLC 选用西门子 CPU,通过 ET200 IO 模块控制现场设备并监控数据.变频器采用ABB ACS800变频器,将ABB ...

  3. 技术分析 | 浅谈在MySQL体系下SQL语句是如何在系统中执行的及可能遇到的问题

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 SQL语句大家并不陌生,但某种程度上来看,我们只是知道了这条语句是什么功能,它可 ...

  4. Apache DolphinScheduler 迎来 2 位 PPMC

    经过 Apache DolphinScheduler PPMC 们的推荐和投票,我们高兴的宣布:Apache DolphinScheduler 迎来了 2 位 PPMC .他们是(github id) ...

  5. 用 Scanner 扫描CSV文件时报错：“java.util.nosuchelementexception:no line found”的解决方法

    最近用 java 对一个很大的 CSV 文件进行处理.打算用 Scanner 逐行扫描进来,结果报错 "java.util.nosuchelementexception:no line fo ...

  6. Luogu3177 [HAOI2015]树上染色 （树形DP）

    考场上打出来个\(2^n n^2 \log (n)\),还文件错误RE了... 其实这不就是个变了一点点的树形背包,状态是节点\(u\)子树的\(贡献\). //#include <iostre ...

  7. Ansible部署MySQL编译安装

    环境: 系统:centos7 x3 master:192.168.220.133 slave1:192.168.220.136 slave2:192.168.220.137 前期准备: slave1( ...

  8. 大数据Hadoop入门教程 | (一)概论

    数据是什么 数据是指对客观事件进行记录并可以鉴别的符号,是对客观事物的性质.状态以及相互关系等进行记载的物理符号或这些物理符号的组合,它是可识别的.抽象的符号. 它不仅指狭义上的数字,还可以是具有一定 ...

  9. [java]基础学习HELLOWORLD系列

    (一)手把手教你做JDK环境变量配置 步骤 1 : 首先看配置成功后的效果 点WIN键->运行(或者使用win+r) 输入cmd命令 输入java -version 注: -version是小写 ...

  10. 以太坊 layer2: optimism 源码学习(二) 提现原理

    作者:林冠宏 / 指尖下的幽灵.转载者,请: 务必标明出处. 掘金:https://juejin.im/user/1785262612681997 博客:http://www.cnblogs.com/ ...