一篇文章带你掌握前端框架 Vue-前端框架-CSS教程网

一篇文章带你掌握前端框架 Vue

一、介绍

1.1 Vue 是什么？

1.2 单文件组件

1.3 API 样式

选项 API

组合 API

选择哪一个？

二、 Vue导入

三、Vue基本语法

1.钩子函数

2. 插值表达式

3.显示数据(v-text和v-html)

4.数据双向绑定数据(v-model)

4.1.绑定文本框

4.2.绑定单个复选框

4.3.绑定多个复选框

4.4.form表单数据提交

5.事件处理(v-on)

5.1.事件绑定(v-on)

5.2 事件修饰符

6.循环遍历(v-for)

6.1.遍历数组

6.2.遍历对象

6.3.key

7.判断语法(v-if和v-show)

8.显示数据(v-bind)

9.Vue页面跳转(两种方法)

9.1.方法一(标签实现)

9.1.方法二(this.$router.push()实现)

四、Vue其他语法

3.1.计算属性

3.2.watch监控

五、Vue组件

4.1.基本使用

4.2 单文件组件（SFC）结构

4.3 注册组件（局部 vs 全局）

4.4 模板语法常用指令

4.5 组件通信（props / events / v-model / slots）

3. 带类型与默认值（推荐写法）

4. 注意事项

子组件（Counter.vue）

父组件（App.vue）

六、axios异步请求

5.1 axios概述

5.2.Get请求

5.3.Post请求

5.4 引入axios

get请求

post请求

一、介绍

1.1 Vue 是什么？

Vue（发音为 /vjuː/，类似view）是一个用于构建用户界面的 JavaScript 框架。它建立在标准 HTML、CSS 和 JavaScript 之上，并提供了一个基于组件的声明式编程模型，可帮助您高效地开发任何复杂程度的用户界面。

这是一个最小的例子：

import { createApp, ref } from 'vue'

  createApp({
    setup() {
      return {
        count: ref(0)
      }
    }
  }).mount('#app')

<div id="app">
 <button @click="count++">
          Count is: {{ count }}
 </button>
</div>

上面的例子演示了 Vue 的两个核心特性：

声明式渲染：Vue 使用模板语法扩展标准 HTML，允许我们根据 JavaScript 状态声明式地描述 HTML 输出。
反应性：Vue 自动跟踪 JavaScript 状态变化，并在发生变化时有效地更新 DOM。

您可能已经有疑问了，不用担心。我们将在后续文档中详细介绍。现在，请继续阅读，以便您对 Vue 的功能有一个大致的了解。

进步框架

Vue 是一个涵盖前端开发所需大部分常见功能的框架和生态系统。然而，Web 极其多样化——我们在 Web 上构建的内容在形式和规模上可能千差万别。因此，Vue 的设计旨在灵活且可逐步采用。根据您的用例，Vue 可以以不同的方式使用：

无需构建步骤即可增强静态 HTML
作为 Web 组件嵌入到任何页面
单页应用程序（SPA）
全栈/服务器端渲染（SSR）
Jamstack / 静态站点生成 (SSG)
针对桌面、移动、WebGL 甚至终端

如果您觉得这些概念令人生畏，别担心！本教程和指南只需要基本的 HTML 和 JavaScript 知识，即使您不是这方面的专家，也应该能够跟上进度。

如果您是一位经验丰富的开发人员，并且对如何最好地将 Vue 集成到您的堆栈中感兴趣，或者您对这些术语的含义感到好奇，我们将在《使用 Vue 的方法》中更详细地讨论它们。

尽管 Vue 非常灵活，但所有这些用例都共享 Vue 的核心工作原理。即使您现在只是个初学者，一路积累的知识也会在您日后实现更宏伟的目标时派上用场。如果您是一位经验丰富的开发者，您可以根据自己需要解决的问题，选择最佳的 Vue 使用方式，同时保持相同的生产力。这就是为什么我们称 Vue 为“渐进式框架”：它是一个可以与您共同成长并适应您需求的框架。

1.2 单文件组件

