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样式等。

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

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

 {{state}}

• v-on  为HTML标签绑定事件

 //这种更为简洁

或者

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

 为2时渲染

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

为5时display有效

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

{{i+1}},{{it}}
 //my为自己定义的一个列表，i为序号,序号也就是下标，从0开始遍历.

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

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

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

 步骤:

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

表单:

  

        
        
        {{brands.name}}
        

        
        {{brands.pwd}}
        

        
        {{brands.url}}
        


    

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

            }

        })

整个测试代码:

    
    





     {{state}}

    
 为2时渲染
    
 为3时渲染
    
 为4时渲染
    
为5时display有效

    
{{i+1}},{{it}}



    测试url

    

        
        
        {{brands.name}}
        

        
        {{brands.pwd}}
        

        
        {{brands.url}}
        


    

Vue的生命周期

引用黑马程序员课程的一节。

 通常，会使用它的mounted方法，它被调用时则说明HTML页面渲染完成，可用mounted（）内调用获取数据的方法。