Vue笔记（完结版）

最新推荐文章于 2024-04-29 16:07:12 发布

逃逃日塔灰

最新推荐文章于 2024-04-29 16:07:12 发布

阅读量3.6k

点赞数 10

分类专栏：前端文章标签：前端 vue vue.js vue2

本文链接：https://blog.csdn.net/sokoooo/article/details/122858889

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

#END（具体可观看b站黑马vue入门版）

一、Vue简介

1.JavaScript框架

2.简化Dom操作

3.响应式数据驱动

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

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

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

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

6.是否可以设置其他的dom元素？

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

二、Vue基本知识

（一）简单知识

1.el挂载点（对应一中的第五点：可以使用其他选择器，如类选择器，但是建议使用ID选择器）

1）代码：

<body>
    {{ message }}
    <div id="app" class="app">
      {{ message }}
      <span>{{ message }}</span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //在el命令的元素的内部可以嵌套任意标签
      var app = new Vue({
        //el: "#app",
        //el: ".app",
        el: "div",
        data: {
          message: "今天好冷啊",
        },
      });
    </script>
  </body>

2）结果：

2.data：数据对象

1）基本知识

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

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

③ 渲染复杂类型数据时，遵守js语法

2）代码：

<body>
    <div id="app" class="app">
      {{ message }}
      <h2>{{ school.name }} {{ school.mobile }}</h2>
      <ul>
        <li>{{ campus[0] }}</li>
        <li>{{ campus[1] }}</li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //在el命令的元素的内部可以嵌套任意标签
      var app = new Vue({
        el: "#app",
        data: {
          message: "今天好冷啊",
          school: {
            name: "武装侦探社",
            mobile: "120-1314-520",
          },
          campus: ["太宰治", "中原中也", "国木田独步"],
        },
      });
    </script>

3）结果：

（二）本地应用（指令）

1.本地应用：内容绑定，事件绑定；显示切换，属性绑定；列表循环，表单元素绑定

2.内容绑定，事件绑定

1）v-text：

① 作用：设置标签的内容（textContent）

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

③ 内部支持写表达式

④ 代码：

<body>
    <div id="app" class="app">
      <h2 v-text="message + '!'">1/20</h2>
      <h2 v-text="info + '!'">1/20</h2>
      <h2>{{ message +'!' }}1/20</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //在el命令的元素的内部可以嵌套任意标签
      var app = new Vue({
        el: "#app",
        data: {
          message: "今天好冷啊!",
          info: "今天为什么这么冷？",
        },
      });
    </script>

⑤ 结果：

2）v-html：

① 设置标签的innerHTML

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

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

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

⑤ 代码：

<body>
    <!-- 2.html结构 -->
    <div id="app">
      <h2 v-html="content"></h2>
      <h2 v-text="content"></h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //3.创建Vue实例
      var app = new Vue({
        el: "#app",
        data: {
          content: "<a href='https://baidu.com'>为文豪野犬干杯</a>",
        },
      });
    </script>
  </body>

⑥ 结果：

3）v-on基础

① 作用：为元素绑定事件

② 事件名不需要写on，指令可以简写为@

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

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

⑤ 代码：

<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>
    <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //3.创建Vue示例
      var app = new Vue({
        el: "#app",
        data: {
          food: "西红柿炒鸡蛋",
        },
        methods: {
          doIt: () => {
            alert("今天你看Vue了吗？");
          },
          changeFood: function () {
            this.food += "好好吃!";
          },
        },
      });
    </script>

⑥ 结果：（依次为三个按钮点击结果，以及点击文本的事件）

补充：

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

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

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

④ .enter可以限制触发的案件为回车

⑤ 事件修饰符有很多种

⑥ 代码：

<body>
    <!-- 2.html结构 -->
    <div id="app">
      <input type="button" value="点击" v-on:click="doIt(666,'老铁')" />
      <!-- 事件修饰符  .enter 就属于一个事件修饰符-->
      <input type="text" @keyup.enter="sayHi" />
      <input type="button" value="双击事件" @dblclick="doIt" />
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //3.创建Vue示例
      var app = new Vue({
        el: "#app",
        data: {
          food: "西红柿炒鸡蛋",
        },
        methods: {
          doIt: (p1, p2) => {
            console.log(p2 + "做IT" + p1);
          },
          sayHi: function () {
            alert("hi");
          },
        },
      });
    </script>

