Vue（三阶段） - 《java技术栈》

2.1 下载Vuejs
2.2 Vue第一个入门应用
3. v-text和v-html
- 3.1 v-text
- 3.2 v-html
4.vue中事件绑定(v-on)
5.v-show v-if v-bind
6.v-for的使用
7 .v-model 双向绑定
8. 事件修饰符
9. 按键修饰符
- 9.1 enter 回车键
- 9.2 tab 键
10. Axios 基本使用
- 10.1 引言
- 10.2 Axios 第一个程序

2.1 下载Vuejs

//开发版本:
    <!-- 开发环境版本，包含了有帮助的命令行警，类似于源码版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
    <!-- 生产环境版本，优化了尺寸和速度，类似于mini版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-helloworld</title>
</head>
<body>
    <div id="app">
        <!-- 在插值表达式中进行字符串拼接 -->
        <h3>{{msg+"!"}}</h3>
        <!-- 在插值表达式中调用函数 -->
        <h3>{{msg.substring(msg.indexOf(" "))}}</h3>
        <h3>{{username}}</h3>
        <!-- 在插值表达式中进行逻辑操作 -->
        <h3>{{!flag}}</h3>
        <!-- 在插值表达式中使用对象 -->
        <h3>{{user}}</h3>
        <h3>{{user.name}}</h3>
        <!-- 在插值表达式中进行算术运算 -->
        <h3>{{user.age+1}}</h3>
        <!-- 在插值表达式中操作数组 -->
        <h3>{{!hobbies[4]}}</h3>
        <!-- 在插值表达式中使用三目运算符 -->
        <h3>{{flag?"是":"否"}}</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",//表示vue的作用范围，可作用于el指定元素及其子元素
            data:{
                msg:"hello vue",
                user:{name:"tom",age:25},
                flag:true,
                hobbies:["电视","电影","电玩",5,true]
            }
        });
    </script>
</body>
</html>

# 总结:
            1.vue实例(对象)中el属性:     代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法
            2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
            3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
            4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

3. v-text和v-html

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部类似于javascript 中 innerText

        <div id="app" class="aa">
        <span >{{ message }}</span>
        <span v-text="message"></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"蜗牛欢迎您"
            }
        })
    </script>

# 总结
            1.{{}}(插值表达式)和v-text获取数据的区别在于 
                    a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
                    b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部类似于javascript中 innerHTML

<div id="app" class="aa">
        <span>{{message}}</span>
        <br>
        <span v-text="message"></span>

        <br>
        <span v-html="message">xxxxxx</span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"<a href=''>蜗牛欢迎您</a>"
            }
        })
    </script>

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
        <h2>年龄:{{ age }}</h2>
        <br>
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello 欢迎来到蜗牛课堂!",
                age:23,
            },
            methods:{  //methods 用来定义vue中事件
                changeage:function(){
                    alert('点击触发');
                }
            }
        })
    </script>

# 总结:
        事件  事件源:发生事件dom元素  事件: 发生特定的动作  click....  监听器  发生特定动作之后的事件处理程序 通常是js中函数
        1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click
        2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
        3.在vue中事件的函数统一定义在Vue实例的methods属性中
        4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

4.2 Vue中事件的简化语法

        <div id="app">
        <h2>{{ age }}</h2>
        <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">
        <input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
           el:"#app",  //element: 用来指定vue作用范围
           data:{
               age:23,
           },    //data   : 用来定义vue实例中相关数据
           methods:{
               changeage:function(){
                   this.age++;
               },
               editage:function(){
                   this.age--;
               }

           }  //methods: 用来定义事件的处理函数
        });
    </script>

# 总结:
            1.日后在vue中绑定事件时可以通过@符号形式 简化  v-on 的事件绑定

4.3 Vue事件函数两种写法

        <div id="app">
        <span>{{count}}</span>
        <input type="button" value="改变count的值" @click="changecount">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
           el:"#app",
           data:{
               count:1,
           },
           methods:{
               /*changecount:function(){
                   this.count++;
               }*/
               changecount(){
                   this.count++;
               }
           }
        });
    </script>

# 总结:
            1.在Vue中事件定义存在两种写法  一种是 函数名:function(){}  推荐    一种是  函数名(){} 推荐

4.4 Vue事件参数传递

    <div id="app">
        <span>{{count}}</span>
        <input type="button" value="改变count为指定的值" @click="changecount(23,'xiaohei')">
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
           el:"#app",
           data:{
               count:1,
           },
           methods:{
               //定义changecount
               changecount(count,name){
                   this.count = count;
                   alert(name);
               }

           }
        });
    </script>