在大多数支持构建工具的 Vue 项目中，我们使用一种类似 HTML 的文件格式来编写 Vue 组件，这种格式称为单文件组件（也称为*.vue文件，缩写为SFC）。顾名思义，Vue SFC 将组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在一个文件中。以下是以 SFC 格式编写的上一个示例：

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
  button {
    font-weight: bold;
  }
</style>

SFC 是 Vue 的一个关键特性，如果你的用例需要构建设置，那么推荐使用 SFC 来编写 Vue 组件。你可以在 SFC 的专门章节中了解更多关于SFC 的使用方法和原因——但目前，你只需要知道 Vue 会为你处理所有构建工具的设置即可。

1.3 API 样式

Vue 组件可以使用两种不同的 API 样式进行创作：Options API和***position API。

选项 API

data使用选项 API，我们使用选项对象（例如 data、methods和 mounted）来定义组件的逻辑。选项定义的属性在指向组件实例的内部函数mounted中公开：this

<script>
  export default {
    // Properties returned from data() be***e reactive state
    // and will be exposed on `this`.
    data() {
      return {
        count: 0
      }
    },

    // Methods are functions that mutate state and trigger updates.
    // They can be bound as event handlers in templates.
    methods: {
      increment() {
        this.count++
      }
    },

    // Lifecycle hooks are called at different stages
    // of a ***ponent's lifecycle.
    // This function will be called when the ***ponent is mounted.
    mounted() {
      console.log(`The initial count is ${this.count}.`)
    }
  }
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合 API

使用 ***position API，我们使用导入的 API 函数定义组件的逻辑。在单文件组件 (SFC) 中，***position API 通常与 <script setup> 一起使用。setup属性是一种提示，它使 Vue 执行编译时转换，从而允许我们使用 ***position API 时减少样板代码。例如，声明的导入和顶级变量/函数<script setup>可以直接在模板中使用。

这是相同的组件，具有完全相同的模板，但使用 ***position API 和<script setup>：

<script setup>
  import { ref, onMounted } from 'vue'

  // reactive state
  const count = ref(0)

  // functions that mutate state and trigger updates
  function increment() {
    count.value++
  }

  // lifecycle hooks
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

选择哪一个？

两种 API 风格都完全能够覆盖常见的用例。它们是由完全相同的底层系统驱动的不同接口。事实上，Options API 是在 ***position API 之上实现的！两种风格共享 Vue 的基本概念和知识。

Options API 以“组件实例”的概念为中心（this如示例所示），这通常更符合面向对象编程 (OOP) 语言背景用户的基于类的思维模型。此外，它还抽象了响应式细节，并通过选项组来强制代码组织，从而更加方便初学者使用。

***position API 的核心在于直接在函数作用域中声明响应式状态变量，并将多个函数的状态组合在一起以处理复杂性。它的形式更加自由，需要了解 Vue 中响应式的工作原理才能有效使用。反过来，它的灵活性也为组织和复用逻辑提供了更强大的模式。

您可以在***position API FAQ中了解有关两种样式之间的比较以及 ***position API 的潜在优势的更多信息。

如果您是 Vue 新手，以下是我们的一般建议：

出于学习目的，请选择您觉得更容易理解的风格。同样，两种风格的大部分核心概念是相同的。您可以随时选择另一种风格。
对于生产用途：

- 如果您不使用构建工具，或者计划主要在低复杂度场景中使用 Vue（例如渐进增强），请使用 Options API。
- 如果您计划使用 Vue 构建完整的应用程序，请使用 ***position API + 单文件组件。

在学习阶段，您不必只坚持一种风格。文档的其余部分将在适用的情况下提供两种风格的代码示例，您可以随时使用左侧边栏顶部的API 首选项开关在两种风格之间切换。

二、 Vue导入

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

语法：

<!-- 在线导入 -->
  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.***/npm/vue"></script>

  <!-- 本地导入 -->
  <script src="node_modules/vue/dist/vue.js"></script>

案例

<div id="app">
  <h1>用户名:<input type="text" v-model="name"/></h1> <br/>
  <h1>您输入的用户名是: {{name}}</h1>
</div>

  <script type="text/javascript">
  //创建一个Vue对象
  var app = new Vue({
  //指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理
  el: "#app",
  //定义vue中的数据
  data: {
    name: ""
  }
});
</script>

