企业实际开发_Vue基本概念总结+样例代码

NightEnchanter

已于 2024-05-01 18:10:52 修改

阅读量144

点赞数 20

文章标签： vue vscode 前端框架 html 经验分享笔记其他

于 2024-05-01 17:30:42 首次发布

本文链接：https://blog.csdn.net/NightEnchanter/article/details/137784878

版权

本文介绍了Vue.js，一个流行的前端框架，其核心是MVVM架构，支持数据双向绑定和组件化开发。通过实例展示了如何使用Vue指令和生命周期钩子来构建可维护的Web应用，包括v-bind、v-model和v-for的用法，以及关键的生命周期阶段如created、mounted和beforeDestroy。

摘要由CSDN通过智能技术生成

Vue

作为目前最流行的前端框架，Vue免除了原生JS中的DOM操作，从而简化了书写。
Vue的核心思想是MVVM（Model-View-ViewModel）：
即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
当然了，这些看起来似乎可读性不高，换句话说：
Vue.js 是一个流行的前端 JavaScript 框架，用于构建交互式的 Web 用户界面。它具有简洁的 API、双向数据绑定和组件化的开发方式，使得开发者可以更轻松地构建复杂的单页应用（SPA）和动态的用户界面。
如图，Vue是业务数据和视图数据（界面展示）沟通的桥梁
在这里插入图片描述

至于怎么去引用Vue呢？可以看一下这段示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Example</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
    <!-- Vue 实例的模板 -->
    <p>{{ message }}</p>
    <!-- 使用 v-bind 指令绑定属性 -->
    <input type="text" v-bind:value="message">
    <!-- 使用 v-on 指令绑定事件 -->
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
    // 创建一个 Vue 实例
    var app = new Vue({
        el: '#app', // 指定 Vue 实例挂载的元素
        data: {     // 定义 Vue 实例的数据
            message: 'Hello, Vue!'
        },
        methods: {  // 定义 Vue 实例的方法
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('');
            }
        }
    });
</script>

</body>
</html>

{{ message }} 是 Vue 中的插值语法，用于将数据 message 的值渲染到页面上。

v-bind:value=“message” 使用了 Vue 的指令 v-bind，用于动态绑定 HTML 元素的属性。这里将 <input>元素的值绑定到了 message 数据。

v-on:click=“reverseMessage” 使用了 Vue 的指令 v-on，用于监听 DOM 事件。这里当按钮被点击时，调用了 Vue 实例中的 reverseMessage 方法。

在 JavaScript 部分，创建了一个 Vue 实例，通过 new Vue() 实例化，然后传入了一个配置对象，其中包含了实例的 el、data 和 methods 属性。这些属性用来指定 Vue 实例挂载的元素、数据和方法。

看到这里可能有疑问，什么v-on v-bind啊？？？？
其实，这是Vue指令，它是预定义的特殊标记，用于在模板中添加响应式行为到 DOM 元素上
具体有：
（1）v-bind: 用于动态地绑定一个或多个属性，或者一个组件 prop 到表达式。例如，v-bind:href=“url” 可以将 a 标签的 href 属性绑定到 Vue 实例的 url 数据上。

（2）v-model: 创建双向数据绑定在表单元素（如 input、textarea 或 select）和应用状态之间。例如，v-model=“inputText” 可以将 input 元素的值与数据 inputText 双向绑定。

（3）v-for: 用于基于源数据多次渲染元素或模板块。例如，

<li v-for="item in items">{{ item. Text }}</li>

可以遍历数组 items，为每个项生成一个 li 元素。

（4）v-if, v-else-if, v-else: 控制是否渲染一个元素。基于表达式的真值。例如，<p v-if="seen">Now you see me</p> 只有当 seen 是真时，p 元素才会被渲染。

（5）v-on: 监听 DOM 事件，并在触发时执行一些 JavaScript 代码。例如，v-on:click=“handleClick” 可以在用户点击时执行 handleClick 方法。

Vue生命周期

这是剩下一个个人认为比较重要的概念
每个 Vue 实例在被创建时都要经过一系列的初始化步骤
—— 例如，需要设置数据监听、编译模板、将实例挂载到 DOM 上然后在数据变化时更新 DOM。
这些步骤都会调用相应的生命周期钩子（函数），给用户机会在不同阶段添加自己的代码。
比如，有这些：
beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created: 实例已创建完成。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果实例是根实例，当这个钩子被调用时，整个视图已经被渲染好了。

beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这些完成后会调用该钩子。

beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

通过合理地利用这些指令和生命周期钩子，我们可以实现更好的数据管理、更灵活的视图控制以及更清晰的代码结构。

举个例子吧：
假设有一个 Vue 实例，用于管理一个待办事项列表。并且希望用户能够通过输入框添加新的待办事项，并且在完成待办事项时能够将其标记为已完成。

<div id="app">
  <input type="text" v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      <span :class="{ 'completed': todo.completed }">{{ todo.text }}</span>
      <button @click="toggleCompleted(index)">Toggle Completed</button>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({ text: this.newTodo, completed: false });
        this.newTodo = '';
      }
    },
    toggleCompleted(index) {
      this.todos[index].completed = !this.todos[index].completed;
    }
  },
  created() {
    // 在实例创建时，可以在这里进行初始数据的获取或者其他一些初始化操作
    // 例如：从服务器获取待办事项列表
  },
  mounted() {
    // 实例挂载后，可以在这里执行 DOM 操作
    // 例如：聚焦输入框
    this.$refs.input.focus();
  },
  beforeDestroy() {
    // 在实例销毁之前，可以在这里进行清理工作
    // 例如：取消订阅事件、清除定时器等
  }
});

v-model 指令将输入框的值与 newTodo 数据进行双向绑定，
v-for 指令循环渲染待办事项列表，
并通过 v-bind 指令将完成状态的变化反映到 DOM 中。
同时，使用 created 和 mounted 生命周期钩子，在实例创建和挂载后分别执行一些初始化操作，
以及 beforeDestroy 生命周期钩子，在实例销毁前进行清理工作
总之，合理利用 Vue 指令和生命周期钩子，能构建出更加灵活和可维护的 Vue 应用程序。

NightEnchanter

关注

20
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
企业实际开发_Vue基本概念总结+样例代码

创建了一个 Vue 实例，通过 new Vue() 实例化，然后传入了一个配置对象，其中包含了实例的 el、data 和 methods 属性。例如，v-bind:href=“url” 可以将 a 标签的 href 属性绑定到 Vue 实例的 url 数据上。）v-if, v-else-if, v-else: 控制是否渲染一个元素。，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。看到这里可能有疑问，什么v-on v-bind啊？至于怎么去引用Vue呢？
复制链接

扫一扫