Test Development Series --vue

learning target
js development framework development history
Ajax asynchronous submission process
Vue Introduction
Download and introduced Vue-
Vue data-driven model
Vue examples
{} {} Interpolation expression
Vue instruction
axios Profile
Exercise: vue + axios complete landing post requests and determine login status

Screenshot operating results
html code

learning target

ajax
About Vue and Vue instructions
axios

js development framework development history

Born 1995 JavaScript, you can operate the page DOM elements and styles, the page has some dynamic effect, but is still based primarily static.
Beginning in 2005,ajaxPopular, ajax asynchronous interaction with the backend, without having to refresh the page can update the data and rendering the page.Jquery
Year 2009Node.js.
Simply put Node.js is running on the server side JavaScript.
Node.js is an event-driven (I / O server-side JavaScript environment, based on Google's V8 engine, the speed of execution of Javascript V8 engine is very fast, very good performance.
2014 View MVVM （Angular 2009、React 2013）
Separate front and rear ends

Ajax asynchronous submission process

"Asynchronous Javascript And XML" (Asynchronous JavaScript and XML)
A method for creating interactive web applications web development technology of
Ajax
Create XMLHttpRequest
Jquery + Ajax examples
Advantage: Ajax can make asynchronous page updates. Yes, to a certain part of the page is updated without reloading the entire page.
Disadvantages:
- It is not conducive to seo optimization
- Damage browser's Back

Vue Introduction

Official website said: Vue.js (pronunciation / vju: /, similar to the view) is a JavaScript framework to build a progressive user interface. Other heavyweight frame is different, Vue incremental development bottom-up design. Vue core library focus only on the view layer.
https://cn.vuejs.org/

Download and introduced Vue-

download
- Download the file to a local Vue.js
- https://cdn.jsdelivr.net/npm/vue/dist/vue.js
Installation introduced
- ```
  <script>引入vue.js文件后
```
- Vue is registered as a global variable, a constructor

Vue data-driven model

JS distal lightweight data-driven framework
js change the display to the page by manipulating DOM, and Vue to achieve the update and display the page by manipulating data.
Virtual DOM
The core idea is: complex document DOM structure that provides a convenient tool, minimizing the DOM manipulation.
MVVM pattern

M: That Model, models, some basic operations, including data and
V: That View, view, page rendering results
VM: That View-Model, model and view ask bidirectional operation (without requiring developers to interference)

Vue examples

Example, may be included in the hanging element (EL), data (Data), the template (Template), methods (methods) and Lifecycle hooks (created, etc.) Options
app.$el === document.getElementById(‘app’)

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

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

{} {} Interpolation expression

Interpolation, not only can insert variables can also be operational

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

Vue instruction

v-model: a two-way binding
v-text: content update for binding elements
v-html: html content for updating the binding elements
v-show: The hidden element for displaying the value of the expression is true or false condition, the switching element attribute display CSS
v-if: The element for rendering the value of true or false condition expressions
v-for: for traversing data render elements or templates
v-on: a binding event on the element
v-bind: Binding data for the element property

axios Profile

https://github.com/axios/axios
axios is a HTTP client and browser-based Promise for the nodejs
Issue the http GET or POST request
Introduced<script src="axios.min.js"></script>

Exercise: vue + axios complete landing post requests and determine login status

Screenshot operating results

The login is successful, the pop-up prompt pop
Request parameter
jsonstr generally includes: status, message data and other basic components.
jsonstr alert came out
The results of the response

html code

<!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>