java微博 13 AJAX

异步的JavaScript和XML

作用：

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

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

异步：xhr

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

JavaScript OBject Notation JavaScript对象表示法

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

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

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

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

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

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

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

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

   • data ：用来定义数据模型

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

3. 编写视图

       
       {{username}}
   

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

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

常用的指令有：

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

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

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

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

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

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

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

• Layout 布局

• Container 布局容器