vue4小时速成课

概述

学习vue的目的主要是为了完成毕业设计的前端页面编写，所以学的比较粗糙，主要是为了vue入门，观看的教学链接是：
黑马程序员vue前端基础教程-4个小时带你快速入门vue
【狂神说Java】Vue最新快速上手教程通俗易懂

一、vue基础

1. vue简介

  • 一个js框架
  • 简化Dom操作
  • 响应式数据驱动
    数据发生变化，则页面上的数据显示也会随之发生变化。

2. 第一个vue程序

vue官方文档：https://cn.vuejs.org/
开发工具： webstorm

步骤

  1. 导入vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  1. 创建vue实例对象，设置el、data属性
  • el：选择元素
    本例选择id为app的元素。
  • data：vue实例使用的数据
    本例包含一个值为’Hello Vue!'的message变量。
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
  1. 使用vu提供的模板语法渲染数据
    {{}}用于获取vue实例中的数据，使用方式{{变量名}}。
	<div id="app">
        {{ message }}
    </div>

first_demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue程序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>

网页效果
第一个vue程序

3. el挂载点

  1. 作用范围
    data作用域范围在el挂载点命中标签的内部。
  2. 选择器
    可以使用选择器，但是推荐id选择器。
  3. 支持标签
    除了body、html以外，所有的双标签都支持挂载。

el挂载点.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el挂载点</title>
</head>
<body>
{{message}}
    <div class="app">
        {{message}}
        <span>
            {{message}}
        </span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        // el: '#app',
        el: '.app',
        data: {
            message: '秋秋要加油呀'
        }
    })
</script>
</html>

网页效果
el挂载点

4. data数据对象

  1. 简单对象
    {{变量名}}
  2. 复杂对象
    {{对象名.变量名}}
  3. 数组
    {{数组名[下标]}}

data数据对象.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data数据对象</title>
</head>
<body>
<div id="app">
    {{message}}
    <h2>{{school.name}} {{school.mobile}}</h2>
    <ul>
        <li>{{compus[0]}}</li>
        <li>{{compus[1]}}</li>
        <li>{{compus[2]}}</li>
        <li>{{compus[3]}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: '秋秋要加油呀！',
            //对象
            school:{
                name: "chocho",
                mobile: '123456'
            },
            //数组
            compus:['航空港', '龙泉', '人南', '青羊']
        }
    })
</script>
</body>
</html>

网页效果
data数据对象

二、本地应用

vue网页效果不是使用操作dom元素实现的，而是使用vue指令实现。

1. v-text

  1. 作用
    设置标签文本值。
  2. 使用
  • 添加属性的方式
<h2 v-text="变量名"></h2>
  • 插值表达式方式
<h2>{{变量名}}</h2>
  • 拼接的方式
<h2 v-text="变量名+‘chocho’"></h2>
<h2>{{变量名+‘chocho’}}</h2>

data数据对象.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-text="message + '@'">xyg</h2>
        <h2 v-text="info + '@'">xyg</h2>
        <h2>{{info + '@'}}xyg</h2>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '秋秋要加油呀!',
            info: '梦公主好帅鸭！'
        }
    })
</script>
</html>

网页效果
v-text

2. v-html

  1. 作用
    设置标签的innerHTML。
  2. 使用
    若需要在内部渲染html效果，使用v-html；若不需要渲染html效果，则使用v-text。

data数据对象.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //content: '秋秋要加油呀!'
            content: '<a href="http://www.baidu.com">百度</a>'
        }
    })
</script>
</html>

网页效果
v-html

3. v-on

  1. 作用
    为元素绑定事件。
  2. 使用
    在需要绑定事件的元素上添加属性v-on，指明事件与对应的方法：
<input type='button' value='xxx' v-on:click='方法'>
<input type='button' value='xxx' v-on:mouseenter='方法'>
<input type='button' value='xxx' v-on:dbclick='方法'>

<!--其中v-on:可以使用@替换-->
<input type='button' value='xxx' @click='方法'>
<input type='button' value='xxx' @mouseenter='方法'>
<input type='button' value='xxx' @dbclick='方法'>

方法写在vue实例的methods属性中：

var app = new Vue({
        el: '#app',
        data: {},
        methods:{
        	doIt: function(){
        		//函数逻辑
        	}
        }
    })

