Java Web学习 VUE

1 概述

(1) Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
(2) 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了DOM操作上。
(3) Model和View是通过ViewModel对象进行双向绑定的，而ViewModel对象是Vue提供的。
(4) 当我们输入内容，而展示Model的view随之实时的展示我们输入的内容，这就是双向绑定的效果。
//model(即与Vue对象中的一个属性或方法)会与view绑定，并相互影响。

 

2 快速入门

(1) 新建HTML页面，引入 Vue.js文件
<script src="js/vue.js"></script>
(2) 在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el: "#app",
    //指定作用范围，即id为app的div。
    data(){
        return {
            username: ""
            //view所绑定的属性在此定义。
        }
    }
});
/* 创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
    el：用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
    data：用来定义数据模型
    methods：用来定义函数。这个我们在后面就会用到*/

(3) 编写视图

<div id="app">
    <input name="username" v-model="username" >//v-model的值必须与Vue中data数据模型一致。
    {{username}}
    //{{}}是Vue中定义的插值表达式，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
    //插值表达式与EL表达式类似，若调用对象的属性，首先将首字母大写，然后加上get，自动调用其getXxxx()方法。
</div>

 

3 Vue指令

(1) Vue指令

v-bind：为HTML标签绑定属性值，如设置 href,css 样式等。
v-model：在表单元素上创建双向数据绑定。
v-on：为HTML标签绑定事件。
v-if、v-else、v-else-if：条件性的渲染某元素，判定为true时渲染,否则不渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
v-for：列表渲染，遍历容器的元素或者对象的属性。

(2) v-bind&v-model指令

<1> v-bind
<1.1> 该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化。
//标签属性与与Vue对象中的一个属性绑定。
<1.2> 代码实现

<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a>//简写写法
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        metthod:{
        },
        data(){
            return {
                url:"https://www.baidu.com"
                //当属性url改变，<a>标签中的href属性也会随之改变。
            }
        }
    });
</script>

<2> v-model
<2.1>该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。
//表单数据与Vue对象中的一个属性绑定。
<2.2>代码实现

<input name="username" v-model="username">
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                //当表单中输入数据，username值也会随之改变。
                //当username值发生变化，表单中数据也会发生变化。
            }
        }
    });
</script>

(3) v-on指令

<1> 该指令可以为元素添加事件。
//元素与Vue对象中的一个方法绑定。
<2> 代码实现

<input type="button" value="一个按钮" v-on:click="show()">
//注意： v-on: 后面的事件名称是之前原生事件属性名去掉on。如：失去焦点事件属性名是onblur，而在vue中使用时v-on:blur。
<input type="button" value="一个按钮" @click="show()">//简写写法
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        //上面代码绑定的show()需要在Vue对象中的methods属性中定义出来。
        methods: {
            show(){
                alert("按钮被点击");
            }
        }
    });
</script>

(4) 条件判断指令

<1> v-if&v-else-if&v-else
<1.1> 条件性的渲染某元素，判定为true时渲染,否则不渲染。
//通过Vue对象中的属性判断，若结果为true则显示元素，若为false，则不显示元素。
<1.2> 代码实现

<div id="app">
    <div v-if="count == 1">div1</div>
    <div v-else-if="count == 2">div2</div>
    <div v-else>div3</div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                count:3
                //当count模型的数据是3时，在页面上展示div3。
            }
        }
    });
</script>

<2> v-show
<2.1> v-show和v-if效果一样。但v-show不展示的原理是给对应的标签添加displaycss属性，并将该属性值设置为none，这样就达到了隐藏的效果。而v-if指令是条件不满足时根本就不会渲染。
<2.2> 代码实现

<div id="app">
    <div v-show="count == 3">div v-show</div>
</div>
<div v-show="count == 3">div v-show</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                count:3
                //当count模型的数据是3时，在页面上展示div v-show。
            }
        }
    });
</script>

(5) v-for指令

<1> 列表渲染，遍历容器的元素或者对象的属性。
<2> 格式

<标签 v-for="变量名 in 集合">
    {{变量名}}
</标签>
或
<标签 v-for="(变量名,i) in 集合">//若需要索引变量i
    <!--索引变量i是从0开始，所以要表示序号的话，需要手动的加1-->
    {{i + 1}} {{变量名}}
</标签>

<3> 代码实现

<div id="app">
    <div v-for="addr in addrs">
        {{addr}}
        //每遍历一次，div与div中的元素都生成一次。
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });
</script>

 

4 生命周期

(1) Vue每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
创建前：beforeCreate()
创建后：created()
载入前：beforeMount()
挂载完成：mounted()//Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。
更新前：beforeUpdate()
更新后：updated()
销毁前：beforeDestroy()
销毁后：destroyed()
(2) 代码实现

new Vue({
    el:"#app",
    mounted(){
        //Vue初始化成功，HTML页面渲染成功，发送Ajax请求。
            axios({
            method:"post",
            url:"url",
            data:js对象
        }).then(function (resp){
            alert(resp.data);
        });
    }
});