Vue

转载 于 2020-04-25 10:48:16 发布 · 334 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://www.bilibili.com/video/BV12J411m7MG
本文详细介绍Vue.js的快速搭建过程，包括导入开发版Vue.js，创建Vue实例对象，使用插值表达式进行数据渲染，以及Vue常用指令的介绍和案例演示，如v-text、v-html、v-on等。

入门

在这里插入图片描述

快速搭建

在这里插入图片描述

  • 导入开发版的Vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

  • 使用简洁模板（插值表达式）把数据渲染到页面上

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 插值表达式 -->
    <div id="app">{{ message }}</div>
  </body>
  <script>
    var app = new Vue({
      el: "#app", // 挂载点
      data: {
        message: "Hello Vue!",
      },
    });
  </script>
</html>

el：挂载点

在这里插入图片描述

总结

el：设置vue实例挂载点

问题解答

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

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

  2. Vue是否可以使用其他的选择器？

    可以使用，但建议使用ID选择器（唯一）。

  3. Vue是否可以设置其他的dom元素呢？

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

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body id="body">
    {{ message }}
    <!-- 插值表达式 -->
    <h2 id="app" class="app">
      {{ message }}
      <span>{{ message }}</span>
    </h2>
  </body>
  <script>
    var app = new Vue({
      //el: "#app", // 挂载点
      //el: ".app", // 挂载点
      //el: "div", // 挂载点
      el: "#body", // 挂载点
      data: {
        message: "Hello Vue!",
      },
    });
  </script>
</html>

data：数据对象

在这里插入图片描述

总结

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

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

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

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 插值表达式 -->
    <div id="app">
      {{ message }}
      <h2>{{ people.name }} {{ people.tel }}</h2>
      <ul>
        <li>
          {{ province[0] }}
        </li>
        <li>
          {{ province[1] }}
        </li>
        <li>
          {{ province[2] }}
        </li>
      </ul>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "你好 朋友!",
        people: {
          name: "iluis",
          tel: "1213",
        },
        province: ["辽宁省", "吉林省", "黑龙江省", "东北省"],
      },
    });
  </script>
</html>

本地应用（Vue常用指令）

内容绑定和事件绑定：v-text、v-html、v-on

显示切换属性绑定：v-show、v-if、v-bing

列表循环，表单元素绑定：v-for、

在这里插入图片描述

v-text

概述

作用：设置标签的文本值（textContext）

内部支持写表达式

 <h2 v-text="people.tel"></h2>

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

  • h2标签中的内容会被全部替换
 <h2 v-text="message"></h2>
  • 文字部分会被保留
 <h2>基础{{ message }}入门</h2>

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 插值表达式 -->
    <div id="app">
      <h2 v-text="message"></h2>
      <h2 v-text="message+'ya!'"></h2>
      <!-- v-text缩写方式{{}} -->
      <h2>基础{{message + "!"}}</h2>
      <h2 v-text="people.tel"></h2>
      <h2>{{campus[0]}}</h2>
      <h2 v-text="campus[1]"></h2>
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "你好 朋友!",
        people: {
          name: "iluis",
          tel: "1213",
        },
        campus: ["辽宁省", "吉林省", "黑龙江省", "东北省"],
      },
    });
  </script>
</html>

v-html

概述

作用：设置元素的innerHtml

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

对比

  • v-text指令无论什么内容都会解析为文本
  • 解析文本使用v-text，需要解析html结构使用v-html

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 2.html结构-->
    <div id="app">
      <p v-text="content"></p>
      <p v-html="content"></p>
    </div>
    <script>
      // 3.创建vue实例
      var app = new Vue({
        el: "#app",
        data: {
          //content: "技术小白",
          content: "<a href='https://www.baidu.com'>技术小白</a>",
          campus: ["辽宁省", "吉林省", "黑龙江省", "东北省"],
        },
      });
    </script>
  </body>
</html>

v-on

概述

作用：为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在message属性中

方法内部通过this关键字可以访问定义在data中的数据

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 2.html结构-->
    <div id="app">
      <input type="button" value="v-on指令" v-on:click="doIt" />
      <input type="button" value="v-on=简写" @click="doIt" />
      <input type="button" value="双击事件" @dblclick="doIt" />
      <h2 @click="changeFood">{{ food }}</h2>
    </div>
    <script>
      // 3.创建vue示例
      var app = new Vue({
        el: "#app",
        data: {
          food: "番茄炒蛋",
        },
        methods: {
          doIt: function () {
            alert("做IT");
          },
          changeFood: function () {
            // 打开console控制台，点击番茄炒蛋文字，控制台输出“番茄炒蛋”
            //console.log(this.food);
            // 使用this更改元素中的数据
            this.food += "  酸辣土豆丝";
          },
        },
      });
    </script>
  </body>
</html>

v-on补充

使用自定义参数和事件修饰符

在这里插入图片描述

图解

事件修饰符：https://cn.vuejs.org/v2/api/#v-on

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 2.html结构-->
    <div id="app">
      <!-- 传递自定义参数 -->
      <input type="button" value="点击" v-on:click="doIt(position,money)" />
      <!-- 事件修饰符 -->
      <input type="text" placeholder="点击回车弹出提示" @keyup.enter="sayHi" />
    </div>
    <script>
      // 3.创建vue示例
      var app = new Vue({
        el: "#app",
        data: {
          money: 3000,
          position: "程序员",
        },
        methods: {
          doIt: function (position, money) {
            console.log(position);
            console.log(money);
            console.log(position, money);
          },
          sayHi: function () {
            alert("吃了没!");
          },
        },
      });
    </script>
  </body>
</html>

案例：计数器（v-on基础）

逻辑

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 2.html结构-->
    <div id="app">
      <!-- 计数器功能区域 -->
      <div id="input-num">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
      </div>
    </div>
    <script>
      // 3.创建vue示例
      var app = new Vue({
        el: "#app",
        data: {
          num: 1,
        },
        methods: {
          add: function () {
            // 测试事件是否绑定成功
            //console.log("添加按钮绑定成功");

            if (this.num < 10) {
              this.num++;
            } else {
              alert("别点啦，越界了!");
            }
          },
          sub: function () {
            //console.log("sub");
            if (this.num > 0) {
              this.num--;
            } else {
              alert("别点啦，到底了!");
            }
          },
        },
      });
    </script>
  </body>
</html>

v-show

概述

作用：根据真假切换元素的现实状态

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

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

数据改变后，对应元素的显示状态会同步更新
在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow" />
      <input type="button" value="点一下，大一年" @click="addAge" />
      <!-- 本质是在切换display元素 -->
      <img v-show="isShow" src="./img/2.jpg" alt="" />
      <img v-show="age >= 18" src="./img/2.jpg" alt="" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isShow: false,
          age: 17,
        },
        methods: {
          changeIsShow: function () {
            this.isShow = !this.isShow;
          },
          addAge: function () {
            this.age++;
          },
        },
      });
    </script>
  </body>
</html>

v-if

概述

作用：根据表达式的真假切换元素的显示状态（操作dom元素）

本质：通过操作dom元素来切换显示状态

表达式值为true，元素存在于dom树中，为false，从dom树中删除

频换切换状态建议使用v-show，反之使用v-if，前者切换消耗小

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <div id="app">
      <!-- v-if：操作dom树 -->
      <p v-if="isShow">Hello!</p>
      <!-- v-show：操作样式 -->
      <p v-show="isShow">Hello! v-show</p>
      <input type="button" value="切换显示" @click="toggleIsShow" />
      <h2 v-if="tem > 35">热死了！</h2>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isShow: false,
          tem: 20,
        },
        methods: {
          toggleIsShow: function () {
            this.isShow = !this.isShow;
          },
        },
      });
    </script>
  </body>
</html>

v-bind

概述

作用：为元素绑定属性

完整写法：v-bind:属性名

简写：:属性名

需要动态增删class建议适用对象方式

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
    <style>
      .active {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- #app -->
    <div id="app">
      <!-- <img v-bind:src="imgSrc" alt="" /> -->
      <br />
      <img
        :src="imgSrc"
        :title="imgTitle+'!!!'"
        :class="isActive ? 'active' : ''"
      />
      <br />
      <img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" />
      <input type="button" value="切换显示" @click="toggleIsActive" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          imgSrc:
            "https://img-blog.csdnimg.cn/20200409100541773.png#pic_center",
          imgTitle: "技术小白",
          isActive: false,
        },
        methods: {
          toggleIsActive: function () {
            this.isActive = !this.isActive;
          },
        },
      });
    </script>
  </body>
</html>

案例：图片切换

逻辑

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
    <style>
      .active {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- #app -->
    <div id="mask">
      <div class="center">
        <!-- 左箭头 -->
        <input
          type="button"
          value="左"
          class="left"
          @click="prev"
          v-show="index != 0"
        />
        <!-- 右箭头 -->
        <input
          type="button"
          value="右"
          class="right"
          @click="next"
          v-show="index < imgArr.length - 1"
        />
        <div>
          <!-- 图片 -->
          <img :src="imgArr[index]" :title="图片" />
        </div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#mask",
        data: {
          index: 0,
          imgArr: ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"],
        },
        methods: {
          prev: function () {
            this.index--;
          },
          next: function () {
            this.index++;
          },
        },
      });
    </script>
  </body>
</html>

v-for

概述

作用：根据数据生成列表结构 （如，数组结合v-for）

语法：（item,index) in 数据

item和index可以结合其他指令一起使用：:title="item.name"

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

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
    <style>
      .active {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- #app -->
    <div id="app">
      <ul>
        <!-- index:数组索引 （可以自定义名称）-->
        <!-- item:每一项数据 （可以自定义名称）-->
        <li v-for="(item,index) in arr" :title="message">
          你滴家在哪里：{{index+1}} {{ item }}
        </li>
      </ul>
      <!-- 添加或删除蔬菜 -->
      <input type="button" value="添加蔬菜" @click="add" />
      <input type="button" value="删除蔬菜" @click="remove" />
      <!-- 显示蔬菜名称 -->
      <h2 v-for="item in vegetables" :title="item.name">
        <!-- {{ item }} -->
        {{ item.name }}
      </h2>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "页面加载于" + new Date().toLocaleString(),
          arr: ["辽宁省", "吉林省", "黑龙江省", "东北省"],
          vegetables: [
            { name: "西红柿" },
            { name: "土豆" },
            { name: "黄瓜" },
            { name: "茄子" },
          ],
        },
        methods: {
          add: function () {
            this.vegetables.push({ name: "地瓜" });
          },
          remove: function () {
            this.vegetables.shift();
          },
        },
      });
    </script>
  </body>
</html>

界面效果

在这里插入图片描述

v-model

概述

作用：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关 （数据双向绑定）

在这里插入图片描述

图解

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue基础</title>
  </head>
  <body>
    <!-- 2.html结构-->
    <div id="app">
      <div id="copy" align="center">
        <input type="button" value="修改message值" @click="setM" />
        <input type="text" v-model="message" @keyup.enter="getM" />
        <!-- 为啥不好使呢？？？ -->
        <!-- <input type="text" placeholder="点击回车弹出提示" v-text="你好" /> -->
        <h2 v-text="message">test</h2>
      </div>
    </div>
    <script>
      // 3.创建vue示例
      var app = new Vue({
        el: "#app",
        data: {
          message: "小海豹",
        },
        methods: {
          doIt: function (position, money) {
            console.log(position);
            console.log(money);
            console.log(position, money);
          },
          getM: function () {
            alert(this.message);
          },
          setM: function () {
            this.message = "大鲨鱼";
          },
        },
      });
    </script>
  </body>