⑦ 结果：（从左往右的事件）

4）v-show指令

① 作用：根据表达式的真假切换元素的显示状态

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

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

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

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

⑦ 代码：

<body>
    <div id="app">
      <button @click="changeIsShow">切换显示图片状态</button>
      <button @click="addAge">累加年龄</button>
      <img v-show="isShow" src="1.jpg" alt="" srcset="" />
      <img v-show="age>=20" src="1.jpg" alt="" srcset="" />
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        isShow: false,
        age: 17,
      },
      methods: {
        changeIsShow: function () {
          this.isShow = !this.isShow;
        },
        addAge: function () {
          this.age++;
        },
      },
    });
  </script>

⑧ 结果：

5）v-if指令

① 作用：根据表达式的真假切换元素的显示状态

② 原理：通过操纵dom元素来切换显示状态

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

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

⑤ 代码：

<body>
    <div id="app">
      <button @click="toggleIsShow">点击显示或隐藏</button>
      <h1 v-if="isShow">今天吃草莓！</h1>
      <h2 v-show="isShow">v-show修饰</h2>
      <h2 v-if="temperature>=30">好热！</h2>
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        isShow: false,
        temperature: 32,
      },
      methods: {
        toggleIsShow: function () {
          this.isShow = !this.isShow;
        },
      },
    });
  </script>

⑥ 结果：

6）v-bind指令（设置元素的属性，属性都写在元素的内部）

v-bind：属性+表达式

① 作用：为元素绑定属性

② 简写直接省略v-bind，只保留 :属性名

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

④ 代码：

<body>
    <div id="app">
      <img v-bind:src="imgSrc" alt="" />
      <br />
      <!-- 更为常用 -->
      <img
        :src="imgSrc"
        alt=""
        :title="imgTitle+'!!!'"
        :class="isActive?'active':''"
        @click="toggleActive"
      />
      <br />
      <!-- 对象的写法
    :class="{active:isActive}" 意味着active的值取决于isActive
        -->
      <img
        :src="imgSrc"
        alt=""
        :title="imgTitle+'!!!'"
        :class="{active:isActive}"
        @click="toggleActive"
      />
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        imgSrc: "1.jpg",
        imgTitle: "玉桂狗",
        isActive: false,
      },
      methods: {
        toggleActive: function () {
          this.isActive = !this.isActive;
        },
      },
    });
  </script>

⑤ 结果：当鼠标移动到图片上时会有文字显示

7）v-for

① 根据数据生成列表结构

② 经常和数组结合使用

③ 语法是（item，index）in 数据名称（item代表每一项，index代表下标）

④ item和index可以结合其他的指令一起使用

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

⑥ 代码：

<body>
    <div id="app">
      <ul>
        <h2 v-for="(it,index) in arr">{{ index+1 }}.今天{{ it }}</h2>
      </ul>
      <button @click="add">添加蔬菜</button>
      <button @click="remove">删除蔬菜</button>
      <h2 v-for="item in vagetables" v-bind:title="item.name">{{item.name}}</h2>
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        arr: ["吃草莓!", "天气真好", "超happy!ovo"],
        vagetables: [
          { name: "土豆" },
          { name: "西红柿" },
          { name: "藕" },
          { name: "小白菜" },
        ],
      },
      methods: {
        add: function () {
          this.vagetables.push({ name: "茄子" });
        },
        remove: function () {
          this.vagetables.shift();
        },
      },
    });
  </script>

⑦ 结果：

8）v-model（双向数据绑定）

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

② 绑定的数据会和表单元素值相关联

③ 绑定的数据 <——> 表单元素的值

④ 代码：

<body>
    <div id="app">
      <input
        type="button"
        value="点击修改message"
        @click="setMessage('为什么会这么饿')"
      />
      <!-- 在文本框里输入文字后回车 -->
      <input type="text" v-model="message" @keyup.enter="getMessage" />
      <h2>{{ message }}</h2>
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "好饿",
      },
      methods: {
        getMessage: function () {
          alert(this.message);
        },
        setMessage: function (p1) {
          this.message = p1;
        },
      },
    });
  </script>
