Vue

本次课程分为四个部分：

Vue基础——>本地应用——>网络应用——>综合应用

第一部分：Vue基础

Vue简介

1、JavaScript框架

2、简化Dom操作

3、响应式数据驱动

第一个Vue程序

导入开发版本的Vue.js.
创建Vue实例对象，设置el属性和data属性.
使用简洁的模板语法把数据渲染到页面上.

模版语法如下：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基础</title>
</head>
<body>

</body>
</html>
<div id="app" >
    {{message}}
</div>

<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

el属性的意思是设置挂载点，通过css选择器设置Vue实例管理的元素

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

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

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

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

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

单标签不行，可以使用其他的双标签,但不包括使用HTML和BODY

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el：挂载点</title>
</head>
<body>
{{message}}
<p id="app"  class="app">
    {{message}}
     <span>{{message}}</span>
</p>

</body>
</html>


<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var app = new Vue({
        //最常用： el: "#app",
        // el: ".app",
        el: "div",
        data: {
            message: "黑马程序员"
        }
    })
</script>

data属性即数据对象，Vue实例需要使用的数据都会定义在data中。
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可（例如：对象的.语法，数组的索引语法）

对象如何获取属性，即对象.name

代码如下:

<!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>{{campus[0]}}</li>
        <li>{{campus[3]}}</li>
    </ul>
</div>

</body>
</html>


<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好 小黑！",
            school: {
                name: "黑马程序员",
                mobile: "400-618-9090",
            },
            campus: ["北京校区", "上海校区", "广州校区", "深圳校区"]
        }
    })
</script>

第二部分：本地应用。

用Vue开发网页效果。充分利用以下Vue指令,以案例巩固知识点。

三个部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地应用</title>
</head>
<body>
<div id="app">
    <h2 v-text="message+'!'">深圳</h2>
    <h2 v-text="info+'!'">深圳</h2>
    <h2>{{message+'!'}}深圳</h2>
</div>

</body>
</html>

<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "黑马程序员！！！",
            info: "前端与移动教研部"
        }
    })
</script>

效果如下：

总结：

v-text指令的作用是：设置标签的内容（textContent)
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
<!--2.html结构-->
<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>

</div>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            // content: "黑马程序员"
         //     把内容改成html结构：content:"<a href='http://www.itheima.com'>黑马程序员</a>"
        }
    })
</script>
</body>
</html>

效果如下：

总结：

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签.
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text.需要解析html结构使用v-html

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
<!--2.html结构-->
<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>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            food: "西兰花炒蛋"
        },
        methods: {
            doIt: function () {
                alert("做It");
            },
            changeFood: function () {
                // console.log(this.food);
                this.food+="好好吃!"
            }
        },
    })
</script>
</body>
</html>

效果如下：

总结：

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

计数器：

步骤：

1、data中定义数据：比如num

2、methods中添加两个方法：比如add(递增），sub（递减）

3、使用v-text将num设置给span标签

4、使用v-on将add，sub分别绑定给+，-按钮

5、累加的逻辑：小于10累加，否则提示

6、递减的逻辑：大于0递减，否则提示

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>

<style>
    .input-num{
       font-size: 50px;
       text-align: center;
    }
    button{
        width: 50px;
        height: 50px;
    }

</head> <body> <!--2.html结构--> <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"> </div> <!--1.开发环境版本，包含了有帮助的命令行警告--> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script> //3. 创建Vue实例 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> </html>

全部总结：

创建Vue示例时：el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为｛｛｝｝
v-html指令的作用是：设置元素的innerHTML

第二部分：网络应用。

三个部分：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show指令</title>
</head>
<body>
<!--2.html结构-->
<div id="app">
    <input type="button" value="切换显示状态" @click ="changeIsShow">
    <input type="button" value="累加年龄" @click ="addAge">
   <img v-show="isShow" src="http://www.itheima.com/images/logo.png">
   <img v-show="age>=18" src="http://www.itheima.com/images/logo.png">
</div>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data:{
            isShow:false,
            age:16
        },
        methods:{
            changeIsShow:function (){
                this.isShow = !this.isShow;
            },
            addAge:function (){
                this.age++;
            }
        },
    })
</script>
</body>
</html>

总结：

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

一些效果

实际操作中，频繁切换的元素要v-show,反之用v-if；因为操作dom元素对性能的消耗比较大；

所有代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show指令</title>
</head>
<body>
<!--2.html结构-->
<div id="app">
    <input type="button" value="切换显示" @click="toggleISfunction ">
   <p v-if="isShow">黑马程序员</p>
   <p v-show="isShow">黑马程序员 -v-show修饰</p>
   <h2 v-if="temperature>=35">热死啦</h2>
