JavaWeb中的VUE快速入门

概述:

Vue的安装

Vue的常用指令

通过VUE高效提交表单调用接口请求

Vue的生命周期

概述:

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。Vue为当前的国内前端主流框架，基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程关注点放在数据上。

Vue的安装

安装 — Vue.js (vuejs.org)

Vue的常用指令

v-bind 为HTML标签绑定属性值，如设置href,css样式等。

<a v-bind:href="url">测试url</a>  //v-bind:href没有空格,在2019的IDEA测试红色报错但没空格能运行,反而给了空格，不爆红却无法正常运行。 这里的url在data中进行定义。

v-model 在表单元素上创建双向数据绑定。

<input v-model = "state"> {{state}}

v-on 为HTML标签绑定事件

<input type="button" value="提交"@click="show"> //这种更为简洁

或者

<input type="button" value="提交"v-on:click="show">

v-if v-else v-else-if v-show 条件性的渲染某元素，判定位true时渲染，否则不渲染。

<div v-if ="state ==2"> 为2时渲染</div>

v-show 根据条件展示某元素，区别在于切换的是display属性的值。

<div v-show="state==5">为5时display有效</div>

v-for 列表渲染，遍历容器的元素或者对象的属性。

<div v-for="(it,i) in my " align="center">{{i+1}},{{it}}</div> //my为自己定义的一个列表，i为序号,序号也就是下标，从0开始遍历.

通过VUE高效提交表单调用接口请求

利用VUE的数据绑定。以后无须通过document.getelement()方法获取。

在这之前，需要引入 VUE 和 AXIOS的JS文件。

<script src="./vue.js"></script>
<script src="./axios.js"></script>

步骤:

创建VUE对象
创建表单
在data定义数据，方便与表单中的各个属性进行绑定，所以其值类型为 {} （貌似像JSON）
用VUE的v-on 为表单的提交绑定事件。可定义为在点击时调用一个函数。而这个函数放在VUE对象的methods中。

表单:

  <form>
        <!--      表单提交数据-->
        <input v-model="brands.name">
        {{brands.name}}
        <br>
        <input v-model="brands.pwd">
        {{brands.pwd}}
        <br>
        <input v-model="brands.url">
        {{brands.url}}
        <br>
<input type="button" value="提交"v-on:click="show">
    </form>

VUE对象: data中的brands对应表单里的brands,可以发现VUE对象根本未定义brands的任何属性。但其点击提交的回调函数经测试依然能准确获取。

需要注意的是AJAX请求内的this是windows对象,并不是我们所需要的vue对象，用临时变量在axios外指定为当前对象（也就为VUE对象）。

new Vue({
        el :"#app",
        data(){
            return {
                username: "",
                brands : {},
                my:  ["北京","上海","杭州"],
                url : "https://www.baidu.com",
                state : 4

            }
        },
        methods: {

            show(){

                let  _this =this;
                    axios({
                        method: "post",
                        url : "http://localhost:8080/test",
                        data: {
                              username : _this.brands.name,
                              pwd : _this.brands.pwd
                        }

                    }).then(function (f1) {

                            alert(f1.data)
                        })
                    }

            }

        })

整个测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-DEMO</title>
</head>
<body>

<div  id="app">

    <input v-model = "state"> {{state}}

    <div v-if ="state ==2"> 为2时渲染</div>
    <div v-if ="state ==3"> 为3时渲染</div>
    <div v-if ="state ==4"> 为4时渲染</div>
    <div v-show="state==5">为5时display有效</div>
<!--    v-for测试-->
    <div v-for="(it,i) in my " align="center">{{i+1}},{{it}}</div>


<!--    v-bind测试-->
    <a v-bind:href="url">测试url</a>

    <form>
        <!--      表单提交数据-->
        <input v-model="brands.name">
        {{brands.name}}
        <br>
        <input v-model="brands.pwd">
        {{brands.pwd}}
        <br>
        <input v-model="brands.url">
        {{brands.url}}
        <br>
<input type="button" value="提交"v-on:click="show">
    </form>






</div>





<script src="./vue.js"></script>
<script src="./axios.js"></script>




<script>

    new Vue({
        el :"#app",
        data(){
            return {
                username: "",
                brands : {},
                my:  ["北京","上海","杭州"],
                url : "https://www.baidu.com",
                state : 4

            }
        },
        methods: {

            show(){

                let  _this =this;
                    axios({
                        method: "post",
                        url : "http://localhost:8080/test",
                        data: {
                              username : _this.brands.name,
                              pwd : _this.brands.pwd
                        }

                    }).then(function (f1) {

                            alert(f1.data)
                        })
                    }

            }

        })



</script>

</body>
</html>