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 组件的代码：
-
{{ todo.text }}
删除
在样式中，使用了 Element UI 提供的样式类，使 TodoList 组件具有了基本的样式。
- 在 App.vue 中使用 TodoList 组件
在 src/App.vue 文件中，使用 TodoList 组件，并导入 Element UI 的样式：
Vue TodoList
- 运行项目
在终端中输入以下命令来启动开发服务器：
npm run serve打开浏览器，访问 http://localhost:8080，就可以看到 TodoList 效果。
以上的例子主要演示了如何使用 Vue CLI 创建项目、如何使用 Element UI 完成新建 Todo 和删除 Todo 的功能，以及如何将实现的组件和样式引入到 App.vue 中使用。
双向绑定
Vue.js 的双向绑定是指界面上的数据与数据源（通常是 JavaScript 对象）之间的双向绑定，即当界面上的数据发生变化时，数据源也会跟随变化，并且当数据源发生变化时，界面上显示的数据也会相应地更新。Vue.js 借助于其响应式系统实现了这个双向绑定机制，使得开发者可以方便地实现数据与界面之间的同步。
下面是一个简单的双向绑定的例子，通过 v-model 指令将 message 与文本框的值进行双向绑定：
{{ message }}
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 元素：
在上面的例子中，我们在模板中为输入框和按钮分别添加了 ref 属性，并分别指定为 input 和 button。在组件内部的 handleClick 方法中，我们使用了 $refs 属性来获取对应的 DOM 元素，从而获取输入框的值和按钮的文本内容。
需要注意的是，为了使 $refs 属性生效，我们必须在组件被挂载到 DOM 后才能访问 $refs。因此，在上面的例子中，我们必须等到按钮被点击时才能访问 $refs。
另外，需要注意的是，使用 ref 可能会破坏 Vue.js 的数据驱动机制，因为我们直接操作了 DOM 元素或组件实例，而不是通过修改数据来更新界面。因此，在使用 ref 时需要注意谨慎使用，避免出现意料之外的结果。
点击事件进行请求
Loading...
{{ error }}
- {{ item }}
在上面的例子中，我们在模板中定义了一个按钮，绑定了 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 指令遍历数据并渲染到列表中。