目录

概述:

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（）内调用获取数据的方法。