【Vue快速入门】

一、简介

【Vue快速入门】_第1张图片

Vue (读音 /vju/,类似于 view) 是中国的大神尤雨溪开发的,为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型,避免直接操作DOM , 降低DOM操作的复杂性。

1.MVVM编程思想

【Vue快速入门】_第2张图片
MVVM:页面输入改变数据,数据改变影响页面数据展示与渲染

  • M(model):普通的javascript数据对象
  • V(view):前端展示页面
  • VM(ViewModel):用于双向绑定数据与页面,对于我们的课程来说,就是vue的实例

2.渐进式框架

【Vue快速入门】_第3张图片
“渐进式框架” 非常简单,就是用你想用或者能用的功能特性,你不想用的部分功能可以先不用。VUE不强求你一次性 接受并使用它的全部功能特性

3.核心功能

  • 基础功能:页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点
  • 组件化开发:增强代码的复用能力,复杂系统代码维护更简单
  • 前端路由:更流畅的的用户体验、灵活的在页面切换已渲染组件的显示,不需与后端做多余的交互
  • 状态集中管理:MVVM响应式模型基础上实现多组件之间的状态数据同步与管理
  • 前端工程化:结合webpack等前端打包工具,管理多种静态资源,代码,测试,发布等,整合前端大型项目。

二、Vue-HelloWorld案例

1. 初始化npm项目

npm init ‐y

【Vue快速入门】_第4张图片

2.安装vue

npm install vue

【Vue快速入门】_第5张图片

3.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <h1> {{name}} ,你好h1>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        let vm = new Vue({
            el:"#app",//绑定元素
            data: {
                name:"李白"
            },
        });
    script>

body>

html>

【Vue快速入门】_第6张图片

4.基本应用介绍

  • new Vue实例,每个vue应用都是通过Vue函数创建一个Vue实例开始的
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        
        <input type="text" v-model="num">
        <button v-on:click="num++">登录button>
        <button v-on:click="num--">登出button>
        <h1> {{name}} ,你好,当前登录第{{num}}次h1>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        // 1.new Vue实例,每个vue应用都是通过Vue函数创建一个Vue实例开始的
        new Vue({
            el:"#app",  //挂载的模板
            data: {     //绑定的数据 当数据属性的值发生改变时,视图会进行重新渲染,响应式的
                name:"李白",
                num:1
            },
            //方法:声明方法可以实现更复杂的操作,声明methods属性中
            methods: {
                nowDate(){
                    return new Date();
                },
                loginout(){
                    this.num--;
                }
            },
        });
    script>

body>

html>

三、指令

1.v­-text/v-­html:指定标签体

  • v­-text : 当作纯文本
    v-text是元素的 InnerText 属性,它的作用和之前我们使用的 {{}} 一样,用于数据 绑定
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        
        <div v-text="message">div>
        <div v-html="message">div>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data: {
                message: "
您好!
"
}, });
script> body> html>

【Vue快速入门】_第7张图片

2.v­-if和v-show

vue提供了v­if和v­show两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来 看一下使用两个指令各有什么效果

  • v­if : 如果vlaue为true, 当前标签会输出在页面中
  • v­show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <div id="app">
        <button @click="vif=!vif">切换显示隐藏button>
        <div v-if="vif" style="background-color: aqua;height: 200px;width: 200px;">
            v-if
        div>
        <hr>
        <button @click="vshow=!vshow">切换显示隐藏button>
        <div v-show="vshow" style="background-color: red;height: 200px;width: 200px;">
            v-show
        div>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data() { 
                return { 
                    vif:true,
                    vshow:true
                }
            }
        })
    script>
body>
html>

【Vue快速入门】_第8张图片

3.v­else、v­else­if

事实上,v­if的条件渲染和JavaScript条件判断语 句中的if、else、else if非常类似
与v­if一起使用, 如果value为false, 将当前标签输出到页面中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <div v-if="num === 1">
            1
        div>
        <div v-else-if="num === 2">
            2
        div>
        <div v-else>
            3
        div>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    num:1
                }
            },
        })
    script>
body>
html>

4.v­for : 遍历

  • 遍历数组 : v­for=“person in persons” $index
  • 遍历对象 : v­for=“value in person” $key
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <div v-for="(item, index) in musics" :key="index">{{item.name}}div>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    musics:[{name:"十年"},{name:"歌唱祖国"}]
                }
            },
        })
    script>
body>
html>

