vue的简单使用

最新推荐文章于 2023-02-26 20:03:13 发布

上帝123

最新推荐文章于 2023-02-26 20:03:13 发布

阅读量459

点赞数 3

分类专栏：后端前端文章标签： java vue.js

本文链接：https://blog.csdn.net/qq_36116242/article/details/114224844

版权

后端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

1、Vue简介

1.1 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库整合。另一方面，Vue 也完全能够为复杂的单页应用提供驱动。
- 渐进式: 可以有选择性的使用该框架的一个或多个组件，并不需要将框架的全部组件都用在应用中；当应用业务需要用到更高级的，我们后面可以再加入高级组件。

1.2 安装

方式一: 直接下载，并用 <script> 标签引入。
- 下载地址: https://github.com/vuejs/vue (版本2.6.10)
- 解压后，在dist目录下，可得到vue.js文件
方式二: NPM

1.创建一个新的工程, 选择静态web类型工程:

2.初始化项目: npm init

3.安装Vue，输入命令：npm install vue

4.安装vue之后，项目工程会出现node_modules文件夹，并且在下面有一个vue文件夹。

2、Vue：快速入门

Vue入门代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <!-- 引入Vue -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- View 视图 -->
    <div id="app">
        {{message}}
    </div>
    
    <!-- Vuejs代码 -->
    <script type="text/javascript">
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 指定Vue渲染的html元素 element
            data : { // 数据对象 Model
                message : 'Vuejs入门到精通...'
            }
        });
    </script>
</body>
</html>

创建Vue实例: new Vue()来创建Vue实例
构造函数接收一个json对象，json对象中有一些属性:
- el: 是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data: 数据对象，里面可以自定义很多属性，都可以渲染到视图中
- 页面中的 div 元素中，通过{{message}}的方式，来渲染刚刚定义的message属性。

3、Vue：插值表达式

语法: {{数据对象中的属性|运算表达式}}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <!-- 引入Vue -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!-- View 视图 -->
    <div id="app">
        {{message}}
        <br/>
        <!-- 插值表达式: 算术运算符 -->
        {{x + 200}}
        <br/>
        <!-- 插值表达式: 三目运算符 -->
        {{x > 50 ? '大于50' : '小于50'}}
    </div>

    <!-- Vuejs代码 -->
    <script type="text/javascript">
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 指定Vue渲染的html元素 element
            data : { // 数据对象 Model
                message : 'Vuejs入门到精通...',
                x : 100
            }
        });
    </script>
</body>
</html>

4、Vue：数据绑定指令

作用:【双向绑定】

v-model绑定html元素的value值到data对象，data对象中的属性又可以绑定到html元素的value。
语法: v-model=”数据对象中的属性名” 或 v-model=”数据对象中的属性名.变量名”
开发API：https://cn.vuejs.org/v2/api/

核心代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs数据绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        姓名：<input type="text" v-model="name"/><br/>
        年龄：<input type="text" v-model="user.age"/><br/>
        性别：<input type="text" v-model="user.sex"/><br/>
        <hr/>
        姓名：{{name}} 年龄：{{user.age}} 性别：{{user.sex}}
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象(必须先初始化)
                name : '周星星',
                user : {
                    age : '18',
                    sex : '男'
                }
            }
        });
    </script>
</body>
</html>

5、Vue：属性绑定指令

作用:【单向绑定】

v-bind绑定html元素的属性值，只能从data对象中取属性绑定到html元素的属性值。
语法: v-bind:html元素的属性值=”数据对象中的属性名”
简写: :html元素的属性值=”数据对象中的属性名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs属性绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind: 绑定html元素的属性值 -->
        <font v-bind:color="color" v-bind:size="size">周星星</font>

        <hr/>
        <!-- 简写: html元素的属性值 -->
        <font :color="color" :size="size">周小星</font>

        <hr/>
        <!-- 拼接多个颜色值 -->
        <font :color="color1 + color2" :size="size">周大星</font>

        <!-- url带参数值 -->
        <a :href="'http://www.baidu.com?id='+ id">百度</a>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象(必须先初始化)
                color : 'red',
                color1 : 'yellow',
                color2 : 'green',
                size: 10,
                id : 100
            }
        });
    </script>
