Web前端快速入门（Vue&Ajax，前端与服务器的交互）

目录

Vue

Ajax

Vue

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

基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

官方文档：安装 — Vue.js

Vue快速入门

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

 二、在JS代码区域，创建Vue核心对象，定义数据模型

 new Vue({ e1:\"#app\", data: message:\"Hello Vuel\" }})

 e1:代表Vue要控制哪个区域 #为id选择器（类似于css）

data：数据模型（双向绑定）

 三、编写视图

  {{ message }}

 插值表达式：

形式：{{表达式}}。

内容可以是：变量、三元运算符、函数调用、算数运算

v-model在view中叫做指令

常用指令

 v-bind 

哈哈哈简化写法哈哈哈

 new Vue({ e1:\"#app\", data: url:\"https://www.itcast.cn\" }})

 v-model

 注意：通过v-bind 或者v-model绑定的变量，必须在数据模型中声明。 

     
  <!-- 简化写法 --> 
  new Vue({ e1:\"#app\", data:{ }, methods:{ handle:function(){ alert(\"被点了一下\"); } } })

 v-if

年龄{{age}}，经判定为：

 <span v-if=\"age\" 年轻人

35 && age中年人

老年人

和java中的if语句相同，如果第一条if判断为true则执行第一条，进行渲染，否则不断往后判断

v-show

 年龄{{age}}，经判定为：

 <span v-show=\"age\" 年轻人

只要条件判断成立则渲染

v-for

      
 <!--  --> <!-- 简化写法 --> <!-- 链接1 链接2 --> <!--  -->  
{{addr}}
 
{{index}}{{addr}}
 
 new Vue({ el:\"#app\", data:{ addrs:[\"北京\",\"上海\",\"西安\",\"成都\",\"深圳\"] }, methods: { } })

示例

     
 
 
 
编号
 
姓名
 
年龄
 
性别
 
成绩
 
等级
 
 
 
{{index+1}}
 
{{user.name}}
 
{{user.age}}
 
 男 女 
 
{{user.score}}
 
 =85\">优秀 =60\">及格 不及格 
 
 
 
 new Vue({ el:\"#app\", data:{ users:[{ name:\"Tom\", age:20, gender :1, score:78 }] } })

 生命周期

  生命周期：一个对象从创建到销毁的整个过程。

  生命周期的八个阶段：每触发一个生命周期的事件，会自动执行一个生命周期的方法（钩子）

 可以与methods方法平级定义一个钩子方法，一旦触发了这个生命周期的事件，就会自动触发生命周期的方法。

mounted：Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

Ajax

概念：异步的JavaScript和XML

作用：

       数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

       异步交互：可以在不加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，                                   如：搜索联想、用户名是否可用的校验等。

 步骤：

1.准备数据地址

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

Axios

介绍：Axios对原生的Ajax进行封装，简化书写，快速开发

官网：Axios中文文档 | Axios中文网

Axios入门：

1.引入Axios的js文件

2.使用Axios发送请求，并获取数据结果

       function get(){  //通过axios发送异步请求-get axios({ method:\"get\", url:\"http://yapi.smart-xwork.cn/mock/169327/emp/list\"  }).then(result=>{ console.log(result.data);  }) } function post(){ //通过axios发送异步请求-post  axios({ method:\"post\", url:\"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById\", data:\"id=1\"  }).then(result=>{ console.log(result.data);  }) }

 method:\"get\"为请求方式

 url:\"http://yapi.smart-xwork.cn/mock/169327/emp/list\"为服务器路径

.then(result=>{
            console.log(result.data);为得到服务器响应后结果

简化方式：

 发送GET请求

axios.get(\"url:\"http://yapi.smart-xwork.cn/mock/169327/emp/list\").then((result)=>{

console.log(result.data);

});

发送POST请求

axios.post(\"url:\"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById\"，\"id=1\").then((result)=>{

console.log(result.data);

});