</html>

⑤ 结果：

三、axios与Vue

1.axios

① 必须先导入才能使用

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

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

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

⑤ 代码：

<body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
  </body>
  <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").then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.log(reason);
        }
      );
    };
    /*
    接口2：用户注册
    请求地址：https://autumnfish.cn/api/user/reg
    请求方法：post
    请求参数：username（用户名，字符串）
    响应内容：注册成功或失败
    */
    document.querySelector(".post").onclick = () => {
      axios
        .post("https://autumnfish.cn/api/user/reg", { username: "sehun" })
        .then(
          (value) => {
            console.log(value);
          },
          (reason) => {
            console.warn(reason);
          }
        );
    };
  </script>

⑥ 结果：

2.将axios和vue结合

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

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

③ 和本地应用的最大区别就是改变了数据来源

④ 代码：

<body>
    <div id="app">
      <input type="button" value="获取笑话" class="get" @click="getJoke" />
      <h2>{{joke}}</h2>
    </div>
  </body>
  <!-- 官网提供的axios在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <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 () {
          var that = this; //防止后序this发生改变
          axios.get("https://autumnfish.cn/api/joke").then(
            (value) => {
              that.joke = value.data;
            },
            (reason) => {
              console.warn(reason);
            }
          );
        },
      },
    });
  </script>

⑤ 结果：

四、案例

（一）本地应用-计算机案例

1.代码：

1）html结构和vue

<body>
    <!-- html结构 -->
    <div id="app">
      <!-- 计数器功能区域 -->
      <div class="input_num">
        <button class="left" @click="sub">-</button>
        <div class="center">{{ num }}</div>
        <button class="right" @click="add">+</button>
      </div>
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 编码 -->
  <script>
    //创建vue实例
    var app = new Vue({
      el: "#app",
      data: {
        num: 0,
      },
      methods: {
        add: function () {
          if (this.num < 10 && this.num >= 0) {
            this.num++;
          } else {
            alert("已经增加到达极限了哦！");
          }
        },
        sub: function () {
          if (this.num <= 10 && this.num > 0) {
            this.num--;
          } else {
            alert("已经减小到达极限了哦！");
          }
        },
      },
    });
  </script>

2）css样式

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .input_num {
        margin: 100px auto;
        display: flex;
        justify-content: space-between;
        width: 220px;
        height: 60px;
        line-height: 60px;
        border-radius: 5px;
        overflow: hidden;
      }
      .input_num .left,
      .input_num .right {
        display: inline-block;
        width: 70px;
        border: none;
        background-color: lightcoral;
        text-align: center;
        font-size: 18px;
      }
      .input_num .center {
        display: inline-block;
        text-align: center;
        width: 100px;
        background-color: pink;
        font-size: 20px;
      }

2.结果：

（二）本地应用-图片切换案例

1.代码：

1）html结构和vue

<body>
    <div id="app" class="box">
      <img :src="imgArr[index]" alt="" />
      <div class="pre" @click="prev" v-show="index != 0"></div>
      <div class="next" @click="next" v-show="index < imgArr.length - 1"></div>
    </div>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        imgArr: [
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201701%2F03%2F20170103130526_ytKBz.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=ebb1e89f026809c5c362b2846d807ba3",
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fcc1916b4-9768-cb53-1d67-e7b273f818cd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=cdb9cf0657407ef7f3c5670471b60faf",
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F3f05a7ae-521c-dc4b-c87a-69624597ec82%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=0388ae0caa02d4ebb7736fa622e5d3c3",
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F24%2F20210124164813_2296b.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=22ea13320dd525d8d8ac5c59a1b75573",
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F19%2F20200219234319_lccfj.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=47dbd2728ed6f82ca8f7b41b07f818ee",
        ],
        index: 0,
      },
      methods: {
        prev: function () {
          this.index--;
        },
        next: function () {
          this.index++;
        },
      },
    });
  </script>

