java微博 13 AJAX

AJAX

异步的JavaScript和XML

作用：

1.与服务器进行数据交换 用HTML和AJAX来替换JSP页面

2.异步交互：可以在不重新加载网页的情况下，与服务器进行数据交换

异步：xhr

Axios

是对原生的AJAX进行封装 简化书写

JSON

JavaScript OBject Notation JavaScript对象表示法

Vue

是一套前端框架 免除了原生JavaScript中的DOM操作，简化书写 

基于MVVM（model-View-ViewModel）思想，实现数据的双向绑定，将变成的关注点放在数据上

Vue 使用起来是比较简单的，总共分为如下三步：

1. 新建 HTML 页面，引入 Vue.js文件

   <script src="js/vue.js"></script>

2. 在JS代码区域，创建Vue核心对象，进行数据绑定

   new Vue({
       el: "#app",
       data() {
           return {
               username: ""
           }
       }
   });

   创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

   • el ： 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值

   • data ：用来定义数据模型

   • methods ：用来定义函数。这个我们在后面就会用到

3. 编写视图

   <div id="app">
       <input name="username" v-model="username" >
       {{username}}
   </div>

   {{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

Vue 指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用的指令有：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是

https://element.eleme.cn/#/zh-CN

Element 布局

Element 提供了两种布局方式，分别是：

• Layout 布局

• Container 布局容器