vue脚手架创建，ref、双向绑定，axios请求。。

Vue CLI 是 Vue.js 官方提供的一个脚手架工具，可以快速搭建 Vue.js 项目，并提供了一些常见的工程化功能，如代码打包、热重载、单元测试等。以下是 Vue CLI 的搭建和使用步骤：

安装 Node.js

首先需要在本地安装 Node.js，可以到官网 https://nodejs.org/ 下载并安装最新版的 Node.js。

安装 Vue CLI

在终端中输入以下命令，安装 Vue CLI：

npm install -g @vue/cli

创建新项目

在终端中进入要创建项目的目录，并输入以下命令来创建新项目：

vue create my-project

其中，"my-project" 是你要创建的项目名称，可以自己修改。

启动开发服务器

项目创建完成后，进入项目目录，并输入以下命令来启动开发服务器：

cd my-project
npm run serve

这样就可以在浏览器中访问 http://localhost:8080 查看项目效果了。

以上是 Vue CLI 的基本使用流程，接下来以一个简单的 TodoList 为例，演示一下如何使用 Vue CLI 创建项目。

创建项目

在终端中输入以下命令来创建新项目：

vue create todo-list

安装 Element UI

在终端中进入项目目录，安装 Element UI：

cd todo-list
npm install element-ui --save

编写组件和样式

在 src/components 目录下创建一个 TodoList.vue 文件，编写 TodoList 组件的代码：

<template>
  <div class="todo-list">
    <el-input
      class="add-todo-input"
      v-model="newTodo"
      placeholder="请输入待办事项"
      @keyup.enter.native="addTodo"
      size="large">
    </el-input>
    <ul class="todos">
      <li v-for="(todo, index) in todos" :key="index" class="todo">
        <el-checkbox v-model="todo.done">{{ todo.text }}</el-checkbox>
        <el-button type="text" @click="deleteTodo(index)">删除</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newTodo: '',
        todos: []
      }
    },
    methods: {
      addTodo() {
        if (this.newTodo !== '') {
          this.todos.push({
            text: this.newTodo,
            done: false
          })
          this.newTodo = ''
        }
      },
      deleteTodo(index) {
        this.todos.splice(index, 1)
      }
    }
  }
</script>

<style scoped>
  .todo-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }
  .add-todo-input {
    width: 100%;
    margin-bottom: 20px;
  }
  .todos {
    list-style: none;
    padding: 0;
  }
  .todo {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .todo .el-checkbox {
    flex: 1;
  }
</style>

在样式中，使用了 Element UI 提供的样式类，使 TodoList 组件具有了基本的样式。

在 App.vue 中使用 TodoList 组件

在 src/App.vue 文件中，使用 TodoList 组件，并导入 Element UI 的样式：

<template>
  <div id="app">
    <div class="container">
      <h1 class="title">Vue TodoList</h1>
      <TodoList />
    </div>
  </div>
</template>

<script>
  import TodoList from './components/TodoList.vue'
  import 'element-ui/lib/theme-chalk/index.css'

  export default {
    name: 'App',
    components: {
      TodoList
    }
  }
</script>

<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }
  .title {
    text-align: center;
  }
</style>

运行项目

在终端中输入以下命令来启动开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，就可以看到 TodoList 效果。

以上的例子主要演示了如何使用 Vue CLI 创建项目、如何使用 Element UI 完成新建 Todo 和删除 Todo 的功能，以及如何将实现的组件和样式引入到 App.vue 中使用。

双向绑定

Vue.js 的双向绑定是指界面上的数据与数据源（通常是 JavaScript 对象）之间的双向绑定，即当界面上的数据发生变化时，数据源也会跟随变化，并且当数据源发生变化时，界面上显示的数据也会相应地更新。Vue.js 借助于其响应式系统实现了这个双向绑定机制，使得开发者可以方便地实现数据与界面之间的同步。

下面是一个简单的双向绑定的例子，通过 v-model 指令将 message 与文本框的值进行双向绑定：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  }
});

在上面的例子中，当文本框中的值发生变化时，message 会随之更新，当 message 的值发生变化时，界面上显示的文本也会相应更新。

Vue.js 的双向绑定机制是通过实现一个响应式的数据模型来实现的。当数据模型的某个属性发生变化时，Vue.js 的响应式系统会自动检测变化并更新相应的 DOM 元素，从而实现数据与界面的同步更新。需要注意的是，Vue.js 的双向绑定机制只适用于一些表单元素（如 input、textarea、select 等），对于其他 DOM 元素的双向绑定则需要使用自定义指令等方式实现。

refs使用

ref 是 Vue.js 提供的一个指令，可以用来在 DOM 元素或组件上添加一个唯一的标识。通过 ref，我们可以在组件内部直接获取到对应的 DOM 元素或组件实例，从而方便地操作其属性或方法。

下面是一个 ref 的例子，我们通过 ref 将一个输入框和按钮分别标识为 input 和 button，并在组件内部使用 $refs 属性来获取对应的 DOM 元素：

<template>
  <div>
    <input type="text" ref="input">
    <button @click="handleClick" ref="button">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.input.value);
      console.log(this.$refs.button.innerText);
    }
  }
};
</script>

在上面的例子中，我们在模板中为输入框和按钮分别添加了 ref 属性，并分别指定为 input 和 button。在组件内部的 handleClick 方法中，我们使用了 $refs 属性来获取对应的 DOM 元素，从而获取输入框的值和按钮的文本内容。

需要注意的是，为了使 $refs 属性生效，我们必须在组件被挂载到 DOM 后才能访问 $refs。因此，在上面的例子中，我们必须等到按钮被点击时才能访问 $refs。

另外，需要注意的是，使用 ref 可能会破坏 Vue.js 的数据驱动机制，因为我们直接操作了 DOM 元素或组件实例，而不是通过修改数据来更新界面。因此，在使用 ref 时需要注意谨慎使用，避免出现意料之外的结果。

点击事件进行请求

<template>
  <div>
    <button @click="fetchData">点击获取数据</button>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false, // 是否正在加载数据
      error: null, // 错误消息
      data: null // 获取到的数据
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.error = null;

      axios
        .get('/api/data')
        .then(response => {
          this.loading = false;
          this.data = response.data;
        })
        .catch(error => {
          this.loading = false;
          this.error = error.message;
        });
    }
  }
};
</script>

在上面的例子中，我们在模板中定义了一个按钮，绑定了 fetchData 方法。在 fetchData 方法中，我们首先设置 loading 属性为 true，用于在界面上显示“正在加载”的提示。然后，我们使用 axios 库发送了一个 GET 请求，并在 then 回调中将 loading 属性设置为 false，将获取到的数据赋值给 data 属性。如果请求出现错误，则在 catch 回调中将 loading 属性设置为 false，将错误消息赋值给 error 属性。

在模板中，我们使用了 Vue.js 的条件渲染指令 v-if 来根据 loading、error 和 data 属性的值来显示不同的内容。如果 loading 属性为 true，则显示“Loading...”；如果 error 属性不为 null，则显示错误消息；如果 data 属性不为 null，则使用 v-for 指令遍历数据并渲染到列表中。

文章来源地址https://uudwc.com/A/BvjjW