Vue基础

前端技术
Word count: 4.3k   |   Reading time≈ 23 min

前导知识：html，css，js，ajax

Vue入门

1.简介

1、js框架

2、简化DOM操作

3、响应式数据驱动

2.第一个vue程序

官网文档

在html文件中导入生产环境版本的包

  • 导入开发版本Vue.js
  • 创建Vue实例对象，设置el属性和data属性
  • 使用简单的模板语法把数据渲染到页面上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基础</title>
</head>
<body>
<div id = "app">
    {{ message }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>
</body>
</html>

推荐使用id选择器，开发时唯一。支持双标签。可以使用其他双标签，不能使用html和body

data：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data数据对象</title>
</head>
<body>
<div id = "app">
    {{ message }}
    <h2>{{school}}</h2>
    <h2>{{school.name}} {{school.address}}</h2>
    <p>{{campus}}</p>
    <ul>
        <li>{{campus.[0]}}</li>
        <li>{{campus.[1]}}</li>
    </ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"你好小黑",
            school:{
                name:"小黑",
                mobile:"15736734",
                address:"上海市普陀区",
            },
            campus:["北京社区","上海社区"],
        }
    })
</script>
</body>
</html>

本地应用

  • 内容绑定，事件绑定
    • v-text
    • v-html
    • v-on
  • 显示切换，属性绑定
    • v-show
    • v-if
    • v-bind
  • 列表循环，表单元绑定
    • v-for
    • v-on补充
    • v-model

1.v-text

  • 设置标签的内容
  • 默认全部替换，部分替换使用差值表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
</head>
<body>
    <div id="app">
        <h2 v-text = "message+'!'">上海</h2>
        <h2 v-text = "info">上海</h2>
<!--部分替换-->
        <h2>{{message}}深圳</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"二狗",
            info:"我也不知道要干嘛"
        }
    })
</script>
</body>
</html>

2.v-html

  • 设置元素的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text只会解析成文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
    <div id = "app">
        <p v-html = "content"></p>
        <p v-text = "content"></p>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            //content:"你好呀小黑"
            content:"<a href='https://victor-huihui.gitee.io'>Blog Victor</a>"
        }
    })
</script>
</body>
</html>

3.v-on

  • 为元素绑定事件
  • 事件名不需要写on
  • 指令简写为@
  • 绑定的方法定义在mrthods属性中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
    <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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"海底捞很好7"
        },
        methods:{
            doIt:function () {
                alert("您配吗");
            }
        },
        changeFood:function () {
            this.food+="，那您多吃点8"
        }
    })
</script>
</body>
</html>

4.计数器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
    <div id = "app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
        <img src="http://www.itheima.com/images/logo.png" alt="">
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            add:function () {
                if(this.num<10){
                    this.num++;
                }else {
                    alert("不能再加了");
                }
            },
            sub:function () {
                if(this.num>1){
                    this.num--;
                }else {
                    alert("不能再减了啊！")
                }
            },
        }
    })
</script>
</body>
</html>

5.v-show

  • 修改元素的显示状态
  • 原理是修改display实现显示隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
</head>
<body>
    <div id = "app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="./1183257.png">
        <img v-show="age>=18" src="./1183257.png">
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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>
</body>
</html>

6.v-if

  • 根据表达式真假切换显示状态
  • 本质操纵DOM元素切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
    <div id = "app">
        <input type="button" value="点击显示" @click="toggleIsShow">
        <p v-if="isShow">王二狗</p>
        <p v-show="isShow">王三狗 v-show修饰</p>
        <h2 v-if="temperature>=35">热死了</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            temperature:20
        },
        methods:{
            toggleIsShow:function () {
                this.isShow=!this.isShow;
            }
        },
    })
</script>
</body>
</html>

7.v-bind

  • 为元素绑定属性
  • 完整写法：v-bind:属性名
  • 简写只保留 ：属性名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active{
            border: 1px solid cornflowerblue;
        }
    </style>
</head>
<body>
    <div id = "app">
        <img v-bind:src="imgSrc" alt="太帅无法显示"><br>
        <img :src = "imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?active:''" @click="toggleActive">
        <img :src = "imgSrc" alt="" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            imgSrc:"http://www.itheima.com/images/logo.png",
            imgTitle:"小黑本人",
            isActive:false
        },
        methods: {
            toggleActive:function () {
                this.isActive=!this.isActive;
            }
        },
    })
</script>
</body>
</html>