</body>
</html>

6、Vue：事件处理之事件指令

作用: 为html元素绑定事件
语法: @click=”函数名()” @html元素的事件名把前面的on去掉
说明: 过时写法：v-on:click=”函数名()”，此写法在Vue.js 1.x版本中使用，2.x版本中推荐使用@click

常用事件指令:

@click：单击事件
@blur：失去焦点事件
@keyup：键盘按键按下并松开事件
@focus：获取焦点事件
@change：对应onchange改变事件
@keydown：键盘按键按下事件
@keypress：同上
@mousedown：鼠标按下事件
@mouseup：鼠标按下弹起事件
@mouseenter：鼠标进入事件
@mouseleave：鼠标离开事件
@mouseover：鼠标进入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs事件绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model.number : 指定x变量的数据类型 -->
        x值：<input type="text" v-model.number="x" @keyup="keyup()"/><br/>
        y值：<input type="text" v-model.number="y" @blur="blur()"/><br/>
        <input type="button" @click="calc()" value="计算一"/>
        <!--
           @事件名 这种方式绑定事件在Vue2.0推荐使用
           过时的事件绑定(了解 1.x版本)
           v-on:事件名 已放弃
         -->
        <input type="button" v-on:click="calc()" value="计算二"/>
        <hr/>
        {{count}}
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象(必须先定义，才能使用)
                x : '',
                y : '',
                count : ''
            },
            methods : { // 事件方法
                calc() {
                    this.count = this.x + this.y;
                },
                keyup() {
                    alert(this.x);
                },
                blur() {
                    alert(this.y);
                }
            }
        });
    </script>
</body>
</html>

7、Vue：事件处理之按键修饰符

语法: 事件指令.按键修饰符=”函数名()” 【只针对按键相关事件有效】
例如: @keydown.enter=”fun1()” 或 @keyup.enter=”fun1()”
典型应用场景：按回车（即enter键）进行表单提交

Vue.js允许在绑定事件时可以指定具体的按键事件，按键别名:

.enter (回车键)
.tab (Tab键)
.delete (捕获 "删除" 和 "退格" 键)
.esc (Esc键)
.space (Space键)
.up (向上键)
.down (向下键)
.left (向左键)
.right (向右键)
.ctrl (Ctrl键)
.alt (Alt键)
.shift (Shift键)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs按键修饰符</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 判断按下了什么键才触发事件：
             @keydown.enter: 按下了回车键
             $event: Vue事件对象
         -->
        姓名：<input type="text" @keydown.enter="fun1($event)"/>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app',
            methods : {
                fun1 (e) {
                    alert('按下了回车键！' + e.keyCode);
                }
            }
        });
    </script>
</body>
</html>

8、Vue：数据迭代指令

8.1 迭代数组

语法: v-for="item in 数组" 或 v-for="(item,index) in 数组"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs迭代指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 迭代数组 -->
            <li v-for="(item,index) in dataList">
                索引号：{{index}} === 数组元素：{{item}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app',
            data : {
                dataList : [100,200,300,400,500]
            }
        });
    </script>
</body>
</html>

8.2 迭代对象

语法：v-for="(value,key) in 对象"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs迭代指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 迭代对象 -->
            <li v-for="(value,key) in user">
                {{key}} = {{value}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
		// 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
               user: {
                   name : "张三",
                   age : 18,
                   sex : "男"
               }
            }
        });
    </script>
</body>
</html>

8.3 迭代对象数组

语法：v-for="item in 对象数组” 或 v-for=”(item,index) in 对象数组"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs迭代指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <!-- 迭代对象数组 -->
            <tr v-for="(u, index) in users">
                <td>{{index + 1}}</td>
                <td>{{u.name}}</td>
                <td>{{u.sex}}</td>
                <td>{{u.age}}</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
		// 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data: { // 数据对象
                // 定义数组对象
                users: [
                    {
                        name: "张学友",
                        age: 58,
                        sex: "男"
                    },
                    {
                        name: "刘德华",
                        age: 60,
                        sex: "男"
                    },
                    {
                        name: "郭富城",
                        age: 59,
                        sex: "男"
                    }
                ]
            }
        });
    </script>