2）css

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      position: relative;
      width: 800px;
      height: 600px;
      margin: 100px auto;
    }
    .box img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: inherit;
      height: inherit;
      object-fit: cover;
    }
    .box .pre,
    .box .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      z-index: 1;
      cursor: pointer;
      background-color: rgba(87, 85, 85, 0.4);
    }
    .box .pre {
      left: 10px;
    }
    .box .next {
      right: 10px;
    }

2.结果：

（三）本地应用-记事本案例

1.代码：

1）html结构和vue

  <body>
    <!-- 主体区域 -->
    <section id="app">
      <!-- 输入框 -->
      <header>
        <h1>小bin记事本</h1>
        <!-- v-model双向绑定数据 v-on为输入栏绑定事件 -->
        <input
          v-model="inputMes"
          @keyup.enter="add"
          class="search"
          type="text"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
        />
      </header>
      <div class="center">
        <ul>
          <!-- v-for 根据数组生产列表结构
          mouseover：鼠标移入事件 mouseleave：鼠标移出事件
          -->
          <li
            v-for="(item,index) in list"
            @mouseover="isShow"
            @mouseleave="noShow"
          >
            <div class="center_id">{{ index+1 }}</div>
            <div class="center_mess">{{item}}</div>
            <div class="center_r" v-show="show" @click="remove(index)">×</div>
          </li>
        </ul>
      </div>
      <!-- 底部 -->
      <!--没有数据时，隐藏 底部footer或者只隐藏里面的子盒子-->
      <footer>
        <div class="footer_left" v-if="list.length != 0">
          <!-- 通过lenth方法获取数组长度 -->
          <span>{{list.length}}</span> &nbsp;items left
        </div>
        <div class="footer_right" @click="clear" v-show="list.length != 0">
          Clear
        </div>
      </footer>
    </section>
  </body>
  <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        list: [
          "雨下整夜我的爱",
          "溢出就像雨水",
          "院子落叶",
          "和我的思念",
          "厚厚一叠",
        ],
        inputMes: "",
        show: false,
      },
      methods: {
        add: function () {
          this.list.push(this.inputMes);
        },
        //是否显示 x 符号
        isShow: function () {
          this.show = true;
        },
        noShow: function () {
          this.show = false;
        },
        remove: function (index) {
          this.list.splice(index, 1);
          //index代表删第几个 1代表删一次
        },
        clear: function () {
          this.list = [];
        },
      },
    });
  </script>

2）css样式

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      header {
        margin: 0px auto;
        width: 400px;
        height: 150px;
        margin-top: 100px;
      }
      header h1 {
        height: 100px;
        font-size: 46px;
        font-family: serif;
        line-height: 100px;
        text-align: center;
        background-color: #fff;
      }
      header .search {
        height: 50px;
        width: 400px;
        font-size: 14px;
        text-indent: 1em;
        border: 0.5px solid #bdbdbb;
        outline: none;
      }
      .center {
        margin: 0 auto;
        width: 400px;
        min-height: 0px;
        border: 1px solid #bdbdbd;
        border-top: none;
        border-bottom: none;
      }
      .center li {
        border-bottom: 1px solid #bdbdbd;
        width: 400px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-family: "Fangsong";
        cursor: pointer;
      }

      footer {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 400px;
        height: 50px;
        font-size: 15px;
        line-height: 50px;
        color: #797878;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        border: 1px solid #bdbdbd;
        border-top: none;
      }
      footer .footer_left {
        width: 170px;
        text-align: left;
        padding-left: 25px;
      }
      footer .footer_right {
        cursor: pointer;
        font-size: 18px;
        width: 70px;
        border-left: 1px solid #bdbdbd;
        border-top: none;
        text-align: center;
      }
      .center .center_id {
        display: inline-block;
        width: 60px;
        text-align: center;
      }
      .center .center_mess {
        display: inline-block;
        width: 260px;
        text-align: left;
        font-size: 24px;
        font-weight: 500;
      }
      .center .center_r {
        display: inline-block;
        width: 60px;
        text-align: center;
        font-size: 14px;
      }
    </style>

2.结果：

（四）网络应用-天气查询案例

1.代码：