v-on.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--传递自定义参数，事件修饰符 -->
        <input type="button" value="v-on指令" @click="doIt(666)">
        <input type="text" @keyup.enter="sayHi">
        <!--vue修改数据方式：this.变量名-->
        <h2 @click="changeFood">{{food}}</h2>


    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            food: "可乐鸡翅"
        },
        methods:{
            doIt: function (p1) {
                alert("做It" + p1);
            },
            changeFood: function () {
                console.log(this.food);
                this.food += "好好吃！";
            },
            sayHi: function () {
                alert("吃了没？");
            }
        }
    })
</script>
</html>

网页效果
v-on
事件修饰符
传递参数

4. 计数器

  1. 功能
    如图所示，
    计数器

  2. 功能分析
    点击左侧，则数字-1，若数字=0，则提示不能再减少了。
    点击右侧，则数字+1。
    使用vue实现，只需要对左右两侧绑定点击事件，当点击左侧，则将data中的变量-1，vue会自动渲染到页面上，若数字=0，则提示信息；当点击右侧，则将data中的变量+1。

  3. 代码实现
    计数器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--计数器功能区-->
        <div class="input-num">
            <button @click="sub">  -  </button>
            <span>{{num}}</span>
            <button @click="add">  +  </button>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            //加法
            add: function () {
                //console.log("add");
                if(this.num < 10){
                    this.num++;
                }else {
                    alert("最大值啦！")
                }
            },
            //减法
            sub: function () {
                //console.log("sub");
                if(this.num > 0){
                    this.num--;
                }else {
                    alert("最小值啦！")
                }
            }
        }
    })
</script>
</html>

网页效果
计数器效果

5. v-show

  1. 作用
    根据表达式真假，对元素进行显示和隐藏。
    *通过操纵元素样式（display:none;）来实现显示/隐藏

  2. 代码实现
    v-show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="和公主躲猫猫！" @click="changeIsShow">
        <img src="./img/梦公子.jpg" alt="" v-show="isShow" style="width: 200px">
        <img src="./img/梦公子.jpg" alt="" v-show="age>=18" style="width: 200px">
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 19
        },
        methods:{
            changeIsShow: function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</html>

网页效果
v-show

6. v-if

  1. 作用
    根据表达式真假，对元素进行显示和隐藏。
    *通过操纵dom元素来实现显示/隐藏。
    *由于操纵dom元素消耗较大，因此如果是需要频繁切换的元素，则使用v-show，反之使用v-if。

  2. 代码实现
    v-if.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="和公主躲猫猫！" @click="changeIsShow">
    <img src="./img/梦公子.jpg" alt="" v-if="isShow" style="width: 200px">
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false,
        },
        methods:{
            changeIsShow: function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</html>

网页效果v-if

7. v-bind

  1. 作用
    动态设置元素的属性。

  2. 代码实现
    v-bind.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        /*设置样式*/
        .active{
            border: 1px solid purple;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="" style="width: 200px">
        <!--v-bind:简写为:-->
        <img :src="imgSrc" alt="" style="width: 200px" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: './img/梦公子.jpg',
            imgTitle: '梦公子',
            isActive: false
        },
        methods:{
            toggleActive: function () {
                this.isActive = !this.isActive;
            }
        }
    })
</script>
</html>

网页效果
v-bind

8. 图片切换

  1. 功能
    用户点击左右切换图片，当切换到最左侧/右侧图片时，则隐藏箭头。

  2. 功能分析
    点击切换图片的本质是改变的图片src属性，图片的地址使用数组存储；显示以及隐藏图片则是对箭头的display进行操作。

  3. 代码实现

图片切换.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="center">
            <h2 class="title">梦公主</h2>
            <!--左箭头-->
            <span @click="prev" v-show="index!=0"> < </span>
            <!--图片-->
            <img :src="imgArr[index]" alt="" style="width: 200px">
            <!--右箭头-->
            <span @click="next" v-show="index<imgArr.length-1"> > </span>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgArr: [
                "./img/梦.jpg",
                "./img/梦1.jpg",
                "./img/梦2.jpg",
                "./img/梦3.jpg",
                "./img/梦4.jpg",
                "./img/梦公子.jpg"
            ],
            index: 0
        },
        methods:{
            //上一张
            prev: function () {
                this.index--;
                //console.log(this.index);
            },
            //下一张
            next: function () {
                this.index++;
                //console.log(this.index);
            }
        }
    })
</script>
</html>

网页效果
图片切换