</body>
</html>

9、Vue：v-text&v-html指令

v-text: 为html元素添加text相当于innerText (原样输出)

语法: <html标签名 v-text=”数据对象中的属性名”></html标签名>
v-html: 为html元素添加html相当于innerHTML (格式化输出)

语法: <html标签名 v-html=”数据对象中的属性名”></html标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs文本指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>

    <script type="text/javascript">
		// 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
               message : "<h1>html标签</h1>"
            }
        });
    </script>
</body>
</html>

11、Vue：条件指令

v-if: 条件成立输出该html标签中的内容。
v-else-if: 如果v-if条件不成立，才会判断该条件，如果条件成立输出该html标签中的内容。
v-else: 如果v-if或v-else-if条件不成立，输出该html标签中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs条件指令</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-if / v-else-if / v-else -->
        <div>
            <span v-if="sex == 1">男</span>
            <span v-else-if="sex == 2">女</span>
            <span v-else>保密</span>
        </div>
        <!-- v-if / v-else-if -->
        <div>
            <span v-if="sex == 1">男</span>
            <span v-else-if="sex == 2">女</span>
        </div>
        <!-- v-if / v-else -->
        <div>
            <span v-if="sex == 1">男</span>
            <span v-else>保密</span>
        </div>
    </div>

    <script type="text/javascript">
		// 创建Vue实例
		var vue = new Vue({
           el : '#app', // 渲染的html元素
           data : { // 数据对象
               sex: "1"
           }
		});
    </script>
</body>
</html>

12、Vue：computed计算属性（时间）

使用语法:

computed: {
key1: function(){
return "计算后的数据";
},
key2: function(){
return "计算后的数据";
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs计算属性</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        <h2>{{new Date(milliseconds).getFullYear() + "年"
                + new Date(milliseconds).getMonth()
                + "月" + new Date(milliseconds).getDate()}}</h2>
        <!-- 计算属性 (注意：它不是一个函数) -->
        <h2>{{time}}</h2>
    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                milliseconds : 1573878276849,
            },
            computed : { // 计算属性
                time (){ // time属性
                    const date = new Date(this.milliseconds);
                    return date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate();
                }
            }
        });
    </script>
</body>
</html>

计算属性本质是函数，但是一定要返回数据。页面渲染时，只能把这个函数当成一个属性来使用。
计算属性需要我们自己主动调用，生命周期钩子函数不会主动调用计算属性。

13、Vue高级编程：定义组件

13.1 组件介绍

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

Vue组件的作用: 代码复用

13.2 定义组件

定义组件语法:

// 定义组件
const 组件对象 = {
    // 渲染模板
    template : ``,
    // 组件数据 (必须是一个函数)
    data : function () {
        return {  
        }
    },
    // 组件属性
    props : {
    },
    // 计算属性
    computed : {
    },
    // 方法
    methods : {
    },
    // 监控属性
    watch : {
    },
    // 生命周期钩子
    created (){
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs定义组件</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    </div>
    <script type="text/javascript">
        // 定义组件
        const MyButton = {
            // 渲染模板
            template : `<button @click="calc()">你点击了: {{num}}次！</button>`,
            // 组件数据 (必须是一个函数)
            data : function () {
                return {
                    num: 1
                }
            },
            // 组件属性
            props : {
            },
            // 计算属性
            computed : {
            },
            // 方法
            methods : {
                calc : function () {
                    this.num++;
                }
            },
            // 监控属性
            watch : {
            },
            // 生命周期钩子
            created (){
            }
        };
	   // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
            }
        });
    </script>
</body>
</html>

13.3、注册组件

1.全局注册，可以用在所有的 Vue 实例 (new Vue) 中。

# 第一种方式
Vue.component('组件名称', { /* ... */ })

# 第二种方式
Vue.component('组件名称', 组件对象);

定义组件名:

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

使用自定义的组件

