07.JavaWeb-Vue+elementUI

 

1.Vue

        功能替代JavaScript和jQuery，基于JavaScript实现的前端框架

1.1配置Vue

1.1.1引入vue库

        方法一：通过cdn链接引入最新版本的vue（可能会慢些）

        方法二：将vue库下载到本地，通过相对路径引入

1.1.2创建vue实例

 1.1.3创建vue模板

  
{{ message }}

         {{message}}是一个模板表达式，它会被Vue实例的message数据所替代

1.2 axios

        发请求的工具，作用与$.ajax一致

axios.post("login",this.user).then(res =>{
    //res后台返回的结果
    console.log(res)
    alert(res.data)
})

         注意：axios数据提交的是一个字符串，ajax提交的是对象，可以加注解将字符串转换成注解

//@RequestBody将json格式的字符串转换为对象
public void login(@RequestBody User user){}

1.3 element-ui

        基于vue的组件库，地址：(Element - The world's most popular Vue UI framework)

        里面有很多已经做好的很好看的也好用的组件（按钮、输入框、开关。。。）

    

        
            
            
            
            登录
        
    

1.3.1配置使用环境

        获取配置文件的地址：(UNPKG - element-ui)

        1.在webapp中创建css/vue与js文件夹用来存储，vue中放一个element-index.css文件和一个fonts文件夹里面有两个字体相关文件，js中放一个vue文件夹里面有axios.min.js和elemant-index.js和vue.js

        2.在页面head中连接这些文件，并配置vue

        3.创建elementUI的组件

    

        
            
            
            
            登录
        
    

         4.创建Vue对象

        要想使用elementUI的组件，还需要创建Vue对象

1.4 双向数据绑定

        Vue.js框架实现的一项核心功能就是“双向数据绑定”，所谓双向数据绑定就是指View（视图）和Model（模型）的数据相互同步。（双向数据绑定通过v-model来实现）

1.4.1 v-model原理*

        先为绑定的元素添加value属性，value与Vue实例中指定的数据绑定，再为元素添加一个事件监听器，当用户输入时触发并更新value值，从而更新Vue实例中的数据对象

1.4.2 延迟更新数据

        通过v-model绑定的数据会在文本输入框改变时同步更新Vue数据对象，但我们一般想要的是用户输入完毕、光标离开输入框时再更新数据，这就要用到 .lazy修饰符

1.4.3 将用户输入的值自动转为数值类型（Number）

        注意：如果用户输入的值无法转换为有效的数值，数据属性会变成NaN

1.4.4 删除文本输入框内容首尾空格