vue的增量式学习-篇章2，又名：写毕设到企业级前端（第5天）
创建一个应用：
概念：创建一个Vue应用是指使用Vue.js框架来构建交互式的Web应用程序。Vue提供了一种组织和管理UI组件的方式，使开发者能够轻松构建用户界面。
应用场景：创建一个应用适用于任何需要构建交互性前端界面的项目，包括网站、Web应用、管理面板等。
用例代码：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
模板语法：
概念：模板语法是Vue.js中用于声明渲染的一种方式，它允许开发者通过简单的HTML模板来描述应用的界面结构和数据绑定。
应用场景：模板语法适用于定义Vue组件的模板部分，用于呈现数据和用户界面。
用例代码：
<div id="app">
<p>{{ message }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
响应式基础：
概念：响应式基础是Vue.js的核心特性之一，它指的是当数据发生变化时，Vue会自动更新视图以反映这些变化。这是通过Vue的数据绑定机制实现的。
应用场景：响应式基础适用于任何需要将数据与界面同步的情况，确保界面随数据的变化而更新。
用例代码：
var app = new Vue({
data: {
message: 'Hello, Vue!'
},
methods: {
changeMessage: function () {
this.message = 'Updated message'
}
}
})
计算属性：
概念：计算属性是Vue中一种声明式的属性，用于定义基于已有数据计算而来的属性，它们会根据依赖的数据自动更新。
应用场景：计算属性适用于需要派生或转换数据的情况，例如将多个数据属性合并为一个新属性或对数据进行筛选和排序等。
用例代码：
<div id="app">
<p>Original Message: {{ message }}</p>
<p>Computed Message: {{ computedMessage }}</p>
</div>
var app = new Vue({
data: {
message: 'Hello, Vue!'
},
computed: {
computedMessage: function () {
return this.message.toUpperCase()
}
}
})
类与样式绑定：
概念：类与样式绑定是Vue中的一种方式，用于动态添加或移除HTML元素的类名和样式。它可以根据条件、状态或用户交互来改变元素的外观。
应用场景：类与样式绑定适用于需要根据数据的变化来修改元素的类名或样式的情况，例如根据数据状态切换按钮的样式。
用例代码：
<div id="app">
<p :class="{ active: isActive }">Active Status</p>
</div>
var app = new Vue({
data: {
isActive: true
}
})
示例 1：条件渲染与计算属性
<template>
<div>
<p v-if="isVisible && isUserLoggedIn">欢迎访问！</p>
<p v-else>请登录以查看内容。</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
},
computed: {
isUserLoggedIn() {
// 在真实应用中，此处通常检查用户是否已登录
return true;
}
}
};
</script>
示例 1：深度响应式数据
<template>
<div>
<p>{{ deepData.user.name }}</p>
<button @click="changeUserName">修改用户名</button>
</div>
</template>
<script>
export default {
data() {
return {
deepData: {
user: {
name: "John"
}
}
};
},
methods: {
changeUserName() {
this.deepData.user.name = "Jane";
}
}
};
</script>
示例 1：复杂的计算属性
<template>
<div>
<p>商品总价：{{ totalPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
cart: [
{ name: "商品1", price: 20 },
{ name: "商品2", price: 30 },
{ name: "商品3", price: 15 }
]
};
},
computed: {
totalPrice() {
return this.cart.reduce((total, item) => total + item.price, 0);
}
}
};
</script>
示例 1：动态类绑定与条件样式
<template>
<div :class="classObject">样式绑定</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isError: false
};
},
computed: {
classObject() {
return {
active: this.isActive,
error: this.isError
};
}
}
};
</script>
v-for指令来实现列表渲染。<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>
v-on指令绑定事件处理函数。<template>
<button @click="handleButtonClick">点击我</button>
</template>
<script>
export default {
methods: {
handleButtonClick() {
alert('按钮被点击了！');
}
}
};
</script>
v-model指令，你可以轻松实现表单输入的双向数据绑定。<template>
<input v-model="message" />
<p>输入内容: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>
<script>
export default {
created() {
console.log('组件创建');
},
mounted() {
console.log('组件挂载');
},
updated() {
console.log('组件更新');
},
beforeDestroy() {
console.log('组件销毁前');
},
destroyed() {
console.log('组件销毁');
}
};
</script>
watch属性或侦听器函数来创建侦听器。<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
watch: {
message(newVal, oldVal) {
console.log('数据变化了：', newVal);
}
}
};
</script
>
<template>标签和<slot>标签，你可以在一个组件中引用另一个组件的模板。<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
};
</script>
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
};
</script>
v-for指令渲染任务列表。这个任务管理应用适用于个人或团队，用于记录和管理待办任务。
<template>
<div>
<h1>任务管理应用</h1>
<!-- 任务表单组件 -->
<task-form @addTask="addTask" />
<!-- 任务列表组件 -->
<task-list
:tasks="tasks"
@editTask="editTask"
@deleteTask="deleteTask"
/>
<!-- 统计未完成任务数量 -->
<p>未完成任务: {{ unfinishedTasks }}</p>
</div>
</template>
<script>
import TaskForm from './TaskForm.vue';
import TaskList from './TaskList.vue';
export default {
data() {
return {
tasks: [],
};
},
computed: {
unfinishedTasks() {
return this.tasks.filter(task => !task.completed).length;
},
},
methods: {
addTask(task) {
this.tasks.push(task);
},
editTask(updatedTask) {
const index = this.tasks.findIndex(task => task.id === updatedTask.id);
if (index !== -1) {
this.tasks[index] = updatedTask;
}
},
deleteTask(taskId) {
this.tasks = this.tasks.filter(task => task.id !== taskId);
},
},
created() {
// 从本地存储加载任务列表
const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
this.tasks = savedTasks;
},
watch: {
tasks: {
deep: true,
handler(newTasks) {
// 保存任务列表到本地存储
localStorage.setItem('tasks', JSON.stringify(newTasks));
},
},
},
components: {
TaskForm,
TaskList,
},
};
</script>
这个案例中，我们使用了多个Vue组件，包括任务表单组件（TaskForm）和任务列表组件（TaskList）。应用的核心是在父组件中管理任务列表数据，并通过事件和属性传递给子组件。任务数据也会保存在本地存储中，以便在刷新页面后保持任务的持久性。这个案例涵盖了Vue.js的许多基本概念和功能，是一个综合性的示例。
<template>
<div>
<h1>任务管理应用</h1>
<!-- 任务表单组件 -->
<TaskForm @addTask="addTask" />
<!-- 任务列表组件 -->
<TaskList
:tasks="tasks"
@editTask="editTask"
@deleteTask="deleteTask"
/>
<!-- 统计未完成任务数量 -->
<p>未完成任务: {{ unfinishedTasks }}</p>
</div>
</template>
<script>
import { ref, computed, onMounted, watch } from 'vue';
import TaskForm from './TaskForm.vue';
import TaskList from './TaskList.vue';
export default {
setup() {
const tasks = ref([]);
// 计算未完成任务数量
const unfinishedTasks = computed(() => {
return tasks.value.filter(task => !task.completed).length;
});
// 添加任务
const addTask = (task) => {
tasks.value.push(task);
};
// 编辑任务
const editTask = (updatedTask) => {
const index = tasks.value.findIndex(task => task.id === updatedTask.id);
if (index !== -1) {
tasks.value[index] = updatedTask;
}
};
// 删除任务
const deleteTask = (taskId) => {
tasks.value = tasks.value.filter(task => task.id !== taskId);
};
// 从本地存储加载任务列表
const loadTasksFromLocalStorage = () => {
const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.value = savedTasks;
};
// 保存任务列表到本地存储
watch(tasks, (newTasks) => {
localStorage.setItem('tasks', JSON.stringify(newTasks));
}, { deep: true });
// 初始化加载任务列表
onMounted(() => {
loadTasksFromLocalStorage();
});
return {
tasks,
unfinishedTasks,
addTask,
editTask,
deleteTask,
};
},
components: {
TaskForm,
TaskList,
},
};
</script>
这个示例使用Composition API来组织Vue 3的代码。与之前的示例相比，它在setup函数中定义了响应式数据、计算属性、方法，并使用onMounted来初始化加载任务列表。此示例仍然是一个任务管理应用，但更好地展示了Composition API的使用方式。
下面是一个简单的 TaskForm.vue 组件和 TaskList.vue 组件的代码示例：
TaskForm.vue：
<template>
<div>
<input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
<button @click="addTask">Add</button>
</div>
</template>
<script>
export default {
data() {
return {
newTask: '',
};
},
methods: {
addTask() {
if (this.newTask.trim() === '') return;
this.$emit('addTask', this.newTask);
this.newTask = '';
},
},
};
</script>
TaskList.vue：
<template>
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Remove</button>
</li>
</ul>
</template>
<script>
export default {
props: {
tasks: Array,
},
methods: {
removeTask(index) {
this.$emit('removeTask', index);
},
},
};
</script>
这是一个非常简单的示例，用于添加和删除任务。TaskForm.vue 组件负责添加任务，而 TaskList.vue 组件负责显示任务列表和删除任务。在实际应用中，您可以根据需要扩展和定制这些组件。