三、Vue基本语法

1.钩子函数

概述：钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

语法：

<script type="text/javascript">
  var app = new Vue({
  el:"#app",
  //钩子函数created,该方法在页面显示之后,自动执行
  created() {
    console.log("created...");
  }
});
</script>

补充：Vue声明周期和钩子函数

（1）什么是vue生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

（6）简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；

2. 插值表达式

概述：插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

案例：

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>


<div id="app">
    <input type="text" v-model="name"/>
    <p>你的名字是{{name}}</p>
</div>

<script type="text/javascript">
    //创建一个Vue对象
    var app = new Vue({
        el: '#app',
        data: {
            name: ''
        }
    })
</script>

3.显示数据(v-text和v-html)

概述：

v-text 和 v-html 专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

当网速比较慢时, 使用 {{ }} 来展示数据, 有可能会产生插值闪烁问题。

插值闪烁: 在数据未加载完成时，页面会显示出原始的 {{ }} , 过一会才会展示正常数据.

区别：

v-text：把数据当作纯文本显示

v-html：遇到html标签，会正常解析

语法：

<div id="app">
    <input type="text" v-model="name"/>
    <p>你的名字是：<span v-text="name"></span></p>

    <input type="text" v-model="age"/>
    <p>你的年龄是：<span v-html="age"></span></p>
</div>

<script type="text/javascript">
    //创建一个Vue对象
    var app = new Vue({
        el: '#app',
        data: {
            name: '',
            age:'<div style="color: red;">18</div>'
        },
        created(){
          console.log('created')
        }
    })
</script>

4.数据双向绑定数据(v-model)

概述：

Vue的双向绑定可以实现：数据变化的时候，页面会自动刷新，页面变化的时候，数据也会自动变化。

注意：

双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组

4.1.绑定文本框

代码:

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>

<div id="app">
    用户名: <input type="text" v-model="username"/>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            //该属性值和文本框的value属性值,保持一致
            username:""
        }
    });
</script>

4.2.绑定单个复选框

代码:

<div id="app">
    <input type="checkbox" v-model="agree">同意<br>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            agree:true
        }
    });
</script>

4.3.绑定多个复选框

代码:

<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="Python" v-model="language">Python<br>
    <input type="checkbox" value="Swift" v-model="language">Swift<br>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            //数组中的值,就是被选中的元素的value属性值
            language:["Java","Python"]
        }
    });
</script>

4.4.form表单数据提交

例子:传json格式跟formData格式的两种情况

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>

<template>
  <div class="from_box">
    <form action="">
      <input type="text"  placeholder="请输入昵称" v-model="formMess.a***ount">
      <input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
      <input type="text" placeholder="请输入手机号" v-model="formMess.phone">
    </form>
    <span class="but" @click="onSubmit()">提交</span>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: "from",
  data() {
    return {
        formMess:{
        "a***ount":"",
        "act_pwd":"",
        "phone":""
    }
    };
  },
  methods: {
    onSubmit() {
      /* json格式提交： */
      // let formData = JSON.stringify(this.formMess);
 
      /* formData格式提交： */
      let formData = new FormData();
      for(var key in this.formMess){
        formData.append(key,this.formMess[key]);
      }
 
        axios({
        method:"post",
        url:"xxxxxxx",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        withCredentials:true,
        data:formData
    }).then((res)=>{
            console.log(res);
        });
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this ***ponent only -->
<style scoped lang="less">
.from_box{
  form{
    width:90%;
    margin: auto;
    border:.01rem solid gray;
    display: flex;
    flex-wrap: wrap;
    input{
      width:80%;
      height:.5rem;
      margin-bottom: .2rem;
      border:.01rem solid black;
      height:.5rem;
    }
  }
  .but{
    font-size: .14rem;
    margin-left:5%;
  }
}
</style>

5.事件处理(v-on)

5.1.事件绑定(v-on)

概述：

Vue中也可以给页面元素绑定事件.

语法：

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>
<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>

注意：

Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

案例：

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue事件处理</title>
</head>
<body>
    <div id="app">
        <button id="but" @click="show()">点我</button>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //获取id为app的元素,该元素被vue对象所管理.只有被vue对象管理的标签,其内部才允许书写vue语法
            el:"#app",
            //定义vue的方法
            methods:{
                //定义show方法,弹出提示框
                show() {
                    alert("Hello Vue!!!");
                }
            }
        });
    </script>
