首页 > 其他分享 >谷粒商城实战笔记-36~44-Vue

谷粒商城实战笔记-36~44-Vue

时间：2024-07-20 15:27:57浏览次数：22  
标签：Vue name DOM 44 绑定 36 js model

文章目录

一，36-前端基础-Vue-介绍&HelloWorld

这一节的主要内容是演示Vue的简单使用。

1，MVVM 思想

  • M：即 Model，模型，包括数据和一些基本操作
  • V：即 View，视图，页面渲染结果
  • VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。

当视图改变后，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。

MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的：

  • 只要我们 Model 发生了改变，View 上自然就会表现出来。
  • 当用户修改了 View，Model 中的数据也会跟着改变。

把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。

直接操作DOM的示例

假设我们有一个简单的计数器应用，我们希望每次点击按钮时，页面上显示的数字增加1。

<!-- index.html -->
<div id="app">
    <p>Count: <span id="count">0</span></p>
    <button id="increment">Increment</button>
</div>

<script>
    document.getElementById('increment').addEventListener('click', function () {
        var countElement = document.getElementById('count');
        var currentCount = parseInt(countElement.textContent, 10);
        countElement.textContent = currentCount + 1;
    });
</script>

在这个例子中，直接通过getElementById获取DOM元素，并在事件处理器中修改这些元素的内容。虽然这种方法简单直观，但在复杂的用户界面和状态管理中，它容易导致代码冗长且难以维护。

使用Vue和MVVM的示例

同样的计数器应用，使用Vue框架和MVVM模式，代码看起来会更简洁且易于理解：

<!-- index.html -->
<div id="app">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            increment: function () {
                this.count++;
            }
        }
    });
</script>

在这个Vue版本的示例中，不再直接操作DOM，而是通过定义data属性和methods来描述应用的状态和行为。Vue框架负责监听状态变化并自动更新视图，这使得代码更加简洁，逻辑更加清晰，也更容易扩展和维护。

MVVM与DOM操作的主要区别

  1. 数据绑定：在MVVM模式下，数据和视图之间是双向绑定的，数据的更改会自动反映在视图上，反之亦然。而在直接操作DOM的情况下，你需要手动更新DOM以反映数据的变化。

  2. 代码结构：MVVM模式鼓励将数据、逻辑和视图分开，这使得代码更加模块化和可测试。直接操作DOM往往会导致代码混合在一起，增加理解和维护的难度。

  3. 性能优化：Vue等MVVM框架通常会缓存和批处理DOM更新，从而提高性能。直接操作DOM可能需要更多的CPU资源，尤其是在频繁更新DOM的情况下。

综上所述，虽然直接操作DOM在某些简单场景下可能是合适的，但在构建复杂和动态的Web应用时，MVVM模式和Vue这样的框架提供了更高效、更优雅的解决方案。

2，Vue 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

总之，Vue能简化前端开发，提升开发效率。

官网：https://cn.vuejs.org/
参考：https://cn.vuejs.org/v2/guide/
Git 地址：https://github.com/vuejs

3，Vue的使用步骤

3.1 新建项目

新建文件夹vue2并在vscode中打开，因为我们要使用npm对前端工程进行管理，所以使用下面的命令初始化项目：

npm init -y

初始化完成后，在工程根目录下会自动生成一个文件package.json。

在这里插入图片描述

3.2 安装依赖

执行如下命令安装vue依赖。

npm install vue@^2

安装完成后，会在工程根目录下多出一个node_modules的文件夹。

在这里插入图片描述

在packag.json文件中新增了关于vue的依赖声明。

在这里插入图片描述

3.3 使用Vue

第一步，在工程根目录下，创建index.html文件。

在这里插入图片描述

第二步，引入vue。

<script src="./node_modules/vue/dist/vue.js"></script>

第三步，创建一个简单的view。

<div id="app">
   <h1>{{name}}，非常帅</h1>