2.局部注册的组件，只能在当前的Vue实例中可以使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs定义组件</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用组件 -->
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>
    </div>

    <script type="text/javascript">
        // 定义组件
        const MyButton = {
            // 渲染模板
            template : `<button @click="calc()">你点击了: {{num}}次！</button>`,
            // 组件数据 (必须是一个函数)
            data : function () {
                return {
                    num: 1
                }
            },
            // 组件属性
            props : {

            },
            // 计算属性
            computed : {

            },
            // 方法
            methods : {
                calc : function () {
                    this.num++;
                }
            },
            // 监控属性
            watch : {

            },
            // 生命周期钩子
            created (){

            }
        };
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象

            },
            // 局部注册组件(只有当前vue实例可以用)
            components : {
                "my-button" : MyButton
            }
        });

    </script>
</body>
</html>

14、Vue高级编程：组件通信

14.1 父向子通信

通过 Props 向子组件传递数据
语法:

// 定义组件: 组件属性(定义父组件需要传递过来的属性)
props : {
// Prop属性名 : {type : "数据类型", required : 是否必须}
title : {type : String, required : true},
color : {type : String, required : false}
}

// 使用组件
<组件名称 title="" color=""></组件名称>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs父子通信</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用组件 -->
        <my-div color="red" title="我是一个div"></my-div>
        <!-- 等价于
        <div style="color: red">我是一个div</div>
		-->
    </div>

    <script type="text/javascript">
        // 全局注册组件
        Vue.component('myDiv', {
            template : `<div :style="'color:'+ color" >{{title}}</div>`,
            props : {
                color : {type: String, required: true, default : ""},
                title : {type: String, required: true}
            }
        });
        
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                
            }
        });

    </script>
</body>
</html>

数据流转流程：

示例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs父子通信</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用组件 -->
        <my-ul :cities="dataList"></my-ul>
    </div>
    <script type="text/javascript">
        // 全局注册组件
        Vue.component("MyUl", {
            // 渲染模板
            template : `
                <ul>
                    <li v-for="c in cities">{{c.name}}</li>
                </ul>
            `,
            // 组件数据 (必须是一个函数)
            data : function () {
                return {
                }
            },
            // 组件属性(定义父组件需要传递过来的属性)
            props : {
                cities : {type : Array, required : true, default : []}
            }
        });
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
               dataList : [{id : 1, name : '广州市'},
                           {id : 2, name : '深圳市'},
                           {id : 3, name : '珠海市'},
                           {id : 4, name : '东莞市'}]
            }
        });
    </script>
</body>
</html>

14.2 子向父通信

通过Vue实例$emit方法，触发当前实例上的事件方式向父组件传递数据
语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs子父通信</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用组件 -->
        <counter @xxx="calcNum"></counter>
        <h3>结果: {{num}}</h3>
    </div>
    <script type="text/javascript">
        // 全局注册组件
        Vue.component("counter", {
            // 渲染模板
            template : `
                <div>
                    <button @click="calc(1)">+</button>
                    <button @click="calc(2)">-</button>
                </div>
            `,
            // 方法
            methods : {
                calc (flag){
                    // 定义触发的事件
                    // 参数1: 事件名称(字母需要小写)
                    // 参数2: 参数
                    this.$emit("xxx", flag);
                }
            }
        });
        // 创建Vue实例
        var vue = new Vue({
            el : '#app', // 渲染的html元素
            data : { // 数据对象
                num : 1
            },
            methods : {
                calcNum (flag){
                    flag == 1 ? this.num++ : this.num--;
                }
            }
        });
    </script>
</body>
</html>

15.axios：入门

15.1请求方法介绍

axios(config)
axios.get(url, [config])
axios.post(url, [data], [config])
axios.delete(url, [config])
axios.head(url, [config])
axios.put(url, [data], [config])
axios.patch(url, [data], [config])

15.2config配置对象

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get',
// 默认是 get
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With':'XMLHttpRequest', 'Content-Type': 'application/json'},
// `params` 是即将与请求一起发送的 URL 参数，一般用于GET请求
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: { id: 12345 },
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
data: { firstName: 'Fred'},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的
// 'responseType' 表示服务器响应的数据类型，可以是
// 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认的
// 'responseEncoding' 响应的数据默认编码
responseEncoding: 'utf8' // default
}

