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-inputclass="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 指令遍历数据并渲染到列表中。