vue的增量式学习-篇章2

2024-01-03 19:34:46

vue的增量式学习-篇章2，又名：写毕设到企业级前端（第5天）

各个学习vue部分的介绍
- 创建一个应用
- 模板语法
- 响应式基础
- 计算属性
- 类与样式绑定
更为复杂的例子学习
- 模板语法
- 响应式基础
- 计算属性
- 类与样式绑定
- 列表渲染
- 事件处理
- 表单输入绑定
- 生命周期
- 侦听器
- 模板引用
- 组件基础
- 复杂例子学习
- optionAPI

学习各个vue部分的介绍

创建一个应用：
- 概念：创建一个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>

列表渲染：

概念：列表渲染是一种Vue的特性，它允许你根据数据动态地生成列表元素或表格。通常使用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>

事件处理：

概念：事件处理是Vue中的一种机制，用于响应用户交互，如点击、输入等操作。你可以使用v-on指令绑定事件处理函数。
应用场景：事件处理适用于处理用户的交互行为，如按钮点击、表单提交、鼠标悬停等。
代码用例：

<template>
  <button @click="handleButtonClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      alert('按钮被点击了！');
    }
  }
};
</script>

表单输入绑定：

概念：表单输入绑定是将用户输入的数据与Vue实例中的数据进行双向绑定。通过v-model指令，你可以轻松实现表单输入的双向数据绑定。
应用场景：表单输入绑定适用于处理用户输入的表单数据，如文本框、复选框、单选框、下拉框等。
代码用例：

<template>
  <input v-model="message" />
  <p>输入内容: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

生命周期：

概念：生命周期是Vue组件的不同阶段，它包括创建、挂载、更新和销毁等阶段。Vue组件具有一系列的生命周期钩子函数，允许你在不同阶段执行自定义逻辑。
应用场景：生命周期钩子函数用于处理组件在不同阶段的行为，如在组件创建时初始化数据、在更新时执行某些操作等。
代码用例：

<script>
export default {
  created() {
    console.log('组件创建');
  },
  mounted() {
    console.log('组件挂载');
  },
  updated() {
    console.log('组件更新');
  },
  beforeDestroy() {
    console.log('组件销毁前');
  },
  destroyed() {
    console.log('组件销毁');
  }
};
</script>

侦听器：

概念：侦听器是一种Vue特性，允许你监听数据的变化并执行相应的操作。你可以使用watch属性或侦听器函数来创建侦听器。
应用场景：侦听器用于在数据变化时执行自定义操作，如异步请求、计算属性等。
代码用例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log('数据变化了：', newVal);
    }
  }
};
</script

>

模板引用：

概念：模板引用是一种在Vue中引用其他组件或模板的方式。通过<template>标签和<slot>标签，你可以在一个组件中引用另一个组件的模板。
应用场景：模板引用用于将组件拆分为可复用的部分，并在不同组件中进行引用。
代码用例：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

组件基础：

概念：组件是Vue的核心概念，它允许你将界面拆分为独立的、可复用的组件。每个组件都有自己的模板、数据、方法和生命周期。
应用场景：组件用于构建复杂的用户界面，使代码更加模块化和可维护。
代码用例：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

复杂例子学习：

optionAPI

概念：

组件化：将应用拆分为多个组件，如任务列表、任务表单、任务项等，以提高可维护性。
状态管理：使用Vue的响应式数据管理任务列表和任务状态。
列表渲染：通过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的许多基本概念和功能，是一个综合性的示例。

当使用Composition API：

<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 组件负责显示任务列表和删除任务。在实际应用中，您可以根据需要扩展和定制这些组件。

文章来源:https://blog.csdn.net/lixiemang8887/article/details/135323947
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！