</div>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data:{
            isShow:false,
            temperature:20
        },
        methods:{
            toggleISfunction (){
                this.isShow = !this.isShow;
            }

        },
    })
</script>
</body>
</html>

总结：

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false从dom树中移除
频繁的切换选择v-show，反之使用v-if,前者的切换消耗小

简写形式：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>

</head>
<body>
<!--2.html结构-->
<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>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    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-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind,只保留：属性名
需要动态的增删class建议使用对象的方式图片切换：
总结：
列表数据使用数组保存
v-bind指令可以设置元素属性，比如src
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

<div id="app">
    <ul>
        <li v-for="item in arr">
            黑马程序员校区：{{item}}
        </li>
    </ul>
</div>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            arr: ["北京", "上海", "广州", "深圳"],
   
        } ,
  
    })

相同的代码：

    <ul>
        <li v-for="it in arr">
            黑马程序员校区：{{it}}
        </li>
    </ul>

效果如下：

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令</title>
</head>
<body>
<!--2.html结构-->
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li v-for="(it,index) in arr">
            {{index+1}}黑马程序员校区：{{it}}
        </li>
    </ul>
    <h2 v-for="item in vegetables" v-bind:title="item.name">
        {{item.name}}
    </h2>

</div>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            arr: ["北京", "上海", "广州", "深圳"],
            vegetables: [
                {name: "西兰花炒蛋"},
                {name: "蛋炒西蓝花"}
            ]
        } ,
      methods:{
          add:function (){
              this.vegetables.push({name:"花菜炒蛋"});
            },
          remove:function (){
              this.vegetables.shift();
            }
        },
     })
</script>
</body>
</html>

效果：

总结：

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in 数据（分别为每一项和索引）
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on补充</title>
</head>
<body>
<!--2.html结构-->
<div id="app">
  <input type="button" value="点击" @click="doIt(666,'老铁')">
    <input type="text" @keyup.enter="sayHi">
</div>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        methods:{
            doIt:function (p1,p2){
                console.log("做it");
                console.log(p1);
                console.log(p2);
            },
            sayHi:function (){
                alert ("吃了没");
            }
        },
     })
</script>
</body>
</html>

效果如下：

总结：

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上，.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
</head>
<body>
<!--2.html结构-->
<div id="app">
    <input type="button" value="修改message" @click="setM">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>{{message}}</h2>
</div>

<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    //3. 创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            message: "黑马程序员"
        },
        methods: {
            getM: function () {
                alert(this.message);
            },
            setM: function () {
                this.message = "酷丁鱼";
            }
        }
    })
    
</script>
</body>
</html>

总结：

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<-->表单元素的值(双向绑定，无论改变哪一边，另一边都会同步的进行改变）

小黑记事本：功能：记事，删除，统计

第一部分：新增

列表结构生成+数据准备

获取用户输入并且回车新增数据：

总结：

1、v-for指令的作用

2、v-model指令的作用

3、v-on指令，事件修饰符

第二部分：删除

点击删除

总结：

1、数据改变，和数据绑定的元素同步改变

2、事件的自定义参数（即传递给事件参数）

3、splice（索引，删除个数）

第三部分：统计

总结：

1、基于数据的开发方法，找到对应的数据进行改变即可，这里的个数本质上就是数组的长度。

2、v-text指令的作用

第四部分：清空

1、点击清楚所有信息（v-on 清空数组)

第五部分：隐藏

功能：没有数据时，隐藏元素（v-show，v-if 显示的条件为数组非空）

或者写在父类上

全部的总结：

列表结构可以通过v-for指令结合数据生成
v-on结合时间修饰符可以对事件进行限制，比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式（JS原来是基于dom元素进行操作）

第二部分：本地应用——Vue结合网络数据开发应用

axios网络请求库——>axios+vue——>天气预报的案例。

axios——功能强大的网络请求库

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
<!--2.html结构-->

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

</div>
<!--官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.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=6")
            // axios.get("http://autumnfish.cn/api/joke/list1234?num=6")
            .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: "jack"})
            .then(function (response) {
                console.log(response);
            }, function (err) {
                console.log(err);
            })
    }

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

总结

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求（运用了get和post方法，与请求同名）
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息。

axios+vue

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios+vue</title>
</head>
<body>
<!--2.html结构-->
<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>
<!--1.开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    // 接口1：随机获取一条笑话
    // 请求地址：https://autumnfish.cn/api/joke
    // 请求方式:get
    // 请求参数：无
    // 响应内容:随机笑话

    //3. 创建Vue实例
    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) {
                })
            },

        },
    })
</script>
</body>
</html>