日常总结-3

Servlet是java与前端页面进行交互的一种机制

Vue是一套构建用户界面的渐进式框架  渐进式(构建项目可以由简单到复杂)

优点:1.体积小 2.运行效率高(虚拟DOM) 3.双向数据绑定 4.生态丰富(市面有大量项目待开发)

语法:1.const 定义常量的 2.let:作用和var类似,有作用域(区别) 3.var特点:没有作用域

MVVM设计思想,核心  减少代码的耦合性 MVC模式是针对于后端服务器

MVVM是前端模拟后端为了解耦的一种设计思想

双向数据绑定的原理

原理步骤:

1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟DOM对象,第一时间更新Model中的属性

2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一时间通知真实的DOM对象,至此页面数据发生变化

DOM对象:控制页面数据的展现和变化 --JS的原生对象

虚拟DOM:VUE中模拟DOM创建的对象  作用:预编译

属性绑定:

1.v-bind动态的为属性赋值

2.class绑定 如果用户需要切换class,则可以使用该操作

3.class绑定 数据是否展现 可以通过(class类型:true/false)

分支结构:

用法:如果数据为真,则展现html标签

语法:v-if/v-else-if/v-else

要求:v-if可以单独使用

另外两个必须与v-if连用

循环结构:

用法:通过循环 展现标签+数据

语法:v-for(value,index) in array

        v-for(value,key,index) in obj

        v-for(user in userList) 后续通过user.属性取值

表单操作:一般数据进行提交时都会提交表单

                每个表单几乎都会action,action现在几乎不用(同步操作)

                一般通过 阻止默认行为的方式禁用action,之后手写点击事件触发后续操作(Ajax)

        用户录入标签体 1.文本框 2.单选 3.多选 4.下拉框 5.文本域

                掌握各个标签的双向数据绑定的写法 值有个使用数组

        表单修饰符

        1.number(只能输入数值)

        2.trim(去除左右两端空格,不算中间的空格)

        3.lazy(离焦事件)

计算属性:(computed)

        可以封装复杂操作

        内部有缓存机制,只需要计算一次,多次调用效率高

数组操作:

        push()在结尾追加元素

        pop()在结尾删除元素

        shift()在开头删除一个元素

        unshift()在开头添加一个元素

        splice()替换数组中的数据

        this.array.spilce(0,1,this.msg)//替换开头的第一个元素

        this.array.splice(0,2,msg)//替换前两个元素,替换后的元素变成一个

        this.array.splice(0,2,,this.msg,this.msg)//替换前两个元素,替换后的元素还是两个

        this.array.splice(this.array.length-1,1,this.msg)//替换最后一个元素

        this.array.splice(1,1)//如果只有2个参数,则表示删除

                sort()数组排序

                reverse()数组反转

VUE生命周期(8个)

        创建前/后 载入前/后 更改前/后 结束前/后

        初始化周期:只需记住beforeCreate vue对象实例化之前(刚开始)

                                          Mounted 说明VUE对象实例化成功(DIV渲染完成)

生命周期的作用

如果需要对VUE对象中的数据进行额外操作,则使用生命周期函数

目的:框架的扩展性更好(实现定制化)

Restful风格

特点

1.参数需要使用/进行分割

2.参数的位置是固定的

3.restful请求方法路径不能出现动词

优化:

如果(参数名称)与对象中的属性名称一致

Axios结构说明:

1.JS中原生提供了Ajax操作   弊端:操作特别复杂 易用性较差

2.JQuery中的Ajax  封装了原生的JS Ajax提高了开发效率

3.Axios是VUE中默认支持的Ajax的请求方式

回调地狱问题:

前端中如果需要发起大量Ajax请求,并且Ajax请求有嵌套的关系,则可能引发回调地狱

get与delete传到后台接参时如果是单个参数需要用到@PathVariable注解接参,多个参数时需要用到对象接参,@PathVariable可以省略,前端传单个参数时需要用到反引号动态接参参数用到${},通过id删除时需要传对象,put传参时?拼接即  "?id="+id

post与put增加和修改 需要把前端的k-v参数转化的JSON串,后台转化为对象,用到注解@ResquestBody

重定向规则:

1.请求多次/响应多次

2.URL地址信息发生变化

3.不可以传递数据