【Vue学习笔记】黑马程序员四小时速成VUE

已于 2023-03-13 23:23:15 修改
阅读量3k 收藏 73
点赞数 14
分类专栏： 学习笔记 文章标签： vue.js 前端 javascript
于 2021-12-30 20:48:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H1519223775/article/details/122244174
版权

Vue学习笔记

Vue学习

视频地址：https://www.bilibili.com/video/BV12J411m7MG

Vue课程学习思维导图

1. Vue基础

Vue简介

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式数据驱动

Vue官方文档：

Demo1：第一个程序，初步学会使用Vue。

<!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>Vue基础</title>
     <!-- 导入Vue.js文件 -->
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>
</html>

Demo2：认识Vue实例——el挂载点

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- Vue实例的作用范围是什么？ -->
    <!-- Vue会管理el选项命中元素以及其内部的后代元素。 -->
    app元素外部：{{ message }}
    <div id="app_1">
        app元素内部:{{ message }}
        <br>
        <span>app元素内部的sapn标签下：{{ message }}</span>
    </div>
    <script>
        var app = new Vue({
            el:'#app_1',
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
    <br>

    <!-- 是否可以使用其他的选择器？ -->
    <!-- 可以，但是推荐使用id选择器，因为其他选择器都不唯一。 -->
    <div class="app_2">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el:'.app_2',
            data:{
                message:"现在使用的class选择器"
            }
        })
    </script>
    <br>

    <!-- 是否可以设置其他的DOM元素呢？ -->
    <!-- 可以，可以使用其他饿的双标签，单标签不能、html和body之上也不能挂载。 -->
    <h2 id="app_3">
        {{ message }}
    </h2>
    <script>
        var app = new Vue({
            el: '#app_3',
            data:{
                message:"这是H2元素"
            }
        })
    </script>
</body>
</html>

Demo3：认识Vue实例——data数据对象

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
        <h2>{{ school.name }} {{ school.mobile }}</h2>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[1] }}</li>
            <li>{{ campus[2] }}</li>
            <li>{{ campus[3] }}</li>
        </ul>
    </div>
    <!-- data:数据对象
            Vue中用到的数据定义在data中；
            data中可以写复杂类型的数据；
            渲染复杂类型数据时，遵循js的语法即可。
    -->
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                message:"你好，小黑。",
                school:{
                    name:"黑马程序员",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>
</html>

2. Vue本地应用

通过Vue实现常见的网页效果

Vue指令

内容绑定，事件绑定。
显示切换，属性绑定。
列表循环，表单元素绑定。

Vue指令作用
v-text设置标签的内容（textContent）
v-html设置元素的innerHTML
v-on为元素绑定事件
v-show根据真假切换元素的显示状态
v-if根据表达式的真假切换元素的显示状态
v-bind为元素绑定属性
v-for根据数据生成列表结构
v-model便捷的设置和获取表单元素的值

v-text

Demo_v-text指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- v-text
        v-text指令的作用是：设置标签的内容（textContent）
        默认写法会替换全部内容，使用差值表达式{{}}，可以替换指定内容
    -->
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="info"></h2>
        <h2>{{ message }}</h2>

        <h2 v-text="message">深圳</h2>
        <h2>{{ message }}深圳</h2>

        <h2 v-text="message + '!!'"></h2>
        <h2>{{ message + '!!'}}深圳</h2>        
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"黑马程序员",
                info:"前端与移动教研部"
            }
        })
    </script>
</body>
</html>

v-html

Demo_v-html指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- v-html
        v-html指令的作用是：设置元素的innerHTML；
        内容中有html结构会被解析为标签；
        v-text指令无论内容是什么，只会解析为文本。
    -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                // content:"黑马程序员"
                content: "<a href='http://www.itheima.com'>黑马程序员</a>"
            }
        })
    </script>
</body>
</html>

v-on

Demo_v-on指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- v-on指令 
        v-on指令的作用是：为元素绑定事件
        事件名不需要写on
        指令可以简写为@
        绑定的方法定义在methods属性中
        方法内部通过this关键字可以访问定义在data中数据
     -->
    <div id="app">
        <input type="button" value="事件绑定-点击" v-on:click="dolt">
        <input type="button" value="事件绑定-双击" v-on:dblclick="dolt">
        <!-- 简写 -->
        <input type="button" value="事件绑定-简写点击" @click="dolt">
        <h2 @click="change">{{ food }}</h2>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西蓝花炒鸡蛋"
            },
            methods:{
                dolt:function(){
                    alert("做IT");
                },
                change:function(){
                    // console.log(this.food);
                    this.food += "好好吃！"
                }
            }
        })
    </script>