9. v-for

  1. 作用
    根据数据生成列表结构。

  2. 代码实现
    v-for.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!--循环的是li标签，因此v-for添加在这里-->
            <li v-for="(item,index) in arr" :title="item">
                【{{index+1}}】{{item}}
            </li>

            <input type="button" @click="add" value="添加数据">
            <input type="button" @click="remove" value="删除数据">
            <h2 v-for="(item,index) in objArr">
                我叫{{item.name}}
            </h2>
        </ul>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: [1, 2, 3, 4, 5],
            objArr:[
                {name:"chocho"},
                {name:"anchor"}
            ]
        },
        methods:{
            //增加数据
            add: function () {
                this.objArr.push({name:"xyg"});
            },
            //删除数据
            remove: function () {
                //默认移除第一个元素
                this.objArr.shift();
            }
        }
    })
</script>
</html>

网页效果
v-for

10. v-model

  1. 作用
    双向数据绑定（需要和表单元素一起使用）。
  2. 代码实现
    v-model.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="修改数据" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "chocho"
        },
        methods:{
            getM: function () {
                alert(this.message);
            },
            setM: function () {
                this.message = "哎呀哎呀";
            }
        }
    })
</script>
</html>

网页效果
set
get

8. 小黑记事本

  1. 功能
  • 新增回车新增事件
  • 显示显示事件列表
  • 删除点击删除事件
  • 统计事件条数显示
  • 清空清空事件， 隐藏且会隐藏底部标签
  1. 功能分析
  • 新增+显示
    生成列表结构（v-for+数组）
    获取用户输入（v-model）
    回车新增数据（v-on.enter）
  • 删除
    点击删除指定内容（v-on+splice）
  • 统计
    统计数据个数（数组长度v-text）
  • 清空
    清空所有数据（v-on+清空数组）
  • 隐藏
    当页面没有数据时隐藏（v-if/v-show）
  1. 代码实现
    小黑记事本.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小黑记事本</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!--主体区域-->
    <section id="todoapp">
        <!--输入框-->
        <header class="header">
            <h1>小黑记事本</h1>
            <input type="text" 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 for="">{{item}}</label>
                        <button @click="remove(index)" class="destroy">x</button>
                    </div>
                </li>
            </ul>
        </section>
        <!--统计和清空-->
        <footer v-if="list.length>0" class="footer">
            <span class="todo-count">
                <strong>{{list.length}}</strong>条
            </span>
            <button class="clear-completed" @click="clearArr">Clear</button>
        </footer>
    </section>

    <!--底部-->
    <footer class="info"></footer>
</body>
<script>
    var app = new Vue({
        el: '#todoapp',
        data: {
            list: ["写代码", "微服务", "打豆豆", "撸猫"],
            inputValue: "认真吃饭，好好生活"
        },
        methods:{
            //新增
            add: function () {
                this.list.push(this.inputValue);
            },
            remove: function (index) {
                //console.log("删除");
                this.list.splice(index, 1);
            },
            clearArr: function () {
                this.list = [];
            }
        }
    })
</script>
</html>

网页效果

  • 新增+显示+删除+统计
    记事本
  • 清空+隐藏
    记事本

三、网络应用

1. axios基本使用

  1. 作用
    网络请求库。
  2. 使用方法
//引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//get请求
//第一个回调函数在请求响应后触发
//第二个回调函数在请求失败后触发
axios.get(地址?参数).then(function(response){},function(err){})

//post请求
axios.post(地址,参数对象).then(function(response){},function(err){})
  1. 代码实现
    axios.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<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:随机笑话
    请求地址: http://localhost:8080/api/joke/list
    请求方法:get
    请求参数:num(笑话条数,数字)
    响应内容:随机笑话
    */
    document.querySelector(".get").onclick = function () {
        axios.get("http://localhost:8080/api/joke/list?num=1")
        .then(function (response) {
            console.log(response.data);
        }, function (error) {
            console.log("失败了");
            console.log(error);
        });
    },
    /*
    接口2:用户注册
    请求地址:http://localhost:8080/api/user/reg
    请求方法:post
    请求参数:username(用户名，字符串)
    响应内容:注册成功或失败
    */
    document.querySelector(".post").onclick = function () {
        axios.post("http://localhost:8080/api/user/reg",
                {username: "chocho"})
        .then(function (response) {
            console.log(response.data);
        }, function (error) {
            console.log("失败了");
            console.log(error);
        });
    }
</script>
</html>

Java后端：接口

package com.chocho.webcompilecore.controller;

import com.chocho.webcompilecore.util.Msg;
import org.springframework.web.bind.annotation.*;

/**
 * Created by chocho on 2022/1/24.
 */
@RestController
@RequestMapping("/api")
public class VueTestController {

