Js全栈开发之Vue简单综合实例

Vue简单综合实例

继续上一篇《Js全栈开发之Vue入门基础》，这篇主要摘抄几个比较好的vue.js简单的综合实例，来加强巩固上一篇总结的vue基础入门知识。

1. 简易计数器

<div id="app">
  <!-- 计数器 -->
  <div class="input-num">
    <button @click="sub">-</button>
    <span>{{ num }}</span>
    <button @click="add">+</button>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1,
      min: 0,
      max: 10
    },
    methods: {
      sub() {
        if (this.num > this.min) {
          this.num--;
        } else {
          alert("别点啦,到底啦");
        }
      },
      add() {
        if (this.num < this.max) {
          this.num++;
        } else {
          alert("别点啦,到头啦");
        }
      }
    }
  });
</script>

2. 图片切换

<div id="mask">
  <div class="center">
    <img :src="imgList[index]" alt="" />
    <a href="javascript:void(0)" @click="prev"class="left" v-show="index>0">
      <img src="./images/prev.png" alt="" />
    </a>
    <a href="javascript:void(0)" @click="next" class="right" v-show="index>
      <img src="./images/next.png" alt="" />
    </a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#mask",
    data: {
      imgList: [
        "./images/00.jpg",
        "./images/01.jpg",
        "./images/02.jpg",
        "./images/03.jpg",
      ],
      index: 0
    },
    methods: {
      // 上一张
      prev() {
        this.index--;
      },
      // 下一张
      next() {
        this.index++;
      }
    }
  });
</script>

3. TodoList记事本

<!-- 主体区域 -->
<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" v-show="list.length!=0">
    <span class="todo-count" v-if="list.length!=0">
      <strong>{{ list.length }}</strong> items left
    </span>
    <button v-show="list.length!=0" class="clear-completed" @click="clear">
      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>
  var app = new Vue({
    el: "#todoapp",
    data: {
      list: ["写代码", "吃饭饭", "睡觉觉"],
      inputValue: "好好学习,天天向上"
    },
    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>

4. 天气查询

<div class="wrap" id="app">
  <div class="search_form">
    <div class="form_group">
      <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" />
      <button class="input_sub" @click="queryWeather">
        搜 索
      </button>
    </div>
    <div class="hotkey">
      <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
    </div>
  </div>
  <ul class="weather_list">
    <li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
      <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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      city: "武汉",
      forecastList: [],
      hotCitys: ["北京", "上海", "广州", "深圳"]
    },
    methods: {
      queryWeather() {
        this.forecastList = [];
        axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
          	 .then(res => {
	            console.log(res);
	            this.forecastList = res.data.data.forecast;
	          })
          	.catch(err => {
            	console.log(err);
          	})
          	.finally(() => { });
      },
      clickSearch(city) {
        this.city = city;
        this.queryWeather();
      }
    }
  });
</script>