前端知识点

双向绑定：

在Vue中，使用双向绑定非常容易，我们仍然先创建一个VM实例：

$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            email: '',
            name: ''
        }
    });
    window.vm = vm;
});

然后，编写一个HTML FORM表单，并用v-model指令把某个和Model的某个属性作双向绑定：

<form id="vm" action="#">
    <p><input v-model="email"></p>
    <p><input v-model="name"></p>
</form>

我们可以在表单中输入内容，然后在浏览器console中用window.vm.$data查看Model的内容，也可以用window.vm.name查看Model的name属性，它的值和FORM表单对应的是一致的。

如果在浏览器console中用JavaScript更新Model，例如，执行window.vm.name=‘Bob’，表单对应的内容就会立刻更新。

ajax请求有哪些参数

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。 设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格 式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

实例：

$(function(){
   $('#send').click(function(){
        $.ajax({
            type: "GET",

             url: "test.json",

            data: {username:$("#username").val(),content:$("#content").val()},

            dataType: "json",

            success: function(data){
                        $('#resText').empty();   //清空resText里面的所有内容

                        var html = '';

                         $.each(data,function(commentIndex, comment){
                               html += '<divclass="comment"><h6>' + comment['username']

                                         +':</h6><p class="para"' + comment['content']

                                         +'</p></div>';

                         });

                        $('#resText').html(html);

                      }

         });

    });

});

Vue里面的请求：

async getAllGoodsDesc(){
                try {
                    this.$axios.get('/commodity/listByPriceBetweenDesc',{
                        params: {
                            pageNum: this.pageNum,
                            pageSize: this.pageSize,
                            firstPrice: this.firstPrice,
                            lastPrice: this.lastPrice
                        }
                    }).then(res => {
                        console.log(res);
                        this.allGoods = res.data.data.list;
                        this.total = res.data.data.total;
                    })
                }catch (error) {
                    console.log(error)
                }
            }

一个组件向另一个组件传参：
例如把搜索框的参数传到另一个页面再搜索：

getSearch(){
          // const _this = this
          // this.$route.replace('/search')
          this.$router.push({
              path:'/search',
              query: {
                  commodityName : this.commodityName
              }
          })
          // _this.$router.push({name: '路由名称', params: { id: 10 }})
      },

然后在在别的vue文件中接收：

getParams(){
                /*//取由mhead带过来的参数
                const routerParams = this.$route.commodityName
                //将数据放在当前组件的数据内
                this.commodityName = routerParams*/

                this.commodityName = this.$route.query.commodityName;
/*                console.log("--------------");
                console.log(this.commodityName);
                console.log("--------------");*/
                this.getAllGoods();
            }

组件定义：

定义一个vue文件，编写组件内容
然后再在另一个vue文件的script标签里面导入：

最后再在

里面定义

ajax定义post请求：

$.ajax({
			"url":"user/handle_register.do",
			"data":$("#form-reg").serialize(),//序列化表单值："username=Hello&password=123456"
			"type":"post",
			"dataType":"json",
			"success":function(obj) {
				if (obj.state == 0) {
					alert(obj.message);
				} else {
					alert("注册成功！");
				}
			},
            "error":function(obj) {
                }
		});

vue的生命周期是什么

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed

vue生命周期的在项目中的执行顺序

data () {
return {
rendered: false,
}
}
…
1.beforeCeate(){
console.log(this.rendered); // undefined
}

2.created() {
console.log(this.$el);//undefined
console.log(this.rendered); // false
}

3.beforeMount() {
console.log(this.$el)；//undefined
}

4.mounted() {
console.log(this.$el);
}

5.beforeDestroy(){
console.log(this.$el);
console.log(this.rendered);
}

6.destroyed() {
console.log(this.$el);
console.log(this.rendered);
}