8.v-for

  • 根据数据生成列表结构
  • 数组和v-for结合
  • (item,index) in 数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}}item:{{item}}</li>
        </ul>
        <h2 v-for="item in vegetables">{{item.name}}</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            arr:["普陀区","静安区","宝山区"],
            vegetables:[
                {name:西蓝花},
                {name:茄子}
            ]
        },
    })
</script>
</body>
</html>

9.v-on补充

  • 事件绑定写成函数调用的形式，可以传入自定义参数
  • 定义方法时定义形参接收传入的参数
  • 时间后面跟上.修饰符可以对时间进行限制
  • .enter为回车
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on补充</title>
</head>
<body>
    <div id="app">
        <input type="button" value="别点啊" @click="doIt(666,'老铁')">
        <input type="text"  @keyup.enter="sayHi">
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function (p1,p2) {
                alert("别学IT啊兄弟");
                alert(p1+p2);
            },
            sayHi:function () {
                alert("吃了没啊");
            },
        },
    })
</script>
</body>
</html>

10.v-model

  • 便捷设置和获取表单元素的值
  • 绑定的数据和表单元素关联
  • 双向绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2 >{{message}}</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"小黑大骗子"
        },
        methods:{
            getM:function () {
                alert(this.message)
            },
            setM:function () {
                this.message="小黑有好人卡"
            }
        }
    })
</script>
</body>
</html>

网络应用

  • axios：网络请求库
  • axios+vue：结合vue一起
  • 天气预报案例

1.axios基本使用

  • 先导入再使用
  • get或者set发送请求
  • then方法中的回调函数会再请求失败会成功的时候触发
  • 通过回调函数获得相应内容或者错误信息
1
2
3
4
5
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})

axios.post(地址,key:value&key2:value2).then(function(response){},function(err){})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=chrome">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>axios基本使用</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    /**
     * 接口1：随机笑话
     * URL：https://autumnfish.cn/api/joke/list
     * 方法：get
     * 参数：num(笑话条数，字数)
     * 相应内容：随机笑话
     */
    document.querySelector(".get").onclick=function () {
        axios.get("https://autumnfish.cn/api/joke/list?num=3")
        .then(function (response) {
            console.log(response);
        })
    }
    /**
     * 接口2：用户注册
     * URL：https://autumnfish.cn/api/user/reg
     * post
     * username(用户名，字符串)
     * 注册成功或者失败
     */
    document.querySelector(".post").onclick=function () {
        axios.post("https://autumnfish.cn/api/user/reg123",{username:"hhzhu"})
        .then(function (response) {
            console.log(response);
        },function (err) {
            console.log(err);
        })
    }
</script>
</body>
</html>

2.axios+vue

  • axios回调函数的this已经改变，无法访问到data中的数据
  • 把this保存起来，回调函数直接使用保存的this
  • 和本地的区别是改变了数据来源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=chrome">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>axios+vue</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /**
     * 接口1：随机笑话
     * URL：https://autumnfish.cn/api/joke
     * 方法：get
     * 参数：无
     * 相应内容：随机笑话
     */
    var app=new Vue({
        el:"#app",
        data:{
            joke:"很好笑的笑话"
        },
        methods:{
            getJoke:function () {
                //console.log(this.joke);
                var that=this;
                axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                    console.log(response.data);
                    //console.log(this.joke);
                    that.joke=response.data;
                },function (err) {})

            }
        },
    })

</script>
</body>
</html>

3.网络应用：天知道

回车查询，点击查询

回车查询：

  • 按下回车(v-on.enter)
  • 查询数据(axios,v-model)
  • 渲染数据(c-for，that)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=chrome">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>axios+vue</title>
</head>
<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="https://i.loli.net/2020/03/22/oZx5cQ1BS2CmdTz.png" alt="logo"></div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
                <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://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*
天气接口：
请求地址：http://wthrcdn.etouch.cn/weather_mini
参数：city
 */
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) {})
        }
    },
})

点击查询：

1
2
3
4
changeCity:function (city) {
           this.city=city;
           this.searchWeather();
       }
1
2
3
4
5
6
<div class="hotkey">
                <a href="javascript:;" @onclick="changeCity('北京')">北京</a>
                <a href="javascript:;" @onclick="changeCity('上海')">上海</a>
                <a href="javascript:;" @onclick="changeCity('广州')">广州</a>
                <a href="javascript:;" @onclick="changeCity('深圳')">深圳</a>
            </div>
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

请我喝杯咖啡吧~

支付宝
微信