5.v­-on : 绑定事件监听

  • 有时候,我们需要给元素绑定事件,vue 中提供了指令 v­on 来进行事件的绑定。用法: v­on:事件名=“方法”,例如:v­on:click=“alert”。
  • v­on:事件名, 可以缩写为: @事件名
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <button v-on:click="fun1()">点击触发事件button>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    
                }
            },
            methods: {
                fun1(){
                    alert("OK");
                }
            },
        })
    script>
body>
html>

6.v­-bind : 属性绑定

  • v-bind用于给元素的属性赋值。v-bind后面是 :属性名=[变量名]。例如:v-bind:title=“message”;
  • 很多属性值是不支持表达式的, 就可以使用v­bind
  • vue 还提供了指令 v­bind 的简写方式,可以直接通过:属性名的方式。
    v­bind:src = “src” = :src = "src"
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">

        <div v-bind:title="title">悬停查看信息div>

        <div>
            <a v-bind:href="href">百度a>
        div>
        
        <div>
            <img v-bind:src="src">
        div>
        
        <div>
            <button v‐bind:disabled="disabled">禁用按钮button>
        div>
        
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el: '#app',
            data: { 
                title: "您好!", 
                href: 'https://www.baidu.com/',
                src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676‐360‐202.png', 
                disabled: true
            }
        })
    script>
body>
html>

7.v­-model 双向数据绑定

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app"> 
        <div>
            <label>年龄:label> 
            <input v-model="age"/> 
        div> 
            <div>当前输入的年龄是: {{age}}div> 
            <button @click="add">加一岁button> 
            <button @click="alertYear">弹出年龄button> 
    div>
    
    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data:{
                age:10
            },
            methods: {
                add(){
                    this.age = this.age+1;
                },
                alertYear(){
                    alert(this.age);
                }
            },
        })
    script>
body>
html>

四、计算属性和侦听器

1.计算属性 VS 方法

计算属性

  • 案例
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格:{{item.price}} --- 库存:{{item.stock}}
            数量:<input type="number" v-model="item.num" style="width: 30px;" />
            li>
            
            <li><strong>总价:strong>{{calcSum}}li>
        ul>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
            },
            // methods : 当方法中使用的数据发生改变,方法会自动调用
            methods: {
                // calcSum(){
                //         let sum=0;
                //         this.car.forEach(item => {
                //             sum+=item.price*item.num;
                //         });
                //         return sum;
                //     }
            },
            computed:{
                calcSum(){
                        let sum=0;
                        this.car.forEach(item => {
                            sum+=item.price*item.num;
                        });
                        return sum;
                    }
            }
        })
    script>
body>
html>
  • 比较
    methods : 当方法中使用的数据发生改变,方法会自动调用
    计算属性: 当方法中使用的数据发生改变,方法会自动调用

方法和计算属性的区别:声明发生不一样,调用不一样,方法要用(), 计算属性调用不要加()

如果不使用计算属性,在 methods 里定义了一个方法,也可以实现相同的效果,甚至该方法还可以接受参数,使用起来 更灵活。

  • 既然 methods 同样可以解决模板中复杂逻辑计算的问题,那么为什么还需要使用计算属性呢?

原因就是:计算属性是基于它的依赖缓存的。前面我们介绍过,计算属性的改变取决于其所依赖数据的变化,所以只要 依赖数据不发生改变,计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算,只会获取缓存的值。而我 们每次调用 methods 都会重新计算一遍,这样将会消耗一部分性能。当然,如何你不希望对数据进行缓存,那么可以用 方法来代替。