    @GetMapping("/joke/list")
    public Msg getJokeList(@RequestParam("num") Integer num){
        if(num <= 0){
            return Msg.fail();
        }
        String jokes[] = new String[num];

        for(int i = 0; i < num; i++){
            jokes[i] = "讲个笑话" + i;
        }

        return Msg.success().add("jokes", jokes);
    }

    @PostMapping("/user/reg")
    public Msg register(@RequestBody String username){
        
        if(username == null || "".equals(username)){
            return Msg.fail();
        }else{
            return Msg.success();
        }
    }
}

Java后端解决跨域问题

package com.chocho.webcompilecore.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 实现基本的跨域请求
 * Created by chocho on 2022/1/25.
 */
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

网页效果
axios

2. axios+vue

  1. 注意事项
  • axios中的this已经改变，因此需要先将this存在that中，再调用axios，这样后面的数据访问才不会出错。
  1. 代码实现
    axios_vue.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios_vue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            joke: "很好笑的笑话"
        },
        methods:{
            /*
            接口3:随机笑话
            请求地址:http://localhost:8080/api/joke
            请求方法:get
            请求参数:无
            响应内容:一条随机笑话
            */
            getJoke: function () {
                var that = this;
                //在axios中this改变了
                axios.get("http://localhost:8080/api/joke")
                    .then(function (response) {
                        //console.log(response.data.data.joke);
                        that.joke = response.data.data.joke;
                    }, function (error) {

                    })
            }
        }
    })
</script>
</html>

网页效果
随机笑话

3. 天知道

  1. 功能
    天知道
  • 回车查询
    输入城市查询天气
  • 点击查询
  1. 功能分析

  • 回车查询
    用户输入城市名称（v-model）
    回车发送查询到服务器（@keyup.enter+axios.get）
    服务器返回天气渲染页面（v-for）

  • 点击查询
    点击事件（@click）
    查询数据
    渲染数据

  1. 代码实现
    main.js
/*
    接口:天气
    请求地址:http://localhost:8080/api/weather
    请求方法:get
    请求参数:city
    响应内容:天气信息

    1、点击回车
    2、查询数据
    3、渲染数据
*/
var app = new Vue({
    el: '#app',
    data: {
        city: "",
        weatherList: []
    },
    methods:{
        searchWeather: function () {
            var that = this;
            //console.log("天气查询");
            axios.get("http://localhost:8080/api/weather?city=" + this.city)
                .then(function (response) {
                    //console.log(response.data);
                    that.weatherList = response.data.data.weatherList;
                }).catch(function (error) {

            })
        },
        changeCity: function (city) {
            //1.修改城市
            this.city = city;
            //2.查询天气
            this.searchWeather();
        }
    }
})

天知道.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天知道</title>
</head>
<body>
    <div id="app">
        <div class="search_form">
            <div class="form_group">
                <input v-model="city" @keyup.enter="searchWeather" type="text" class="input_txt" placeholder="请输入查询的天气">
                <button class="input_sub">搜索</button>
            </div>
            <div class="hot_key">
                <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>
        </div>
        <ul class="weather_list">
            <li v-for="w in weatherList">
                <div class="info_type"><span class="iconfont">{{w.type}}</span></div>
                <div class="info_temp">
                    <b>{{w.low}}</b>~<b>{{w.high}}</b>
                </div>
                <div class="info_date"><span>{{w.date}}</span></div>
            </li>
        </ul>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--自定义js-->
<script src="./js/main.js"></script>
</html>

网页效果
天知道

四、vue进阶学习

1、计算属性computed

  1. 作用
    computed，使用vm.属性名调用，用于将不经常变化的计算结果缓存起来，以节约系统开销。
    注意：methods与computed中的方法名重名，则优先运行methods中的方法。

2、插槽slot（*不建议学）

  1. 定义
    用于实现动态网页。

  2. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽slot</title>
</head>
<body>
    <div id="app">
        <todo>
            <todo-p slot="todo-p" :title="title"></todo-p>
            <todo-li slot="todo-li" v-for="item in todoItems" :item="item"></todo-li>
        </todo>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //定义vue组件
    Vue.component("todo", {
        //模板
        template: '<div>\
                        <slot name="todo-p"></slot>\
                        <ul>\
                            <slot name="todo-li"></slot>\
                        </ul>\
                    </div>'
    });

    //数据组件
    Vue.component('todo-p', {
        props: ['title'],
        template: '<p>{{title}}</p>'
    });
    Vue.component('todo-li', {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: '书籍列表',
            todoItems: ['Java', 'Linux', 'Python']
        }
    });
</script>
</html>
# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue