Vue学习笔记

一、环境搭建

1、安装VS code

2、安装live server

3、安装科学上网工具

4、安装谷歌浏览器

5、安装Vue浏览器调试工具

二、安装Vue（两种版本）

1、导入开发版本的Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2、创建Vue实例对象，设置el属性和data属性

<script>

        var app = new Vue({

            el:"#app",

            data:{

                message:"Hello Vue!"

            }

        })

    </script>

3、使用简洁的模板语法把数据渲染到页面上

</div>

三、el挂载点

el挂载点的作用是什么？

el是用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么？

Vue会管理el选项命中元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

四、data: 数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型数据

渲染复杂类型数据时，遵守js的语法即可

<div id="app">

        {{ message }}

        <h2>{{ school.name }}  {{ school.mobile }}</h2>

        <ul>

            <li>{{ campus[0] }}</li>

            <li>{{ campus[1] }}</li>

            <li>{{ campus[2] }}</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:"Hello Vue!",

                school:{

                    name:"许多",

                    mobile:"19800000000"

                },

                campus:["北京","上海","深圳"]

            }

        })

    </script>

Hello Vue!

许多 19800000000

北京

上海

深圳

五、指令

1、内容绑定，事件绑定

v-text v-html v-on基础

2、显示切换，属性绑定

v-show v-if v-bind

3、列表循环，表单元素绑定

v-for v-on补充 v-model

v-text 设置标签的文本值（textContent）

<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@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                message:"Hello Word!!!!",

                info:"hahaha"

            }

        })

</script>

</body>

Hello Word!!!!

hahaha

Hello Word!!!!？上海

v-html 设置标签的innerHTML

<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:"Hello Word!!!!",

                content:"<a href='http://www.hao123.com'>hao123<a/>"

            }

        })

    </script>

</body>

hao123

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

        <h2 @click="changeFood">{{ food }}</h2>

    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                food:"Hello Wold"

            },

            methods:{

                doIt:function(){

                    alert("做It")

                },

                changeFood:function(){

                    this.food +="你好!"

                }

            },

        })

    </script>

</body>

1、v-on指令的作用是：微元素绑定事件

2、事件名称不需要写on

3、指令可以简写为@

4、绑定的方法定义在methods属性中

计数器案例

<body>

    <div id="app">

        <button @click="sub">

            -

        </button>

        <span> {{ num }}</span>

        <button @click="add">

            +

        </button>

    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/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>0){

                        this.num--;

                    }else{

                        alert('别点了');

                    }

                }

            }

        })

    </script>

</body>

创建Vue示例时：el（挂载点），data（数据），methods（方法）

v-on指令的作用是绑定事件，简写为@

方法中通过this，关键字获取data中的数据

v-text指令的作用是：设置元素的文本值，简写为{{}}

v-show 根据表达值的真假，切换元素的显示和隐藏

<body>

    <div id="app">

        <input type="button" value="切换显示器" @click="changeIsShow">

        <input type="button" value="累加年龄" @click="addAge">

        <img v-show="isShow" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

        <img v-show="age>=18" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/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>

1、v-show指令的作用是：根据真假切换元素的显示状态

2、原理是修改元素的display，实现显示隐藏

3、指令后面的内容，最终都会解析为布尔值

4、值为true元素显示，值为false元素隐藏

5、数据改变时，会同步更新

v-if 根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

<body>

    <div id="app">

        <input type="button" value="切换显示" @click="toggleIsShow">

        <p v-if="isShow">Hello Word v-if</p>

        <p v-show="isShow">Hello Word v-show</p>

        <h2 v-if="temperature>=35">惹</h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/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>

1、v-if指令的作用是：根据表达式的真假切换元素的显示状态

2、本质是通过操纵dom元素来切换元素的显示状态

3、表达式的值为true，元素存在于dom树中，为false，从dom树中移除

4、频繁的切换v-show，反之使用v-if，前者的切换消耗小

v-bind设置元素的属性（比如：src，title，class）

<!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>v-bind</title>

    <style>

        .active{

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div id="app">

        <img v-bind:src="imgSrc" alt="">

        <br>

        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">

        <br>

        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",

                imgTitle:"Hello Word",

                isActive:false

            },

            methods:{

                toggleActive:function(){

                    this.isActive = !this.isActive;

                }

            }

        })

    </script>

</body>

</html>

1、v-bind指令的作用是：为元素绑定属性

2、完整写法是v-bind：属性名

3、简写的话可以直接省略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>v-bind</title>

</head>

<body>

    <div id="app">

        <img :src="imgArr[index]" alt="">

        <a href="javascript:void(0)" v-if="index!=0" @click="prev">←</a>

        <a href="javascript:void(0)" v-show="index!=2" @click="next">→</a>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                imgArr:[

                    "../css/11.png",

                    "../css/22.png",

                    "../css/33.png",

                ],

                index:0,

            },

            methods:{

                prev:function(){

                    this.index--;

                },

                next:function(){

                    this.index++;

                }

            }

        })

    </script>

</body>

</html>

1、列表数据使用数组保存

2、v-bind指令可以设置元素属性，比如src

3、v-show和v-if都可以切换元素的显示状态，频繁切换使用v-show

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>v-for</title>

</head>

<body>

    <div id="app">

        <input type="button" value="添加数据" @click="add">

        <input type="button" value="移除数据" @click="remove">

        <ul>

            <li v-for="(item,index) in arr">

                {{index+1}} {{item}}

            </li>

        </ul>

        <h2 v-for="item in vegetables" v-bind:title="item.name">

            {{ item.name}}

        </h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                arr:["北京","上海","广州"],

                vegetables:[

                    {name:"西红柿"},

                    {name:"西兰花"},

                    {name:"西葫芦"},

                ]

            },

            methods:{

                add:function(){

                    this.vegetables.push({name:"西瓜"})

                },

                remove:function(){

                    this.vegetables.shift();

                }

            }

        })

    </script>

</body>

</html>

1、v-for指令的作用是：根据数据生成列表结构

2、数据经常和v-for结合使用

3、语法是（item，index） in 数据

4、Item和index可以结合其他指令一起使用

5、数组长度的更新会同步到页面上，是响应式的

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>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@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            methods:{

                doIt:function(p1,p2){

                    console.log("doIt");

                    console.log(p1);

                    console.log(p2);

                },

                sayHi:function(){

                    alert("Hello Word");

                }

            }

        })

    </script>

</body>

</html>

1、事件绑定的方法写成函数调用的形式，可以传入自定义参数

2、定义方法时需要定义形参来接受传入的实参

3、事件的后面跟上.修饰符可以对事件进行限制

4、.enter可以限制出发的案件为回车

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>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 v-text="message"></h2>

    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        var app = new Vue({

            el:"#app",

            data:{

                message:"Hello"

            },

            methods:{

                getM:function(){

                    alert(this.message);

                },

                setM:function(){

                    this.message = "你好";

                }

            },

        })

    </script>

</body>

</html>

1、v-model指令的作用是便捷的设置和获取表单元素的值

2、绑定的数据会和表单元素值相关联

3、绑定的数据←→表单元素的值

本地应用：记事本案例

<!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>v-model</title>

</head>

<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)"  value="删除"></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 class="clear-completed" v-show="list.length!=0" @click="clear">clear</button>

        </footer>

    </section>

    

    <footer class="info">

    </footer>

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

                    console.log("删除");

                    console.log(index);

                    this.list.splice(index,1);

                },

                clear:function(){

                    this.list = [];

                }

            }

        })

    </script>

</body>

</html>

一、新增

1．生成列表结构（v-for数组）

2．获取用户数据（v-model）

3．回车，新增数据（v-on .enter 添加数据）

二、删除

1．点击删除指定内容（v-on splice 索引）

2．数据改变，和数据绑定的元素同步改变

3．事件的自定义参数

4．splice的使用方法

三、统计

1．统计信息个数（v-text length）

2．基于数据的开发方式

四、清空

1．点击清除所有信息（v-on 清空数组）

2．基于数据的开发方式

五、隐藏

1．没有数据时，隐藏元素（v-show v-if 数据非空）

重点内容：

1、列表结构可以通过v-for指令结合数据生成

2、v-on结合事件修饰符可以对事件进行限制，比如.enter

3、v-on在绑定事件时可以传递自定义参数

4、通过v-model可以快速设置和获取表单元素的值

5、基于数据的开发方式

网络应用（天气预报案例）

Vue结合网络数据开发应用

axios 网络请求库

Axios+vue 结合vue一起

Axios 功能强大的网络请求库

Axios基本使用

<!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>axios基本使用</title>

</head>