</html>

案例：记事本

主要功能

在这里插入图片描述

新增

在这里插入图片描述

代码
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <!-- 生成数据列表，回车增加数据 -->
        <input
          v-model="inputValue"
          @keyup.enter="add"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <!-- 修改显示数据 -->
          <li class="todo" v-for="(item,index) in list">
            <div class="view">
              <span class="index">{{ index + 1 }}.</span>
              <label>{{ item }}</label>
              <button class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.itheima.com/"
          ><img src="./img/black.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 1.创建vue实例
      var app = new Vue({
        el: "#todoapp",
        data: {
          list: ["逛逛街", "喝喝茶", "泡泡澡"],
          inputValue: "好好学习，天天向上",
        },
        // 3.新增数据
        methods: {
          add: function () {
            this.list.push(this.inputValue);
          },
        },
      });
    </script>
  </body>
</html>

删除

在这里插入图片描述

代码
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <!-- 生成数据列表，回车增加数据 -->
        <input
          v-model="inputValue"
          @keyup.enter="add"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <!-- 修改显示数据 -->
          <li class="todo" v-for="(item,index) in list">
            <div class="view">
              <span class="index">{{ index + 1 }}.</span>
              <label>{{ item }}</label>
              <button class="destroy" @click="remove(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.itheima.com/"
          ><img src="./img/black.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 1.创建vue实例
      var app = new Vue({
        el: "#todoapp",
        data: {
          list: ["逛逛街", "喝喝茶", "泡泡澡"],
          inputValue: "好好学习，天天向上",
        },
        // 3.新增数据
        methods: {
          add: function () {
            this.list.push(this.inputValue);
          },
          remove: function (index) {
            console.log("删除");
            console.log(index);
            // 删除对应数据，每次删除一个
            this.list.splice(index, 1);
          },
        },
      });
    </script>
  </body>
</html>

统计

基于数据的开发方式，使用v-text显示数组长度即可

 <strong>{{list.length}}</strong> items left

清空

基于数据的开发方式，创建一个清空数组的函数绑定到按钮上即可

<button class="clear-completed" @click="clear">
          Clear
</button>

 methods: {
          clear: function () {
            this.list = [];
          },
        },

隐藏

没有数据时，隐藏元素（v-show、v-if都行、数组非空）

  • 隐藏统计数据
<!-- 统计和清空 -->
<footer class="footer">
    <span class="todo-count" v-if="list.length != 0">
  • 隐藏清空按钮
<button
        class="clear-completed"
        @click="clear"
        v-show="list.length != 0"
        >
            Clear
</button>

完整代码

重要思路：

在这里插入图片描述

代码：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <!-- 生成数据列表，回车增加数据 -->
        <input
          v-model="inputValue"
          @keyup.enter="add"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <!-- 修改显示数据 -->
          <li class="todo" v-for="(item,index) in list">
            <div class="view">
              <span class="index">{{ index + 1 }}.</span>
              <label>{{ item }}</label>
              <button class="destroy" @click="remove(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count" v-if="list.length != 0">
          <!-- 这样不行 -->
          <!-- <strong v-text="index + 1 ">1</strong> items left -->
          <strong>{{list.length}}</strong> items left
        </span>
        <button
          class="clear-completed"
          @click="clear"
          v-show="list.length != 0"
        >
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.itheima.com/"
          ><img src="./img/black.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 1.创建vue实例
      var app = new Vue({
        el: "#todoapp",
        data: {
          list: ["逛逛街", "喝喝茶", "泡泡澡"],
          inputValue: "好好学习，天天向上",
        },
        // 3.新增数据
        methods: {
          add: function () {
            this.list.push(this.inputValue);
          },
          remove: function (index) {
            console.log("删除");
            console.log(index);
            // 删除对应数据，每次删除一个
            this.list.splice(index, 1);
          },
          clear: function () {
            this.list = [];
          },
        },
      });
    </script>
  </body>
</html>

网络应用