</div>
  • <div id="app">：这是一个普通的HTML <div> 元素，用作Vue应用的根元素。Vue实例将挂载到这个元素上。
  • <h1>{{name}}，非常帅</h1>：这是一个标题元素，其中包含一个插值表达式 {{name}}。插值表达式是Vue中用于数据绑定的一种方式，它允许你将数据模型中的值渲染到DOM中。

插值表达式 {{name}}：

  • {{ }} 是Vue的插值语法，用于将变量的值插值到模板中。
  • name 是一个变量名，它代表Vue实例中的数据属性。在这个例子中，name 应该是一个在Vue实例中定义的属性。

第四步，在script标签中创建Vue实例

JavaScript中创建一个Vue实例，并将其挂载到具有 id="app" 的元素上。

     new Vue({
       el: '#app',
       data: {
         name: '张二强'
       }
     });
  • el 属性指定了Vue实例应该挂载的元素。
  • data 属性是一个对象，定义了Vue实例的数据属性。在这个例子中，name 是一个数据属性，它的值将被渲染到模板中。

渲染结果

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}，非常帅</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          name: "张二强"
        }
      })
    </script>
</body>
</html>

二，37-前端基础-Vue-基本语法&插件安装

1，v-model

1.1，双向绑定

所谓的双向绑定指的是：

  • 视图绑定model(数据)，即model数据的变化后，view会自动刷新
  • model绑定视图，页面上的数据变化后，model对应的数据会自动更新

Vue 的双向绑定是一种数据绑定机制，允许视图（即用户界面）与应用状态（即数据模型）之间的自动同步。

这种机制使得开发者无需手动去追踪和管理视图与数据模型之间的同步，从而大大简化了开发流程。

Vue 实现双向绑定的核心是 v-model 指令。v-model 是一个语法糖，它实际上是一个语法上的便利抽象，结合了数据绑定和事件监听器的功能，使得开发者可以轻松地在表单控件元素（如 input, select, textarea 等）上创建双向数据绑定。

1.2，vue的双向绑定

1.2.1 html元素上使用指令v-model

在index.html中添加input元素。

<input v-model="num"/>

v-model 是 Vue.js 提供的一个指令，用于在表单控件（如 input、textarea 和 select 元素）与 Vue 实例中的数据属性之间创建双向数据绑定。

1.2.2 model中声明对应属性

在view对象中声明num属性。

let vm = new Vue({
   el: '#app',
   data: {
      name: "张二强",
      num: 100
   }
})

1.2.3，验证

view绑定model

打开网页，首先是输入框中会显示数字100，这是因为view绑定了model，model中的数据会被渲染到view。
在这里插入图片描述

model绑定view

当我们在输入框中输入120时，model中的数据也会更新为120。

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="num"/>
        <h1>{{name}}，非常帅，有{{num}}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          name: "张二强",
          num: 100
        }
      })
    </script>
</body>
</html>

2，v-on

2.1，指令简介

v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。

v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。

2.2，在button按钮中添加v-on:click

在index.html中增加一个button按钮。

<button v-on:click="num++" >点赞</button>

注意，这个按钮使用了v-on:click指令，指令中是js代码，当按钮被点击后，执行这段代码，model中的num自增。

在这里插入图片描述
当然，在v-on中也可以调用model中的方法。

<button v-on:click="cancel" >取消点赞</button>

如上，在一个button中使用v-on:click指令注册了click事件，这个事件调用了cancel方法，其在vue对象中的声明如下。

let vm = new Vue({
        el: '#app',
        data: {
          name: "张二强",
          num: 100
        },
        methods:{
            cancel(){
                this.num--;
            }
        }
      })

注意，方法都要声明在methods下。

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input v-model="num"/>
        <button v-on:click="num++" >点赞</button>
        <button v-on:click="cancel" >取消点赞</button>
        <h1>{{name}}，非常帅，有{{num}}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          name: "张二强",
          num: 100
        },
        methods:{
            cancel(){
                this.num--;
            }
        }
      })
    </script>
</body>
</html>

3，2个插件

3.1， Vscode插件Vue 2 Snippets

