Vue入门笔记（B站）

最新推荐文章于 2025-05-26 16:38:55 发布

我土豆去哪了

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量241

点赞数

分类专栏：其他文章标签： vue js html javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_44233889/article/details/118873740

版权

其他专栏收录该内容

13 篇文章

订阅专栏

这篇博客详细介绍了Vue.js的基础知识，包括Vue官网、第一个Vue程序、数据对象、各种指令如v-text、v-html、v-on、v-show、v-if、v-bind、v-for和v-model的用法。还涉及了使用axios进行网络应用开发，如天气查询页面和音乐播放器的制作，是Vue.js入门学习的好资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

00.Html5框架代码
01.Vue官网地址
02.第一个Vue程序
03.el挂载点
04.data数据对象
05.本地应用_v-text指令({{}}指令)
06.本地应用_v-html指令
07.本地应用_v-on指令(@指令)
08.本地应用_v-show指令
09.本地应用_v-if指令
10.本地应用_v-bind指令(:指令)
11.本地应用_v-for指令
12.本地应用_v-model指令
13.本地应用_简易记事本的制作
14.网络应用_axios基本使用
15.网络应用_axios+vue
16.网络应用_天气查询页面的制作
17.综合应用_音乐播放器的制作

00.Html5框架代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

01.Vue官网地址

http://vuejs.org

02.第一个Vue程序

...
<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 引入Vue框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue!"
            }
        })
    </script>
</body>
...

在这里插入图片描述

03.el挂载点

...
<body>
    <div id="app_id" class="app_class">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // 不可挂载在<html>或<body>上，一般建议挂载在<div>上
            el: "#app_id", //根据id挂载，一般使用id挂载，因为id通常是唯一的
            // el: ".app_class", //根据class挂载
            // el: "div", //根据标签选择器挂载
            data: {
                message: "Vue Test!"
            }
        })
    </script>
</body>
...

04.data数据对象

...
<body>
    <div id="app">
        {{ message }} 
        <!-- 显示内容：Vue Test! -->

        {{ school }}
        <!-- 显示内容： { "name": "Vue School", "mobile": "123456" } -->
        {{ school.name }}
        <!-- 显示内容：Vue School -->

        {{ campus }}
        <!-- 显示内容：[ "BJ", "SH", "GZ", "SZ" ] -->
        {{ campus[0] }}
        <!-- 显示内容：BJ -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                // 普通数据
                message: "Vue Test!", 
                // 对象数据
                school: {
                    name: "Vue School",
                    mobile: "123456"
                },
                // 数组数据
                campus: ["BJ", "SH", "GZ", "SZ"]
            }
        })
    </script>
</body>
...

05.本地应用_v-text指令({{}}指令)

...
<body>
    <div id="app">
        <!-- 写法1：此种写法标签内会全部被替换，不推荐使用 -->
        <p v-text="message+'!'">Vue</p>
        <!-- 显示内容：Vue Test!! -->

        <!-- 写法2：插值表达式，这种写法只有大括号内部值会被替换，其余保留 -->
        <p>Vue {{ message + "!" }}</p>
        <!-- 显示内容：Vue Vue Test!! -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue Test!",
            }
        })
    </script>
</body>
...

06.本地应用_v-html指令

...
<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='#'>Vue Test!</a>",
            }
        })
    </script>
</body>
...

在这里插入图片描述

07.本地应用_v-on指令(@指令)

...
<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">

		<!-- 点击改变number -->
        <h2 @click="changeNum">{{ number }}</h2>

        <input type="button" value="参数调用" @click="doIts(666, '老铁')">
        <!-- 输入就调用 -->
        <input type="text" @keyup="sayHi">
        <!-- 按下回车才调用 -->
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                number: "1"
            },
            methods: {
                doIt: function(){
                    alert("做It");
                },
                changeNum: function(){
                    this.number ++;
                },
                doIts: function(p1, p2){
                    alert(p1+p2);
                },
                sayHi: function(){
                    alert("Hello!");
                }
            }
        })
    </script>
</body>
...

08.本地应用_v-show指令

