测试开发系列之——vue

学习目标

ajax
Vue简介和Vue指令
axios

js开发框架发展历史

1995 JavaScript的诞生，可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
2005年开始，ajax流行，ajax与后端异步交互，不用刷新页面就可以更新页面的数据和渲染效果。Jquery
2009年Node.js。
简单的说Node.js就是运行在服务端的JavaScript。
Node.js是一个事件驱动（I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
2014 Vue MVVM （Angular 2009、React 2013）
前后端分离

Ajax异步提交流程

“Asynchronous Javascript And XML” （异步JavaScript和XML)
一种创建交互式网页应用的网页开发技术
Ajax
创建XMLHttpRequest
Jquery+Ajax实例
优点：Ajax可以使网页实现异步更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
缺点：
- 不利于seo优化
- 破坏浏览器的后退

Vue介绍

官网说：Vue.js（读音/vju:/，类似于view）是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层。
https://cn.vuejs.org/

Vue-下载和引入

下载
- 下载Vue.js文件到本地
- https://cdn.jsdelivr.net/npm/vue/dist/vue.js
安装引入
- ```
  <script>引入vue.js文件后
```
- Vue被注册为一个全局的变量，是一个构造函数

Vue数据驱动模型

轻量级的以数据驱动的前端JS框架
js通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。
虚拟的DOM
核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。
MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图问的双向操作（无需开发人员干涉）

Vue实例

实例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项
app.$el === document.getElementById(‘app’)

<div id="app">
	{{message}}
</div>

var app = new Vue{{
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
}}

{{}}插值表达式

插值，不仅可以插变量，还可以进行运算

{{'helloworld'.split('').reverse().join('')}}

Vue指令

v-model：用于双向绑定
v-text：用于更新绑定元素中的内容
v-html：用于更新绑定元素中的html内容
v-show：用于根据表达式的值的真假条件显示隐藏元素，切换元素的display CSS属性
v-if：用于根据表达式的值的真假条件渲染元素
v-for：用于遍历数据渲染元素或模板
v-on：用于在元素上绑定事件
v-bind：用于在元素属性上绑定数据

axios简介

https://github.com/axios/axios
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端
发出http的GET或POST请求
引入<script src="axios.min.js"></script>

练习：vue+axios完成登陆post请求，并判断登陆状态

运行结果截图

登录成功，弹出弹窗提示
请求参数
jsonstr一般包括：status、message和data等基本组成部分。
jsonstr alert出来
响应的结果

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue/vue.js"></script>
    <script src="vue/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{},
            methods: {
                toParams(param) {
                    var result = ""
                    for (let name in param) {
                        if (typeof param[name] != 'function') {
                            result += "&" + name + "=" + encodeURI(param[name]);
                        }
                    }
                    return result.substring(1)
                },
                requestAjax(){
                    let params = {"action":"login","username":"zs","userpwd":"666"};
                    //将json转成&连接的字符串
                    alert(this.toParams(params));
                    //axios post请求                    
                    axios.post("http://localhost:8080/JavaWebDemo/userServlet",this.toParams(params))                
                    .then(response =>{
                        let jsonstr = response.data;
                        alert(jsonstr);
                        alert("登录成功");
                    })
                }
            },
            created () {
                this.requestAjax();
            },
            mounted () {
            }           
        })
    </script>  
</body>
</html>

anniewhite

发布了14 篇原创文章 · 获赞 1 · 访问量 857

私信关注