2.侦听器

  • 通过侦听器来监听数据的变化,进行相应的逻辑处理。

  • 监听对象类型数据的某个属性进行侦听。

  • 案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格:{{item.price}} --- 库存:{{item.stock}}
            数量:<input type="number" v-model="item.num" style="width: 30px;" />
            li>
            
            <li><strong>总价:strong>{{calcSum}}li>
            <li v-html="message">li>
            <li v-html="warn()">li>
        ul>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变,方法会自动调用
            methods: {
                //方法侦听属性
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制
`
} }); return message; } }, computed:{ calcSum(){ let sum=0; this.car.forEach(item => { sum+=item.price*item.num; }); return sum; } }, watch:{ //要侦听的数据: 数组 car:{ handler(newvalue,oldvalue){ this.message=""; this.car.forEach(item => { if(item.num>item.stock){ this.message+=`${item.pname}的库存超出限制
`
} }) }, deep:true //深度侦听器 }, //基础类型侦听,将侦听数据作为函数就可以了 message(newvalue,oldvalue){ console.info(newvalue,oldvalue); } } })
script> body> html>
  • 方法和侦听器的区别:

方法: 方法中任意数据发生了改变就会自动调用方法可以调用,进行返回值

侦听器:需要指定具体的侦听数据,只有被具体指定的侦听数据发生了改变才会触发不能像方法那样去调用, 而是靠vue自动触发

五、过滤器

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>过滤器title>
head>

<body> 
    <div id="app">
        <ul>
            <li v-for="user in userList">
                姓名:{{user.name}};性别:{{formateGender(user.gender)}}
                
                {{user.gender | filterGender}}
            li>
        ul>
    div>
    <script src="../node_modules/vue/dist/vue.js">script>

    <script> 
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'xushu', gender: 1 },
                    { id: 2, name: 'zhuge', gender: 0 }
                ]
            },
            methods: {
                formateGender(gender){
                    if(gender==1){
                        return "~男"
                    }else{
                        return "~女"
                    }
                }
            },
            // 专门针对数据过滤
            filters:{
                filterGender(gender){
                    if(gender==1){
                        return "!男"
                    }else{
                        return "!女"
                    }
                }
            }
        })
    script>
body>

html>

六、组件化基础

组件是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的 小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
【Vue快速入门】_第9张图片
在编写组件时,我们需要不断思考如何提高组件的可复用性。

组件是可复用的 Vue 实例, 我们可以把页面中在多个场景中重复使用的部分,抽出为一个组件进行复用。组件大大提高 了代码的复用率。

1.全局组件注册

  • 我们可以通过调用 Vue.component 的方式来定义全局组件,它接收两个参数:1. 组件名,2. 组件属性对象
  • 属性对象:组件的属性对象即为 Vue 的实例对象属性。

全局组件可以在任何其他组件内使用,所以当我们设计的组件,需要在不同地方使用的时候,我们应当注册全局组件。

2.局部组件注册

我们也可以在 Vue 实例选项中注册局部组件,这样组件只能在这个实例中使用。局部组件的注册利用 Vue 实例 的 components 对象属性,以组件名作为 key 值,以属性对象作为 value。由于局部组件只能在当前的 Vue 实例中使用, 所以当我们设计的组件不需要在其他组件内复用时,可以设计为局部组件。

3.综合案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        
        <biaoge>biaoge>
    div>

    <div id="app2">
        
        <biaobiao>biaobiao>
    div>

    <script src="./node_modules/vue/dist/vue.js">script>

    <script>
        // 1.全局組件: 在所有的Vue实例中使用
       /*
            1.1 命名:不要使用驼峰命名, 可以使用中划线的方式命名
            1.2 模板: 必须的
            1.3 数据:一定要函数的方式声明
       */
      Vue.component("biaoge",{
          template:`
{{num}}
`
, data() { return { num:1 } }, }) //1.定义局部组件 const biaobaio = { template:`
{{num}}
`
, data() { return { num:40 } }, } new Vue({ el:"#app", data() { return { } } }) new Vue({ el:"#app2", data() { return { } }, // 2.定义局部组件 components:{ "biaobiao":biaobaio } })
script> body> html>

七、生命周期和钩子函数

1.生命周期

【Vue快速入门】_第10张图片
【Vue快速入门】_第11张图片
从上面这幅图中,我们可以看到 vue 生命周期可以分为八个阶段,分别是:

  • beforeCreate(创建前)
  • created(创建后)
  • beforeMount (载入前)
  • mounted(载入后)
  • beforeUpdate(更新前)
  • updated(更新后)
  • beforeDestroy(销毁前)
  • destroyed(销毁后)

1.1 创建前(beforeCreate)

在实例初始化之后,此时的数据观察和事件机制都未形成,不能获得 DOM 节点。

1.2 创建后(created)

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始。

1.3 载入前(beforeMount)

在挂载开始之前被调用:这个过程是在模版已经在内存中编译完成, render 函数首次被调用,此时完成了虚拟 DOM 的 构建,但并未被渲染。

1.4 载入后(mounted)

这个过程在模版挂载之后被调用,页面完成渲染,所以在这之后,我们可以操作和访问 DOM 元素。

1.5 更新前(beforeUpdate)

当数据更新时调用,在这一阶段 DOM 会和更改过的内容同步。

1.6 更新后(updated)

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避 免在此期间更改状态,因为这可能会导致更新无限循环。

1.7 销毁前(beforeDestroy)

实例销毁之前调用。在这一步,实例仍然完全可用。

1.8 销毁后(destroyed)

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会 被销毁。 实例代码:

2.案例代码

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>Documenttitle>
head>
<body>
  <div id = "app">
    <span id="name">{{ name }}span>
    <button @click="updateName">更新button>
    <button @click="destroy">销毁button>
  div>
body>
<script src="./node_modules/vue/dist/vue.js">script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('准备修改名字啦!')
        this.name = 'hello hello!'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此时页面数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate: undefined
    },
    created() {
      // 页面数据已经初始化
      console.log('created:' + this.name) // beforeCreate: hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate: hello !
      console.log("html模板未渲染:" + document.getElementById("name").innerText);
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate: hello !
      console.log("html模板已渲染:" + document.getElementById("name").innerText);
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() { 
      console.log('beforeUpdate:' + this.name) // beforeCreate: hello 
      console.log("html模板未更新:" + document.getElementById("name").innerText);
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 中国 !
      console.log("html模板已更新:" + document.getElementById("name").innerText);
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
      console.log("销毁前:" + document.getElementById("name").innerText);
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 在这之后点击页面 更新 按钮将无任何效果
      console.log("销毁后:" + document.getElementById("name").innerText);
    }
  });
script>
html>

八、Vue-Router路由

  • Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应 用变得易如反掌。 — 官方定义
  • VueRouter 是 SPA(单页应用)的路径管理器,它允许我们通过不同的 URL 访问不同的内容。

步骤

1.安装vue-router路由,引入vue-router文件

 npm install vue‐router

【Vue快速入门】_第12张图片
【Vue快速入门】_第13张图片

2.要根据不同url链接到不同的页面, 需要使用模板实现, 将模板绑定对应的路由地址

【Vue快速入门】_第14张图片

3.使用路由管理模板, 将url跟模板进行绑定

【Vue快速入门】_第15张图片

4.用route-link跳转,route-view展示跳转的地址所含的组件

【Vue快速入门】_第16张图片

5.综合代码

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>Documenttitle>
head>

<body>
  <div id="app">
    <div>
      
      <router-link to="/index">首页router-link>
      <router-link to="/product">商品router-link>

      <router-view>router-view>

    div>
  div>
body>

<script src="./node_modules/vue/dist/vue.js">script>

<script src="./node_modules/vue-router/dist/vue-router.js">script>




<script type="text/javascript">
  let Index = Vue.component("index", {
    template: `
Hello,欢迎使用来到小米商城!
`
}); let Product = Vue.component("product", { template: `
  • 1. Iphone11
  • 2. 小米11
`
}); // 4.使用路由管理模板, 将url跟模板进行绑定 const router = new VueRouter({ routes: [{ path: "/index", component: Index }, { path: "/product", component: Product }, ] }) var vm = new Vue({ el: '#app', router })
script> html>

九、axios

1.介绍

  • 官方:http://www.axios-js.com/zh-cn/docs/
  • Axios 是一个基于 promise 的 HTTP 库,可以用在html和 vue、nodejs 中。

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

2.使用

2.1 安装

  • npm
 npm install axios
  • cdn
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.2 案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in users">
                {{item}}
            li>
        ul>
    div>
body>

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

<script>
    //1. 还没有调用getAllUsers方法
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                users: []
            }
        },
        mounted() {
            this.getAllUsers();
        },
        methods: {
            getAllUsers() {
                axios.get('http://localhost:8811/user/getAllUsers'
                        //, {
                        //     params: {
                        //         ID: 12345
                        //     }
                        // }
                    )
                    //不使用箭头函数,用this.user不可以,因为在这个this是指Axios
                    // .then(function(response){
                    //     vm.users = response.data.data;
                    // })

                    // 当使用箭头函数  this 指向的是外层
                    .then(response => {
                        this.users = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    })
script>

html>

2.3 Get请求

			axios.get('/user', {
                params: {
                    ID: 12345
                }
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

2.4 POST请求

            axios.post('/user', { 
                firstName: 'Fred', 
                lastName: 'Flintstone' 
            }) 
            .then(function (response) { 
                console.log(response); 
            }) 
            .catch(function (error) {
                console.log(error); 
            });

2.5 执行多个并发请求

			function getUserAccount() { 
                return axios.get('/user/12345'); 
            } 
            
            function getUserPermissions() { 
                return axios.get('/user/12345/permissions'); 
            } 
            
            axios.all([getUserAccount(), getUserPermissions()])
            .then(axios.spread(function (acct, perms) { 
                // 两个请求现在都执行完成 
            }));

十、使用Vue脚手架进行模块化开发

自行官网安装cli,然后在文件夹中创建vue脚手架项目

vue create vuehello

【Vue快速入门】_第17张图片

你可能感兴趣的:(Vue,vue.js,javascript,html)