axios基础

概述

  • axios必须先导入才可以使用
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    或者
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或 失败时触发
  • 通过回调函数的形参可以获取响应内容，或错误信息

axios项目地址：https://github.com/axios/axios

在这里插入图片描述

图解

get请求
axios.get(地址?查询字符串).then(function(response){},function(err){})
  • 第一个函数会在请求响应完成的时候触发
  • 第二个函数会在请求响应失败的时候触发
  • 两个函数的形参可以用来获取信息，一个是服务器响应的信息，一个是错误的信息
  • 如果需要传递参数，在url后面添加查询字符串即可
  • 查询字符串的格式：key=value&key2=value2...
post请求
axios.post(地址,参数对象).then(function(response){},function(err){})
  • 如果需要传递参数，在数据是以对象形式写在post方法的第二个参数内部
  • 参数格式：{key:calue,key2:value2}（写到参数对象位置即可）
接口

在这里插入图片描述

代码
<!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>axios基本使用</title>
  </head>

  <body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
      document.querySelector(".get").onclick = function () {
        axios
          //.get("https://autumnfish.cn/api/joke/list?num=3")
          .get("https://autumnfish.cn/api/joke/list123?num=3")
          .then(
            function (response) {
              console.log(response);
            },
            function (err) {
              console.log(err);
            }
          );
      };
      /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
      document.querySelector(".post").onclick = function () {
        axios
          // post的参数用对象方式来写{}
          .post("https://autumnfish.cn/api/user/reg", {
            username: "酱焗西兰花",
          })
          .then(
            function (response) {
              console.log(response);
              console.log(this.skill);
            },
            function (err) {
              console.log(err);
            }
          );
      };
    </script>
  </body>
</html>

axios + vue

代码

<!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>axios+vue</title>
  </head>

  <body>
    <div id="app">
      <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);
            // 把this存起来，不然下面使用this时，this可能会改变
            var that = this;
            axios.get("https://autumnfish.cn/api/joke").then(
              function (response) {
                console.log(response);
                // 打开控制台，查看笑话的数据头
                console.log(response.data);
                // 两次打印this不同，this改变了
                //console.log(this.joke);
                that.joke = response.data;
              },
              function (err) {
                console.log(err);
              }
            );
          },
        },
      });
    </script>
  </body>
</html>

注意

这里使用this会发生错误！

  • this可能会发生改变
    在这里插入图片描述

  • 解决方法：把this存起来。

相关代码：

  methods: {
          getJoke: function () {
            console.log(this.joke);
            // 把this存起来，不然下面使用this时，this可能会改变
            var that = this;
            axios.get("https://autumnfish.cn/api/joke").then(
              function (response) {
                console.log(response);
                // 打开控制台，查看笑话的数据头
                console.log(response.data);
                // 两次打印this不同，this改变了
                //console.log(this.joke);
                that.joke = response.data;
              },

在这里插入图片描述

案例：天气查询

1. 回车查询

在这里插入图片描述

代码

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/reset.css" />
    <link rel="stylesheet" href="css/index.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="请输入查询的天气"
            @keyup.enter="searchWeather"
            v-model="city"
          />
          <button class="input_sub">
            搜 索
          </button>
        </div>
        <div class="hotkey">
          <a href="javascript:;">北京</a>
          <a href="javascript:;">上海</a>
          <a href="javascript:;">广州</a>
          <a href="javascript:;">深圳</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/main.js"></script>
  </body>
</html>
JS
/*
  请求地址: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;
      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;
        })
        .catch(function (err) {});
    },
  },
});

2. 点击查询

在这里插入图片描述

HTML页面

  • 城市的修改
 <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>
          <a href="javascript:;" @click="changeCity('沈阳')" >沈阳</a>
  </div>

JS

  • 调用查询天气信息方法
 changeCity: function (city) {
      this.city = city; // 设置参数
      this.searchWeather(); // 调用方法
    },
标签
#vue
LiuszZZ
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值