1）html结构

    <!-- 1.开发环境版本，包含了有帮助的命令警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app" class="app">
      <h1 class="header">天 气 预 报</h1>
      <main>
        <input
          type="text"
          v-model="city"
          @keyup.enter="searchWeather"
          placeholder="请输入查询城市"
          class="search"
        />
        <input class="btn" type="button" value="搜 索" />
        <div class="main_city">
          <span @click="changeCity('北京')">北京</span>
          <span @click="changeCity('上海')">上海</span>
          <span @click="changeCity('广州')">广州</span>
          <span @click="changeCity('深圳')">深圳</span>
        </div>
      </main>
      <footer>
        <ul>
          <li v-for="item in weatherList">
            <div class="li_top">{{ item.type }}</div>
            <div class="li_center">{{ item.low }} ~ {{ item.high }}</div>
            <div class="li_bot">{{ item.date }}</div>
          </li>
        </ul>
      </footer>
    </div>
  </body>
  <script src="17.main.js"></script>

2）css样式

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      .app {
        width: 900px;
        height: 470px;
        margin: 200px auto;
      }
      .app h1 {
        height: 110px;
        line-height: 110px;
        text-align: center;
        font-size: 50px;
        font-family: cursive;
      }
      .app main {
        position: relative;
        margin: 0 auto;
        width: 800px;
        height: 80px;
      }
      main .search {
        position: absolute;
        top: 0;
        left: 0;
        width: 690px;
        height: 50px;
        font-size: 15px;
        border: none;
        border: 1px solid rgb(75, 165, 201);
        border-right: none;
        text-indent: 1em;
        outline: none;
      }
      main .btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 50px;
        width: 110px;
        border: none;
        background-color: rgb(75, 165, 201);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
      main .main_city {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
      }
      .main_city span {
        margin: 0 10px 0 0;
        color: gray;
        cursor: pointer;
      }
      .app footer {
        width: inherit;
        height: 170px;
        margin-top: 80px;
      }
      footer li {
        display: inline-block;
        width: 180px;
        height: inherit;
      }
      li .li_top {
        width: inherit;
        height: 70px;
        font-size: 36px;
        text-align: center;
        line-height: 70px;
        color: orange;
      }
      li .li_center {
        width: inherit;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: orange;
        font-size: 14px;
        font-weight: 600;
      }
      li .li_bot {
        width: inherit;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: gray;
        font-size: 14px;
      }
    </style>

3）vue

/**
 * 请求地址：http://wthrcdn.etouch.cn/weather_mini
 * 请求方法：get
 * 请求参数：city（城市名）
 * 相应内容：天气信息
 *
 * 1. 点击回车
 * 2. 查询数据
 * 3. 渲染数据
 *
 * ① 应用的逻辑代码建议与页面分离，使用单独的js文件编写
 * ② axios回调函数中this指向改变了，需要额外保存this
 * ③ 服务器返回的数据比较复杂时，获取时要注意层级结果
 *
 *
 * ① 自定义参数可以让代码的复用性更高
 * ② methods中定义的方法内部，可以通过this关键字点出其他的方法
 */
var app = new Vue({
  el: "#app",
  data: {
    city: "",
    weatherList: [],
  },
  methods: {
    searchWeather: function () {
      //调用接口
      //保存this
      var that = this;
      axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=" + that.city)
        .then((value) => {
          that.weatherList = value.data.data.forecast;
        })
        .catch((reason) => {
          console.warn(reason);
        });
    },
    changeCity: function (city) {
      this.city = city;
      this.searchWeather();
    },
  },
});

2.结果：

#END（具体可观看b站黑马vue入门版）

逃逃日塔灰

关注

10
点赞
踩
36

收藏

觉得还不错? 一键收藏
2
评论
Vue笔记（完结版）

目录一、Vue简介二、Vue基本知识（一）简单知识（二）本地应用（指令）三、axios与Vue四、案例（一）本地应用-计算机案例（二）本地应用-图片切换案例（三）本地应用-记事本案例（四）网络应用-天气查询案例#END（具体可观看b站黑马vue入门版）一、Vue简介1.JavaScript框架2.简化Dom操作3.响应式数据驱动4.Vue实例的作用范围是什么？Vue会管理el选项命中的元素及其内部的子元素5.是否可以使用其他的选择器？.
复制链接

扫一扫

专栏目录