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://www.uudwc.com/A/BvjjW/
文章来源地址https://www.uudwc.com/A/BvjjW/