Vue案例

最新推荐文章于 2024-12-23 11:45:05 发布

转载最新推荐文章于 2024-12-23 11:45:05 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://edu.lagou.com/

文章标签：

#vue #js #java

JAVA单体架构项目案例介绍专栏收录该内容

25 篇文章

订阅专栏

1.实现简单记事本

1.1 功能

1.1.1 新增内容

步骤
1）生成列表结构(v-for 数组)
2）获取用户输入(v-model 双向绑定)
3）回车,新增数据(v-on .enter事件修饰符)
4）页面布局不熟悉,可以通过审查元素的方式快速找到元素

1.1.2 删除内容

步骤
1）点击删除指定的内容( 根据索引删除元素)
2）在methods中添加一个删除的方法,使用splice函数进行删除

1.1.3 统计操作

步骤
1）统计页面信息的个数,就是列表中的元素的个数.
2）获取 list数组的长度,就是信息的个数

1）基于数据的开发方式
2）v-text设置的是文本,可以使用简化方式 {{}}

1.1.4 清空数据

步骤:
1）点击清除所有信息
2）本质就是清空数组

<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>
    <!-- VUE示例接管区域 -->
    <section id="app">
      <!-- 输入框 -->
      <header class="header">
        <h1>VUE记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="输入日程"
          class="new-todo"
          v-model="inputValue"
          @keyup.enter="add"
        />
      </header>

      <!-- 列表区域 -->
      <section class="main">
        <ul class="listview">
          <!-- 1.使用v-for指令 生成列表结构 -->
          <li class="todo" v-for="(item,index) in list">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{item}}</label>
              <!-- 2.删除操作 传递index -->
              <button class="destroy" @click="remove(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count">
          <strong>{{list.length}}</strong> items left
        </span>
        <button class="clear-completed" @click="clear()">
          Clear
        </button>
      </footer>
    </section>
  </body>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        list: ["写代码", "吃饭", "睡觉", "打豆豆"],
        inputValue: "996还是997",
      },
      methods: {
        //新增日程方法
        add: function () {
          //将用户输入的内容添加到list
          this.list.push(this.inputValue);
        },
        remove: function (index) {
          console.log(index);
          //使用 splice(元素的索引,删除几个)
          this.list.splice(index, 1);
        },
        //清空操作
        clear: function () {
          this.list = [];
        },
      },
    });
  </script>
</html>

2.天气查询案例

2.1 需求分析

功能分析: 回车查询
输入内容,点击回车 (v-on.enter)
访问接口,查询数据 (axios v-model)
返回数据,渲染数据

2.2 接口文档

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

请求参数:city (要查询的城市名称)

响应内容:天气信息

main.js

/**
 * 
 *  请求地址:http://wthrcdn.etouch.cn/weather_mini
    请求方法:get
    请求参数:city (要查询的城市名称)
    响应内容:天气信息
 */

var VM = new Vue({
  el: "#app",
  data: {
    city: "",
    //定义数组保存 天气信息
    weatherList: [],
  },
  //编写查询天气的方法
  methods: {
    searchWeather: function () {
      console.log("天气查询");
      console.log(this.city);

      var that = this;

      //调用接口
      axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(
        function (resp) {
          console.log(resp.data.data.forecast);
          //获取天气信息 保存到weatherList
          that.weatherList = resp.data.data.forecast;
        },
        function (error) {}
      );
    },
  },
});

天气案例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" />

    <style>
      /*
        1.应用的逻辑代码 建议与页面进行分离,使用单独的JS编写
        2.axios中 回调函数中的this 需要先保存 再使用
        3.服务器返回的数据比较复杂,获取数据的时候 要注意层级结构
      */
      [v-cloak]{
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="wrap" id="app" v-cloak>
      <div class="search_form">
        <div class="logo">天气查询</div>
        <div class="form_group">
          <input
            type="text"
            class="input_txt"
            placeholder="请输入要查询的城市"
            v-model="city"
            @keyup.enter="searchWeather"
          />
          <button class="input_sub">回车查询</button>
        </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>

2.3 案例总结

1）应用的逻辑代码,建议与页面进行分离,使用单独的JS编写
2）axios回调函数中的 this的指向改变,无法正常使用, 需要另外保存一份
3）服务器返回的数据比较的复杂时,获取数据时要注意层级结构

2.4 解决页面闪烁问题

我们发现访问天气预报案例页面时, 使用插值表达式的地方出现了闪烁问题,如何解决呢

v-cloak指令

作用: 解决插值表达式闪烁问题

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

1）添加样式

<style>

/* 通过属性选择器,设置添加了v-cloak */ [v-cloak] {

display: none;

}

</style>

2）在id为app的div中添加 v-cloak

<div class="wrap" id="app" v-cloak>

3.案例监听姓名变化,实时显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <label>名:<input type="text" v-model="fristName" /></label>
      <label>姓:<input type="text" v-model="lastName" /></label>
      {{fullNameComputed}}
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      el: "#app",
      data: {
        fristName: "",
        lastName: "",
        fullName: "",
      },
      //侦听器
      watch: {
        fristName: function (nval, oval) {
          //参数 1.新值,2.旧值
          this.fullName = nval + " " + this.lastName;
        },
        lastName: function (nval, oval) {
          this.fullName = this.fristName + " " + nval;
        },
      },
    });
  </script>
</html>

节选自拉钩教育JAVA系列教程