</body>
</html>

Demo_v-on指令补充

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 
        事件绑定的方法写成函数调用的形式，可以传入自定义参数
        定义方法时需要定义形参来接受传入的实参
        事件的后面跟上.修饰符可以对事件进行限制，例如.enter可以限制触发的按键为回车
     -->
    <div id="app">
        <input type="button" value="点击" @click="doIt(666)">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            methods:{
                doIt:function(p1){
                    console.log("做It");
                    console.log(p1);
                },
                sayHi:function(){
                   alert("吃了没");
                }
            }
        })
    </script>
</body>
</html>

v-show

Demo_v-show指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- v-show
        v-show指令的作用是：根据真假切换元素的显示状态
        原理是修改元素的display，实现显示隐藏
        指令后面的内容，最终都会解析为布尔值
        值为true元素显示，值为false元素为隐藏
    -->
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="IsShow" src="1.png" alt="">
        <br>
        <span>{{ age }}</span>
        <input type="button" value="年龄age增加" @click="changeAge">
        <img v-show="age >= 18" src="1.png" alt="">
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                IsShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.IsShow = ! this.IsShow;
                },
                changeAge:function(){
                    this.age++;
                }
            }
        });
    </script>
</body>
</html>

v-if

Demo_v-if指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- v-if指令
        v-if指令的作用是根据表达式的真假切换元素的显示状态
        本质是通过操纵dom元素来切换显示状态
        表达式的值为true，元素存在于dom树中；表达式的值为false，从dom树中移除。
     -->
    <div id="app">
        <button @click="ChangeShow">切换状态</button>
        <p v-if="IsShow">我是一个p标签，由v-if控制</p>
        <p v-show="IsShow">我是一个p标签，由v-show控制</p>
        <p v-if="temperature >= 35">热死了！</p>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                IsShow:true,
                temperature:40
            },
            methods:{
                ChangeShow:function(){
                    this.IsShow = !this.IsShow;
                }
            }
        });
    </script>
</body>
</html>

v-bind

Demo_v-bind指令

<!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>
    <script src="vue.js"></script>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- v-bind指令 
        v-bind指令的作用是为元素绑定属性
        完整写法是v-bind:属性名
        简写的话可以直接省略v-bind，只保留 :属性名
     -->
    <div id="app">
        全写：v-bind:src
        <img v-bind:src="imgSrc" v-bind:title="imgTitle" alt="">
        <br>
        简写 ：src
        <img :src="imgSrc" :title="imgTitle + '!!!!'" alt="">
        <br>
        添加类_三元表达式
        <button @click="toggleActive">点击我改变class属性</button>
        <img :src="imgSrc" :title="imgTitle + '!!!!'" :class="isActive?'active':''" alt="">
        <br>
        添加类_对象方式
        <button @click="toggleActive">点击我改变class属性</button>
        <img :src="imgSrc" :title="imgTitle + '!!!!'" :class="{active:isActive}" alt="">
    </div>

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

v-for

Demo_v-for指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 
        v-for指令的作用是根据数据生成列表结构
        数组经常和v-for结合使用
        语法是(item,index) in 数据
        item和index可以结合其他指令一起使用
        数组长度的更新会同步到页面上，是响应式的
     -->
    <div id="app">
        <ul>
            <li v-for="item in Array">你好,{{ item }}</li>
        </ul>
        <h2 v-for="item in vegetables" :title="item.name">{{ item.name }}</h2>
        <button @click="add">点我添加</button>
        <button @click="remove">点我移除</button>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                Array:["张三","李四","王五","马六","二蛋"],
                vegetables:[
                    {name:"葱花炒蛋"},
                    {name:"番茄炒蛋"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({ name:"韭菜炒蛋"});
                },
                remove:function(){
                    // 移除最左边的一个
                    this.vegetables.shift();
                }
            }
        }) 
    </script>
</body>
</html>

v-model

Demo_v-model指令

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 
        v-model指令的作用是便捷的设置和获取表单元素的值
        绑定的数据会和表单元素值相关联
     -->
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <h2>{{ message }}</h2>
        <input type="button" value="点我修改" @click="setMessage">
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"黑马程序员"
            },
            methods:{
                getMessage:function(){
                    alert(this.message);
                },
                setMessage:function(){
                    this.message = "111";
                }
            }
        });
    </script>
</body>
</html>

案例1 计数器

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 计数器
        创建Vue示例时：el（挂载点）、data（数据）、methods（方法）
        v-on指令的作用是绑定事件，简写为@
        方法中通过this关键字获取data中的数据
        v-text指令的作用是设置元素的文本值，简写为{{}}
    -->
    <div class="input-num" id="app">
        <button @click='reduce'>-</button>
        <span>{{ num }}</span>
        <button @click='add'>+</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods:{
                reduce:function(){
                    console.log("reduce")
                    if(this.num == 1){
                        alert("不能为0")
                    }
                    else{
                        this.num--;
                    }
                },
                add:function(){
                    console.log("add")
                    if(this.num>=9){
                        alert("不能超过10个")
                    }
                    else{
                        this.num++;
                    }
                }
            }
        });
    </script>
</body>
</html>

案例2 图片切换

<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 图片切换 
        列表数据使用数组保存
        v-bind指令可以设置元素属性，比如src
        v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
     -->
    <div id="app">
        <img :src="imgArray[index]" alt="">
        <a href="#" @click="prev" v-show="index>0">上一张</a>
        <a href="#" @click="next" v-show="index<imgArray.length-1">下一张</a>
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                imgArray:["https://img20.360buyimg.com/pop/s590x470_jfs/t1/222408/26/6055/99082/61b997c0Ead36013d/9b2da06b3f438624.jpg.webp",
                "https://img14.360buyimg.com/pop/s590x470_jfs/t1/208171/7/13900/69634/61c96765E6e65374c/642ed952f9778144.jpg.webp",
                "https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f4/a10ab487/cr/s/q.jpg",
                "https://img12.360buyimg.com/pop/s590x470_jfs/t1/205354/16/17988/82004/61b1dc96Ee600f3f3/9ffa616349105df0.png.webp"
                ],
                index:0,
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        });
    </script>
</body>
</html>

案例3 小黑记事本

<!-- 
    列表结构可以通过v-for指令结合数据生成
    v-on结合事件修饰符可以对事件进行限制，比如.enter
    v-on在绑定事件时可以传递自定义参数
    通过v-model可以快速的设置和获取表单元素的值
    基于数据的开发方式
 -->
<!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>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>小黑笔记本</h1>
            <input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new_todo">
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="to_list">
                <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{ index+1 }}</span>
                        <label>{{ item }}</label>
                        <button @click="remove(index)" class="destory">×</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 @click="clear" class="clear_completed" v-show="list.length!=0">Clear</button>
        </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">

    </footer>

    <!-- JS -->
    <script>
        var app = new Vue({
            el:'#todoapp',
            data:{
                list:["写代码","吃饭饭","睡觉觉"],
                inputValue:"好好学习", //用来获取用户输入的内容
            },
            methods:{
                add:function(){
                this.list.push(this.inputValue);
                },
                remove:function(index){
                    console.log("1")
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>
</html>

3. Vue网络应用

axios的使用

<!-- 
    axios在线地址：
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
随机获取笑话的接口
    请求地址： https://autumnfish.cn/api/joke/list
    请求方法：get
    请求参数：num
    num——笑话条数——类型为数字
    响应内容：随机笑话
用户注册接口1
    请求地址： https://autumnfish.cn/api/user/reg
    请求方法：post
    请求参数：usename
    num——用户名——不能为空
    响应内容：注册成功或者失败 -->
<!-- 
    axios必须先导入才可以使用
    使用get或者post方法即可发送对应的请求
    then方法中的回调函数会在请求成功或者失败时触发
    通过回调函数的形参可以获取响应内容或者错误信息
 -->

<!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>
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 随机获取笑话接口 -->
    <script>
        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);
            })
        }
    </script>
    <!-- 用户注册接口 -->
    <script>
        document.querySelector(".post").onclick = function(){
            //post的数据是放到第二个参数里面写的
            axios.post("https://autumnfish.cn/api/user/reg",{username:"张三aichidoya"})
            .then(function(response){
                console.log(response);
            }),function(err){
                console.log(err)
            }
        }
    </script>