<body>

    <input type="button" value="get请求" class="get">

    <input type="button" value="post请求" class="post">

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

        // 接口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);

            })

        }

        // 接口：用户注册

        // 请求地址：https://autumnfish.cn/api/user/reg

        // 请求方法：post

        // 请求参数：username（用户名，字符串）

        // 响应内容：注册成功或失败

        document.querySelector(".post").onclick = function(){

            axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})

            .then(function(response){

                console.log(response);

            },function(err){

                console.log(err);

            })

        }

    </script>

</body>

</html>

1、axios必须先导入才可以使用

2、使用get或post方法即可发送对应的请求

3、then方法中的回掉函数会在请求成功或失败时触发

4、通过回掉函数的形参可以获取相应内容，或错误信息

文档传送门：https://github.com/axios/axios

Axios+vue axios如何结合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>axios基本使用</title>

</head>

<body>

    <div id="app">

        <input type="button" value="获取笑话" @click="getJoke">

        <p>{{joke}}</p>

    </div>

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

        // 接口1：随机笑话

        // 请求地址：https://autumnfish.cn/api/joke

        // 请求方法：get

        // 请求参数：无

        // 响应内容：一条随机笑话

        var app = new Vue({

            el:"#app",

            data:{

                joke:"很好笑的笑话"

            },

            methods:{

                getJoke:function(){

                    var that = this;

                    axios.get("https://autumnfish.cn/api/joke").then(function(response){

                        console.log(response.data);

                        that.joke=response.data;

                    },function(err){

                        console.log(err);

                    })

                }

            }

        })

    </script>

</body>

</html>

1、axios回调函数中的this已经改变，无法访问到data中的数据

2、把this保存起来，毁掉函数中直接使用保存的this即可

3、和本地应用的最大区别就是改变了数据来源

查询天气的应用

1、回车查询

(1)按下回车（v-on .enter）

(2)查询数据（axios接口v-model）

(3)渲染数据（v-for数组that）

接口：

请求地址：https://wthrcdn.etouch.cn/weather_mini

请求方法：get

请求参数：city（查询的城市名）

响应内容：天气内容

CTRL+F CTRL+V

  // 接口1：天气

        // 请求地址：https://wthrcdn.etouch.cn/weather_mini

        // 请求方法：get

        // 请求参数：city（查询的城市名）

        // 响应内容：天气内容

        // 1点击回车

        // 2查询数据

        // 3渲染数据

结构：

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

</head>

<body>

    <div class="wrap" id="app">

        <div class="search_form">

            <div class="logo"><img src="" alt="logo"></div>

            <div class="form_group">

                <input type="text" @keyup.enter="searchWeather" v-model="city" 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://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="../js/main.js"></script>

</body>

</html>

main.js

        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

                    })

                    .catch(function(err){})

                }

            },

        })

综合应用（悦听播放器）

1、歌曲搜索

(1)按下回车（v-on .enter）

(2)查询数据（axios 接口 v-model）

(3)渲染数据（v-for 数组 that）

(4)请求地址：https://autumnfish.cn/search

(5)请求方法：get

(6)请求参数：keywords（查询的关键字）

(7)响应内容：歌曲搜索结果

2、歌曲播放

(1)点击播放（v-on）

(2)歌曲地址获取

(3)歌曲地址获取

(4)请求地址https://autumnfish.cn/song/url

(5)请求方法：get

(6)请求参数：id：（歌曲id）

(7)响应内容：歌曲的url地址

3、歌曲封面

(1)点击播放（增加逻辑）

(2)歌曲封面获取（接口歌曲id）

(3)歌曲封面设置（v-bind）

(4)请求地址：https://autumnfish.cn/song/detail

(5)请求方法：get

(6)请求参数：ids（歌曲id）

(7)相应内容：歌曲详情，包含封面信息

4、歌曲评论

(1)点击播放（增加逻辑）

(2)歌曲评论获取（接口歌曲id）

(3)歌曲评论渲染

(4)请求地址：https://autumnfish.cn/comment/hot?type=0

(5)请求方法：get

(6)请求参数：id（歌曲id，type固定为0）

(7)相应内容：歌曲的热门评论

5、播放动画

(1)监听音乐播放（v-on play）

(2)监听音乐暂停（v-on pause）

(3)操纵类名（v-bind 对象）

6、MV播放

(1)mv图标显示（v-if）

(2)Mv地址获取（接口 mvid）

(3)遮罩层（v-show v-on）

(4)Mv地址获取（v-bind）

(5)请求地址：https://autumnfish.cn/mv//url

(6)请求参数：id（mvid，为0说明没有mv）