...
<body>
    <div id="app">
        <!-- 值为true时显示，值为false时隐藏，其本质是切换标签元素的display -->
        <img src="地址" v-show="true">
        <!-- 根据isShow的值来动态控制显示 -->
        <img src="地址" v-show="isShow">
        <input type="button" value="改变isShow的值" @click="changeIsShow">
        <!-- 根据表达式的值来动态控制显示 -->
        <img src="地址" v-show="age>=18">
        <input type="button" value="累加age的值" @click="addAge">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                age: 16
            },
            methods: {
                changeIsShow: function(){
                    this.isShow = !this.isShow;
                },
                addAge: function(){
                    this.age ++;
                }
            }
        })
    </script>
</body>
...

09.本地应用_v-if指令

...
<body>
    <div id="app">
        <!-- 效果同v-show标签，但其本质是直接操作dom元素，消耗比较大 -->
        <!-- 频繁切换显示隐藏的元素用v-show指令，反之可以用v-if指令 -->
        <p v-if="true">我是一个p标签</p>
        <p v-if="isShow">我是一个p标签</p>
        <p v-if="表达式">我是一个p标签</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true
            }
        })
    </script>
</body>
...

10.本地应用_v-bind指令(:指令)

...
<head>
...
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 主要用于设置元素属性 -->
        <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'">
        <!-- 简写 -->
        <img :src="imgSrc" :title="imgTitle+'!!!'">
        
        <!-- 根据三元表达式来设置类名，如果isActive为true，则类名为active，否则类名为空 -->
        <img :class="isActive?'active':''">
        <!-- 对象的写法（推荐），如果isActive为true，则生效类名为active，否则移除 -->
        <img :class="{active:isActive}">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "图片地址",
                imgTitle: "图片标题",
                isActive: false
            }
        })
    </script>
</body>
...

11.本地应用_v-for指令

...
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr" :title="item">
                item: {{ item }} -index: {{ index }}
            </li>
            <li v-for="(item, index) in objArr">
                item.name: {{ item.name }} -index: {{ index }}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               arr: [1, 2, 3, 4, 5],
               objArr: [
                   { name: "jack" },
                   { name: "rose" }
               ]
            },
            methods: {
                add: function(){
                    // 添加元素
                    this.objArr.push({ name: "John" });
                },
                remove: function(){
                    // 默认移除最左边/最前面的元素
                    this.objArr.shift();
                }
            }
        })
    </script>
</body>
...

在这里插入图片描述

12.本地应用_v-model指令

...
<body>
    <div id="app">
        <!-- 主要用于获取和设置表单元素的值（双向数据绑定） -->
        <!-- 无论是通过改变data里的message值，还是直接在文本框改变值，都将同步 -->
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <p>{{ message }}</p>
        <input type="button" value="修改message的值" @click="setMessage">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               message: "Vue Test!"
            },
            methods: {
                getMessage: function(){
                    alert(this.message);
                },
                setMessage: function(){
                    this.message = "Test Test";
                }
            }
        })
    </script>
</body>
...

在这里插入图片描述

13.本地应用_简易记事本的制作

...
<body>
    <!-- 主体区域 -->
    <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">
            <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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/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){
                    this.list.splice(index, 1);
                },
                clear: function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>
...

14.网络应用_axios基本使用

...
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <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(function(response){
                console.log(response);
            }, function(err){
                console.log(err);
            })
        }
        /*
            接口2:用户注册
            请求地址:https://autumnfish.cn/api/user/reg
            请求方法:post
            请求参数:username(用户名,字符串)
            响应内容:注册成功或失败
        */
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",
            {username: "asdfg123"})
            .then(function(response){
                console.log(response);
            }, function(err){
                console.log(err);
            })
        }
        /* 
            axios官网:https://github.com/axios/axios
        */
    </script>
</body>
...

15.网络应用_axios+vue

...
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
       /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
       */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function(){
                    // console.log(this.joke);
                    //因为this会发生改变，所以先存下来
                    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>
...

16.网络应用_天气查询页面的制作

html代码：

...
<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather"
                class="input_txt" placeholder="请输入查询的天气" />
                <button class="input_sub" @click="searchWeather">
                    搜 索
                </button>
            </div>
            <div class="hotkey">
                <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="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>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 导入自己的js -->
    <script src="./main.js"></script>
</body>
...

js代码：

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

    1. 点击回车
    2. 查询数据
    3. 渲染数据
*/
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="+this.city)
            .then(function(response){
                that.weatherList = response.data.data.forecast;
            })
            .catch(function(err){ })
        },
        changeCity: function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})