vue-vue的基本使用方法(一篇让你快速入门vue基本语法)

在项目之前我们需要创建好一个vue工程，在vue工程下src-component下实现下面的功能

如果没有创建好vue工程，请看上篇文章

vue组件：vue的组件文件以.vue结尾，每个组件分为三个部分组成：

文本插值：用来绑定data方法返回的对象属性

{{}}

属性绑定：为标签的属性绑定data方法中返回的属性

v-bind

： 

事件绑定：为元素绑定对应的事件

v-on

 @

双向绑定：表单输入项和data方法中的属性进行绑定，任意一方改变都会同步给另一方

v-model

条件渲染：根据表达式的值，动态渲染页面元素

v-if

 v-else

 v-else-if

 下面是对上述功能的演示，你可以创建一个vue工程，在src-components下新建一个vue工程

<template>
  <div class="hello">
    {{ name }}
    {{ age > 60 ? '老年':'青年'}}

    <input type="text" v-bind:value="name"/>
    <input type="text" :value="age"/>
    <img v-bind:src="src">

    <input type="button" value="点击按钮" v-on:click="handlSave"/>
    <input type="button" value="点击按钮" @click="handlSave"/>

    <input type="text" v-model="name" />
    <input type="button" value="点击修改name的值" @click="handlChange"/>

    <div v-if="sex == 1">男</div>
    <div v-else-if="sex == 2">女</div>
    <div v-else>未知</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      name: '张三',
      age: 30,
      src: 'https://imga2.5054399.com/upload_pic/2015/9/1/4399_17562395347.gif',
      sex:3
    }
  },
  methods:{
    handlSave(){
      alert(this.name)
    },
    handlChange(){
      this.name = '张小三'
    }
  }
}
</script>

axios：是一个基于promise的网络请求库，作用于浏览器和node.js中

axios的中文官方文档：Axios中文文档 | Axios中文网 (axios-http.cn)

安装axios

可以使用 npm 或 yarn 来安装 Axios。在项目根目录下打开终端或命令提示符，并运行以下命令：

npm install axios

# 或者

yarn add axios

 引入axios

在你的 Vue 组件中，你需要引入 Axios。可以通过 import 语句来实现：

import axios from 'axios';

 发送HTTP请求

axios的API列表：

上列参数的说明：

url：请求路径

data：请求体数据，最常见的是json格式数据

config：配置对象，可以设置参数查询、请求头信息

 下面是代码演示：

<template>  
  <div>  
    <h2>User List</h2>  
    <ul>  
      <li v-for="user in users" :key="user.id">  
        {{ user.name }}  
      </li>  
    </ul>  
    <!-- 如果需要的话，还可以添加错误处理信息 -->  
    <p v-if="error">{{ error }}</p>  
  </div>  
</template>  
  
<script>  
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      users: [], // 用于存储从 API 获取的用户列表  
      error: null, // 用于存储可能出现的错误信息  
    };  
  },  
  async created() {  
    try {  
      // 发送 GET 请求到 '/api/users'  
      const response = await axios.get('/api/users');  
      // 假设服务器返回的数据在 response.data 中  
      this.users = response.data;  
    } catch (error) {  
      // 捕获并处理错误  
      this.error = error.message;  
    }  
  },  
};  
</script>