</body>
</html>

5.2 事件修饰符

概述：事件修饰符主要对事件的发生范围进行限定

语法：

<button @事件名.事件修饰符="函数名/vue表达式">点我</button>

分类：

.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue事件处理</title>
</head>
<body>
    <div id="app">
        <button @click="show">点我</button>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //获取id为app的元素,该元素被vue对象所管理.只有被vue对象管理的标签,其内部才允许书写vue语法
            el:"#app",
            //定义vue的方法
            methods:{
                //定义show方法,弹出提示框
                show() {
                    alert("Hello Vue!!!");
                }
            }
        });
    </script>
</body>
</html>

6.循环遍历(v-for)

6.1.遍历数组

语法：

v-for="item in items"
v-for="(item,index) in items"

items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。

代码：

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>

<div id="app">
	<ul>
        <li v-for="(user,index) in users">
            <span>序号是：{{index}}的用户名字是{{user.name}},年龄是{{user.age}}</span>
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            users:[
                {"name":"白卓冉","age":8,"gender":"男"},
                {"name":"白大锅","age":12,"gender":"女"},
                {"name":"白仙女","age":4,"gender":"男"}
            ]
        }
    });
</script>

6.2.遍历对象

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

value，对象的值
key，对象的键
index, 索引，从0开始
代码：

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>

<div id="app">
    <ul>
        <li v-for="(value,key,index) in person">
            <span>序号是：{{index}}的用户{{key}}是{{value}}</span>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            person: {"name":"白仙女","age":4,"gender":"男"}
        }
    });
</script>

6.3.key

概述：

:key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序. 帮助 Vue 在虚拟 DOM（Virtual DOM）进行高效的节点更新和复用。key 用来标识节点的唯一性。

案例:

<div id="app">
    <button @click="add">添加</button>
    <ul>
        <li v-for="name in list">
            <input type="checkbox"> {{name}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: ["孙悟空", "猪八戒", "沙和尚"]
        },
        methods: {
            add() {
                //注意这里是unshift,向数组的头部添加一个元素
                this.list.unshift("唐僧");
            }
        }
    });
</script>

解决方案:

<div id="app">
    <button @click="add">添加</button>
    <ul>
        <!-- 添加:key即可. 注意,key中的值必须是唯一且不会改变的值-->
        <li v-for="name in list" :key="name">
            <input type="checkbox"> {{name}}
        </li>
    </ul>
</div>

7.判断语法(v-if和v-show)

概述：

v-if与v-show可以根据条件的结果,来决定是否显示指定内容

v-if: 条件不满足时, 元素不会存在

v-show: 条件不满足时, 元素不会显示(但仍然存在)

<div id="app">
    <button @click="show = !show">点我</button>
    <h1 v-if="show">Hello v-if.</h1>
    <h1 v-show="show">Hello v-show.</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            show:true
        }
    });
</script>

8.显示数据(v-bind)

概述：

v-bind 的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

语法：

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
  
<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

<div id="app">
    <input type="button" :value="msg"/>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
           msg:"我是按"
        }
    });

</script>

9.Vue页面跳转(两种方法)

9.1.方法一(标签实现)

<router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
             :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
              <span class="tabNav-ico tabNav-book"></span>
  
              <span class="tabNav-txt">书 架</span>
</router-link>

9.1.方法二(this.$router.push()实现)

当this.$router.push()只有一个参数时默认为跳转地址最多可传两个参数第二个参数为地址参数

<a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
      <span class="tabNav-ico tabNav-home"></span>
      <span class="tabNav-txt">首 页</span>

</a>

toIndex: function(){
        this.$router.push("/?entityId="+ localStorage.getItem("entityId"));
}

四、Vue其他语法

3.1.计算属性

概述：计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