在这里插入图片描述
Vue 2 Snippets 主要是指在开发 Vue.js 2 应用时使用的代码片段或模板。在代码编辑器或 IDE 中，Snippets 可以帮助开发者快速插入常用的代码结构，减少重复的手动编码工作，提高开发效率。这些 Snippets 通常包含了 Vue.js 组件的基本结构、指令、计算属性、事件处理器等常见的代码模式。

使用 Vue 2 Snippets 的主要作用包括：

  1. 加速开发：

    • 快速生成预定义的代码块，减少键盘输入，节省时间。

  2. 代码标准化：

    • 保证项目中代码风格的一致性，遵循最佳实践。

  3. 减少错误：

    • 自动插入正确的语法和结构，减少因手写代码而引入的错误。

  4. 易于学习：

    • 对于初学者来说，Snippets 可以作为学习 Vue.js 结构和语法的参考。

  5. 提升团队协作：

    • 当团队成员都使用相同的 Snippets 时，代码更加统一，便于理解和维护。

  6. 智能提示和补全：

    • 许多现代编辑器和 IDE 都支持基于 Snippets 的智能代码补全功能。

例如，在 Visual Studio Code 中，你可以安装专门针对 Vue.js 的扩展插件，如 “Vetur”，它提供了大量的 Vue 2 Snippets。当你开始输入某个触发词时，如 “v-comp”，然后按 Tab 键，就可以自动生成一个 Vue.js 组件的完整模板。

<template>
  <div class="name-of-component">
    <!-- Your component's template goes here -->
  </div>
</template>

<script>
export default {
  name: 'NameOfComponent',
  props: [],
  data() {
    return {
      // your component's data properties go here
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style scoped>
/* Your component's styles go here */
</style>

这样的 Snippets 不仅可以帮助你快速搭建组件框架，还可以让你专注于逻辑实现，而不是花费时间在基础结构的编写上。

3.2，chrome插件Vue-devtoos

F12打开调试界面，在命令行控制台可以看到安装Vue-devtools插件的提示。

在这里插入图片描述

Vue Devtools 是一个专为 Vue.js 应用程序设计的浏览器扩展工具，它提供了深入的调试功能和可视化界面，帮助开发者更有效地理解和调试 Vue.js 应用。以下是 Vue Devtools 的一些主要作用：

  1. 组件树视图：

    • 显示应用程序中组件的层次结构，便于理解组件之间的父子关系。
    • 高亮显示当前激活的组件，帮助定位和跟踪用户交互。

  2. 组件实例检查：

    • 允许查看和修改组件的状态，包括 data、computed、props、methods 等。
    • 可以查看组件的模板、样式和源代码，以及它们的依赖项。

  3. 时间旅行调试：

    • 记录组件的状态快照，允许开发者回溯到之前的状态，查看状态变化历史。
    • 支持“跳转”到特定的时间点，重现问题发生时的环境。

  4. 性能监控：

    • 监测每个组件的渲染时间和渲染次数，帮助识别性能瓶颈。
    • 提供性能分析工具，如 Profiler，用于详细分析渲染性能。

  5. 事件监听：

    • 显示组件上触发的所有事件，包括自定义事件和内置事件。
    • 可以监听特定事件，观察事件流和事件处理器的行为。

  6. 调试工具：

    • 提供断点调试能力，允许在特定组件或方法上调试。
    • 集成了 Chrome 开发者工具的其他功能，如网络请求监控、CSS 编辑等。

  7. 版本兼容性：

    • 支持多种 Vue.js 版本，包括 Vue 2 和 Vue 3。
    • 提供了版本切换功能，确保工具与应用版本匹配。

  8. 社区支持与更新：

    • 定期更新以修复 bug 和改进功能，保持与最新 Vue.js 核心库的兼容性。
    • 社区活跃，有丰富的文档和教程资源。

总之，Vue Devtools 是 Vue.js 开发者不可或缺的工具之一，它极大地提高了开发效率和调试体验，是学习和优化 Vue.js 应用的重要辅助手段。

标签：Vue,name,DOM,44,绑定,36,js,model
From： https://blog.csdn.net/epitomizelu/article/details/140567215

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99