15.3 response响应对象

{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}

15.4 axios.get方法

// 第一种方式
axios.get('/user?id=12345')
.then(function (response) { // 请求成功
// handle success
console.log(response);
})
.catch(function (error) { // 请求出错
// handle error
console.log(error);
});

// 第二种方式
axios.get('/user',{params : {id : 12345}})
.then(function (response) { // 请求成功
// handle success
console.log(response);
})
.catch(function (error) { // 请求出错
// handle error
console.log(error);
});

15.5 axios.post方法

axios.post('/user', {
id: 1,
name: '小华华'
})
.then(function (response) { // 请求成功
console.log(response);
})
.catch(function (error) { // 请求出错
console.log(error);
});

15.6 axios方法

axios({
method: 'post',
url: '/user/12345',
   data: {
   id: 1,
   name: '中华华'
   }
})
.then(function (response) { // 请求成功
console.log(response);
})
.catch(function (error) { // 请求出错
console.log(error);
});

15、axios-GET请求：查询全部用户

第一步: 整合vue与axios

第二步: 创建Vue实例

第三步: 发送异步请求查询用户数据

第四步: v-for迭代数组，显示用户信息

第五步: 配置jackson格式化日期属性(JacksonProperties.java) application.yml

# 配置jackson
spring:
jackson:
date-format: yyyy-MM-dd HH:mm:ss # 日期格式器
timeZone: GMT+8 # 时区(格林威冶标准时间 Greenwich Mean Time) + 8 东区北京时间

16、axios：发送post请求

第一步: 在addUser.html页面,引入js文件

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

第二步: 表单数据绑定

<div style="text-align: center">
    <span>用户名: <input type="text" v-model="user.userName"/> </span><br/>
    <span>密码: <input type="password" v-model="user.password"/></span><br/>
    <span>姓名: <input type="text" v-model="user.name"/></span><br/>
    <span>年龄: <input type="text" v-model="user.age"/></span><br/>
    <span>性别: <input type="radio" value="1" v-model="user.sex" checked/>男
        <input type="radio" value="2" v-model="user.sex">女</span><br/>
    <span>生日: <input type="text" v-model="user.birthday"/></span><br/>
    <span>备注: <input type="text" v-model="user.note"></span><br/>
    <input type="button" value="添加" @click="save()"/><br/>
    {{user}}
</div>

第三步: 定义异步请求方法

// 文档加载完
window.onload = function () {
    // 创建Vue实例
    var vue = new Vue({
        el : '#app', // 指定渲染的html元素
        data : {  // 数据对象
            user : {sex : 1}
        },
        methods : { // 操作方法
            // 添加用户
            save (){
                // 发送异步请求
                axios.post("/save", this.user).then((response) => {
                    if (response.data){
                        alert("添加成功！");
                    }else {
                        alert("添加失败！");
                    }
                }).catch((error) => {
                    console.log(error)
                });
            }
        }
    });
};

第四步: 在UserController.java，新增保存用户方法

说明: 由于axios.post()方法，向后台发送的请求参数是json对象，后台必须用@RequestBody注解来接收，jackson会把json对象转化成User对象。

// 添加用户
@PostMapping("/save")
public boolean save(@RequestBody User user){
    try {
        userService.save(user);
        return true;
    }catch (Exception ex){
        ex.printStackTrace();
    }
    return false;
}

第五步: 在UserService.java，新增保存用户方法

// 添加用户
public void save(User user) {
    try{
        user.setCreated(new Date());
        user.setUpdated(user.getCreated());
        userMapper.insert(user);
    }catch (Exception ex){
        throw new RuntimeException(ex);
    }
}

第六步: 单独为生日指定日期格式器(User.java)

上帝123

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vue的简单使用

1、Vue简介1.1 概述 Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库整合。另一方面，Vue 也完全能够为复杂的单页应用提供驱动。渐进式: 可以有选择性的使用该框架的一个或多个组件，并不需要将框架的全部组件都用在应用中；当应用业务需要用到更高级的，我们后面可以再加入高级组件。 1.2 安装方式一: 直接下.
复制链接

扫一扫