语法：

 var app = new Vue({
     el:"#app",
     //计算属性必须放在Vue的***puted中
     ***puted:{
         //定义计算属性
         属性名(){
             return "返回值";
         }
     }
});

案例：

<div id="app">
    <h1>{{birth}}</h1>
    <h1 v-text="birth"></h1>
    <h1 v-html="birth"></h1>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        ***puted:{
            //定义一个birth方法,该方法就是一个计算属性,可以在插值表达式中使用
            birth(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth()+1;
                let day = date.getDay();
                return year + "-" + month + "-" + day;
            }
        }
    });
</script>

3.2.watch监控

概述：

watch 可以监听简单属性值及其对象中属性值的变化.

watch 类似于 onchange 事件,可以在属性值修改的时候,执行某些操作.

语法：

<script src="https://cdn.jsdelivr.***/npm/vue/dist/vue.js"></script>

<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model="person.name">
    <input type="text" v-model="person.age">
</div>

<script> 
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello World",
            person:{
                name: "Jonh",
                age: 20
            }
        },
        watch: {
            // 监听message属性的变化，newValue代表最新值，oldValue代表旧值
           message(newValue,oldValue){            
                console.log("message changed from " + oldValue + " to " + newValue)            
           },
           person:{
               // 开启深度监听，能够监听对象属性的变化
               deep: true,
               // 获取对象的最新属性（obj代表最新对象）
               handler(obj){
                console.log("person changed to " + JSON.stringify(obj))
               }
           }
        }
        }
    )
</script>

五、Vue组件

4.1.基本使用

概述：

4.2 单文件组件（SFC）结构

<!-- HelloWorld.vue -->
<template>
  <div class="hello">{{ msg }}</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: { msg: String },
  data() { return { count: 0 } },
  methods: { inc() { this.count++ } }
}
</script>

<style scoped>
.hello { color: #333; }
</style>

要点：

<template>：声明式描述 UI。
<script>：组件逻辑（Options API 或 ***position API）。
<style scoped>：样式仅作用于该组件（scoped 实现原理基于属性选择器）。

4.3 注册组件（局部 vs 全局）

局部注册（单文件或父组件中）：

import Child from './Child.vue'
export default { 
  ***ponents: 
  { Child } 
  }

全局注册（通常只在应用启动时使用）：

import { createApp } from 'vue'
import App from './App.vue'
import My***p from './My***p.vue'
  
createApp(App)
  .***ponent('My***p', My***p)
  .mount('#app')

4.4 模板语法常用指令

插值：{{ value }}
属性绑定：:src="imgUrl" 或 v-bind:src
事件绑定：@click="handle"
条件渲染：v-if, v-else, v-show（v-show仅切换 display）
列表渲染：v-for="(item, i) in list" :key="item.id"
表单绑定：v-model（支持自定义组件双向绑定）

4.5 组件通信（props / events / v-model / slots）

props：父组件 -> 子组件传值

props (properties) 就是父组件传给子组件的数据

数据流是单向的：从父到子

父组件（App.vue）

<template>
  <UserCard name="张三" age="20" />
</template>

<script setup>
import UserCard from './UserCard.vue'
</script>

子组件（UserCard.vue）

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script setup>
defineProps(['name', 'age'])
</script>

defineProps() 是 Vue 3 <script setup> 的写法，
如果是旧写法（Options API）：

export default {
  props: ['name', 'age']
}

3. 带类型与默认值（推荐写法）

<script setup>
  const props = defineProps({
    name: { type: String, required: true },
    age: { type: Number, default: 18 }
  })
</script>

这样 Vue 会在开发模式下帮你检查类型和是否传值。

4. 注意事项

不要直接修改 props 值，props.age++ // 会报错

因为 props 是父传的，只能由父组件改变。
如果需要修改，可：

把值复制到本地：

const localAge = ref(props.age)

或者通过事件让父组件改。

events：子组件 → 父组件通知事件

1. 基本概念

子组件通过 $emit 或 emit() 触发事件；
父组件通过 @事件名="方法" 监听事件；
从而实现子 → 父的通信。

子组件（Counter.vue）

<template>
  <button @click="add">+1</button>
</template>

<script setup>
const emit = defineEmits(['increment'])
function add() {
  emit('increment') // 触发事件
}
</script>

父组件（App.vue）

<template>
  <Counter @increment="onAdd" />
  <p>当前计数：{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Counter from './Counter.vue'

const count = ref(0)
function onAdd() {
  count.value++
}
</script>

@increment="onAdd" 表示监听 increment 事件，当子组件调用 emit('increment') 时执行回调。

六、axios异步请求

5.1 axios概述

概述：

axios是一个基于 promise 的 HTTP 库, 主要用于：发送异步请求获取数据。

常见的方法：

axios(config)

axios.get(url, [config])

axios.post(url, [data])

发送数据config常用参数：

{
    url: '请求的服务器',
    method: '请求方式', // 默认是 get
    // GET请求参数
    params: {
        参数名: 参数值
    },
    // POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数
    data: {
        参数名: 参数值
    },
    // 响应数据格式,默认json
    responseType: 'json'
}

响应数据常用参数：

{
    data: {},       //真正的响应数据(响应体)
    status: 200,    //响应状态码
    statusText: 'OK',    //响应状态描述
    headers: {},    //响应头
    config: {}      //其他配置信息
}

5.2.Get请求

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送GET请求axios.get("请求路径",{ config });
       axios.get("请求路径",{
            //get请求参数
            params: {
                name:"zhangsan",
                age:23
            },
            //响应数据格式为"json"
            responseType: 'json'
        }).then(res => {
            //打印响应数据
            console.log(res);
            //把响应数据赋值给Vue中的user属性
            app.user = res.data;
        }).catch(err => {
            //打印响应数据(错误信息)
            console.log(err);
        });
    }
});