# 总结:
            1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数

小案例：使用vue实现购物车中商品数量的增减

    <div id="app">
        <input type="button" value="-" @click="minus">
        <span>{{count}}</span>
        <input type="button" value="+" @click="add">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1
            },
            methods:{
                minus(){
                    if (this.count>1)
                        this.count--;
                },
                add(){
                    if (this.count<10)
                        this.count++;
                }
            }
        });
    </script>

5.v-show v-if v-bind

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

<div id="app">
    <!--
        v-show: 用来控制标签展示还是隐藏的
    -->
    <h2 v-show="false">蜗牛教育欢迎你的加入!</h2>
    <h2 v-show="show">蜗牛教育欢迎你的加入这是vue中定义变量true!</h2>
    <input type="button" value="展示隐藏标签" @click="showmsg">

</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:false,
        },
        methods:{
            //定义时间
            showmsg(){
               this.show =  !this.show;
            }
        }
    })
</script>

# 总结
            1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
            2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示底层控制是DOM元素由于会频繁操作DOM，性能比v-show差

<div id="app">
    <h2 v-if="false">蜗牛教育</h2>
    <h2 v-if="show">蜗牛教育欢迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            show:false
        },
        methods:{

        }
    });
</script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

<div id="app">
    <img width="300" v-bind:title="msg" src="../images/loading.gif" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"页面正在加载中......",
            showCss:true,
        },
        methods:{
        }
    })
</script>

5.4 v-bind 简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 `v-bind:属性名` 简化之后 `:属性名`

小案例：点击实现图片切换

    <div id="app">
        <input type="button" value="点击实现图片切换" @click="changeImg">
        <img width="150" height="150" :src="src">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                srcs:["../images/loading.gif","../images/loadingstatic.jpg"],
                src:"../images/loading.gif",
                index:0
            },
            methods:{
                changeImg(){
                    this.index++;
                    if (this.index > 1) {
                        this.index=0;
                    }
                    this.src=this.srcs[this.index];
                }
            }
        });
    </script>

6.v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<div id="app">

    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--
       通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr" >
            {{index}} {{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} {{ user.name }}  === {{ user.age }} ==== {{ user.content }}
        </li>
    </ul>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"小陈",age:23},
            arr:["北京校区", "天津校区", "河南校区"],
            users:[
                {id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"},
                {id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},
            ]
        },
        methods: {}
    });
</script>

# 总结
    1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

7 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='蜗牛教育!';
            }
        }
    });
</script>

# 总结
        1.使用v-model指令可以实现数据的双向绑定 
        2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

# MVVM架构  双向绑定机制
    Model: 数据  Vue实例中绑定数据

    VM:   ViewModel  监听器

    View:  页面  页面展示的数据

8. 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符
    .stop
    .prevent
    .capture
    .self
    .once
    .passive

8.1 stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            }
        }
    });
</script>

8.2 prevent 事件修饰符

用来阻止标签的默认行为

        <!--用来阻止事件的默认行为-->
    <a href="http://www.baizhibest.com/" @click.prevent="aClick">蜗牛教育</a>

8.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

        <!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
    </div>

8.4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">蜗牛教育</a>

9. 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right

9.1 enter 回车键

用来在触发回车按键之后触发的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type="text" @keyup.tab="keytabs">

10. Axios 基本使用

10.1 引言

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染页面局部更新技术 Ajax

10.2 Axios 第一个程序

中文网站:https://www.kancloud.cn/yunye/axios/234845

安装: https://unpkg.com/axios/dist/axios.min.js

10.2.1 GET方式的请求

      //发送GET方式请求
    axios.get("http://localhost:8888/user/findAll?name=xiaochen").then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    });

10.2.2 POST方式请求

        //发送POST方式请求
    axios.post("http://localhost:8888/user/save",{
        username:"xiaochen",
        age:23,
        email:"xiaochen@zparkhr.com",
        phone:13260426185
    }).then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err);
    });

10.2.3 axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

 //1.创建一个查询所有请求
    function findAll(){
        return axios.get("http://localhost:8888/user/findAll?name=xiaochen");
    }

    //2.创建一个保存的请求
    function save(){
        return axios.post("http://localhost:8888/user/save",{
            username:"xiaochen",
            age:23,
            email:"xiaochen@zparkhr.com",
            phone:13260426185
        });
    }

    //3.并发执行
    axios.all([findAll(),save()]).then(
        axios.spread(function(res1,res2){  //用来将一组函数的响应结果汇总处理
            console.log(res1.data);
            console.log(res2.data);
        })
    );//用来发送一组并发请求