</body>
</html>

axios + vue 的使用

<!-- 
    axios回调函数中的this已经改变，无法访问到data中数据，
    把this保存起来，回调函数中直接使用保存的this的变量即可。
 -->
<!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>
    <!-- 官网提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getjoke">
        <p>{{ joke }}</p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                joke:"笑话"
            },
            methods:{
                getjoke:function(){
                    // this会变，所以我们现在外边获取到this赋值到that。
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(
                        function(response){
                            that.joke = response.data;
                        },
                        function(err){
                            console.log(err);
                            that.joke = "获取笑话失败哦"
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>

案例4 天知道

<!-- 查询天气的应用 -->
<!-- 
    回车查询
        按下回车（v-on .enter）
        查询数据（axios接口 v-model）
        渲染数据（v-for 数组 that）

        天气接口：
            请求地址：http://wthrcdn.etouch.cn/weather_mini
            请求方法：get
            请求参数：city（查询城市名）
            响应内容：天气信息
    点击查询
        点击城市（v-on 自定义参数）
        查询数据（this关键字）
        渲染数据
 -->
 <!-- 
     应用的逻辑代码建议和页面分离，使用单独的js文件编写
     axios回调函数中this指向改变了，需要额外的保存一份
  -->
  <!-- 
      自定义参数可以让代码的复用性更高
      methods中定义的方法内部，可以通过this关键字点出其他的方法
   -->
 <!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>天知道</title>
     <link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\index.css">
     <link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\reset.css" />
 </head>
 <body>
    <div class="wrap" id="app">
        <div class="search_form">
          <div class="logo"><img src="快速入门Vue.js资料\04-源代码\demo-天知道\img\logo.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" @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>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <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>
          var app = new Vue({
              el:'#app',
              data:{
                  city:"",
                  weatherList:[]
              },
              methods:{
                  searchWeather:function(){
                      var that =  this;
                      axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                      .then(
                          function(response){
                              console.log(response.data.data.forecast);
                              that.weatherList = response.data.data.forecast;
                          },
                          function(err){
                              console.log(err);
                          }
                      )
                  },
                  changeCity:function(city){
                      this.city = city;
                      this.searchWeather();
                  }        
              }
          })
      </script>
    
 </body>
 </html>

4. Vue综合应用

案例5 音乐播放器

本篇文章用于作者本人学习回顾时使用。

丁咚Dingdong
关注
  • 14
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
适合新手的vue速成方案保姆级.txt
12-10
前端小白
简单易懂：Vue3框架三天速成（一）
大三软件工程在读，喜爱编程，分享。
06-26 2191
学习Vue框架首先需要具备基本的HTML5、CSS3、JavaScript基础，了解基本概念以及用法再来学习Vue会事半功倍！
vue框架入门笔记（速成vue）
weixin_42991822的博客
01-25 4336
vue4小时速成课概述一、vue基础1. vue简介2. 第一个vue程序3. el挂载点4. data数据对象二、本地应用1. v-text2. v-html3.4.5.三、网络应用四、综合应用 概述 学习vue的目的主要是为了完成毕业设计的前端页面编写，所以学的比较粗糙，主要是为了vue入门，观看的教学链接是： 黑马程序员vue前端基础教程-4个小时带你快速入门vue. 一、vue基础 1. vue简介 一个js框架 简化Dom操作 响应式数据驱动 数据发生变化，则页面上的数据显示也会随之发生变化。
Vue速成学习笔记
最新发布
TRXCX的博客
05-24 992
三、ElementUI。
Web前端 Vue2基础
No_Rishi的博客
02-14 447
一、Vue基础 1、Vue简介 JS 框架； 简化 Dom 操作； 响应式数据渲染。 2、Vue程序 导入开发版本的Vue.js CDN； 创建Vue实例对象，设置el属性和data属性； 使用简洁的模板语法把数据渲染到页面上。 <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> {{m
速成版-带您一天学完vue2框架
nuist_NJUPT的博客
07-09 782
vue是一个js框架，可以简化Dom操作，实现响应式数据驱动。Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。该记事本共包含新增、删除、统计、清空、隐藏等功能，应用上面学习过的vue基础实现。
速成版-带您2天学完vue3框架+Element-plus框架
nuist_NJUPT的博客
08-01 6102
Vue是渐进式的JavaScript框架，易学易用，性能出色，适用场景丰富的web前端框架，vue算是目前最火的web前端框架之一，使用vue可以提升开发体验。Vue组件可以按照两种不同的风格写，即选项式api和组合式api两种。
Vue速成
m0_63658876的博客
08-11 436
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库关注于视图（html），不仅易上手，还便于与第三方库或项目整合。渐进式：一步一步，不是将所有的东西都学完才能使用。自底向上设计：一种设计程序的过程和方法，就是先编写出基础程序段，然后在逐步扩大规范、补充和升级某些 功能，实际上是一种自底向上构造程序的过程。Vue.js的核心是允许采用简洁式模板语法来声明的将数据渲染进DOM的系统。...
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
Vue2+Vue3笔记（黑马程序员+尚硅谷）
05-26
黑马程序员和尚硅谷是知名的在线教育平台，它们提供的笔记内容通常覆盖了基础概念、实战案例和进阶技巧，对初学者和有一定经验的开发者都非常有帮助。通过阅读这些笔记，你可以深化对Vue.js的理解，提升你的前端开发...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
黑马程序员Vue深入浅出视频代码
03-31
这是根据黑马程序员中关于Vue11天课程中，跟着视频编写的代码，一行行跟着写出来的，连备注基本也是和视频一样，用的是vscode开发工具，上传的资料已经把node_modules删除了，进入目录后，用cnpm i重新安装一下就...
Vue——B站黑马程序员教程
http____的博客
12-04 3288
Vue.js学习笔记基础安装介绍Vue实例模板语法计算属性和侦听器class 与 style 绑定条件渲染列表渲染事件处理表单输入绑定组件基础深入了解组件过渡 & 动画可复用性 & 组合工具模块化内在 基础 安装 直接用 介绍 Vue实例 模板语法 计算属性和侦听器 class 与 style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入了解组件 过渡 & 动画 可复用性 & 组合 工具 模块化 内在 ...
后端速成Vue
yaya的博客
12-15 721
Vue速成笔记
黑马vue2笔记
qq_63856981的博客
04-22 443
vue:一套用于构建用户界面的前端框架构建用户界面用vue往html页面添加数据框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库使用自定义组件时需要加v-指令前缀即：声明成 color ，使用时要写成 v-color在每个 Vue 组件中，可以在directives节点下声明私有自定义指令//定义名为 color 的指令，指向一个配置对象color: {
【Vue2.0】黑马课程笔记（一）基本指令和过滤器
小女不才
04-06 1658
目录(一)什么是Vue.js（1）为什么要学习流行框架？（2）框架和库的区别（3）Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别（二）Vue指令（1）Vue.js 模板语法1.1 v- 一些常见指令1.2 循环语句：`v-for:`1.3 v-model:双向数据绑定1.4 事件修饰符：stop,prevent。1.5 绑定class类样式1.6 绑定style行内样式 ...
黑马程序员的Vue2+Vue3
m0_59690068的博客
01-14 794
学习的是黑马程序员的。
Vue基础-黑马笔记
weixin_44362304的博客
08-09 362
vue基础
黑马程序员vue学习笔记
09-06
抱歉，我是一个与ChatGPT类似的AI助手，无法提供具体的学习笔记。不过，我可以给你一些建议来学习Vue.js。 1. 官方文档：Vue.js官方文档是最权威的学习资源。你可以从基础概念到高级用法，逐步深入地学习Vue.js。 2. 在线教程：有许多在线教程可以帮助你快速入门Vue.js，如w3schools、Vue Mastery等。这些教程通常提供实例和练习，可以加深你对Vue.js的理解。 3. 实践项目：通过实践项目来巩固知识是非常重要的。尝试构建一些小型的Vue.js项目，如待办事项列表、博客应用等，以便更好地理解Vue.js的各种概念和特性。 4. 社区参与：加入Vue.js社区，与其他开发者交流经验和问题。你可以在社区中提问、阅读他人的问题和解答，这有助于你拓宽视野并深入理解Vue.js。 5. 扩展学习：除了Vue.js本身，你还可以学习相关的技术栈，如Vue Router、Vuex、Element UI等，以提升你的Vue.js开发能力。 记住，学习任何新技术都需要时间和实践。持续学习和实践是掌握Vue.js的关键。祝你学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值