5.3.Post请求

var app = new Vue({
    el: "#app",
    data: {
        user: {}
    },
    //当页面加载完毕后
    created() { 
        //发送POST请求axios.post("请求路径",{ 参数 });
        axios.post("请求路径",{
                name:"zhangsan",
                age:23
            }).then(res => {
                console.log(res);
                app.user = res.data;
            }).catch(err => {
                console.log(err);
            });
    }
});

5.4 引入axios

首先就是引入axios,如果你使用es6，只需要安装axios模块之后

import axios from ‘axios’;

// 安装方法 npm install axios 或 bower install axios

当然也可以用script引入

get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  }).catch(function(err){
  console.log(err);
});
    
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
  ID:12345
}
}).then(function(response){
  console.log(response);
}).catch(function(err){
  console.log(err);
});

post请求

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

为方便起见，为所有支持的请求方法提供了别名

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

转载请说明出处内容投诉
CSS教程网 » 一篇文章带你掌握前端框架 Vue

sycup

分享到：

一、介绍

1.1 Vue 是什么？

1.2 单文件组件

1.3 API 样式

选项 API

组合 API

选择哪一个？

二、 Vue导入

三、Vue基本语法

1.钩子函数

2. 插值表达式

3.显示数据(v-text和v-html)

4.数据双向绑定数据(v-model)

4.1.绑定文本框

4.2.绑定单个复选框

4.3.绑定多个复选框

4.4.form表单数据提交

5.事件处理(v-on)

5.1.事件绑定(v-on)

5.2 事件修饰符

6.循环遍历(v-for)

6.1.遍历数组

6.2.遍历对象

6.3.key

7.判断语法(v-if和v-show)

8.显示数据(v-bind)

9.Vue页面跳转(两种方法)

9.1.方法一(标签实现)

9.1.方法二(this.$router.push()实现)

四、Vue其他语法

3.1.计算属性

3.2.watch监控

五、Vue组件

4.1.基本使用

4.2 单文件组件（SFC）结构

4.3 注册组件（局部 vs 全局）

4.4 模板语法常用指令

4.5 组件通信（props / events / v-model / slots）

3. 带类型与默认值（推荐写法）

4. 注意事项

子组件（Counter.vue）

父组件（App.vue）

六、axios异步请求

5.1 axios概述

5.2.Get请求

5.3.Post请求

5.4 引入axios

get请求

post请求

sycup

发表评论

一个令你着迷的主题！