VUE 学习笔记（二）VUE的深入理解_vue 如何学习深层

作者：weixin_40725706 | 2024-02-08 15:35:42

踩

vue 如何学习深层

一、VUE 简介

1.什么是VUE ?

VUE 是一套用于构建用户界面的渐进式JavaScript框架，对于简单应用，只需要轻量小巧的核心库，对于复杂的应用，可以引入各种VUE 插件。

模板引擎是 Vue 里最主要、最核心的一个能力，在模板引擎还没有出现的时候，我们更新页面的内容，大概流程是：监听操作 -> 获取数据变量 -> 使用数据拼接成 HTML 模板 -> 将 HTML 内容塞到页面对应的地方 -> 将 HTML 片段内需要监听的点击等事件进行绑定。

由此可见需要维护一大堆的 HTML 和变量拼接的动态内容，虽然 jQuery 提升了 DOM 元素的操作性，但依然难以避免代码的可读性、可维护性上的一些问题。

如今使用 Vue，就可以方便地在模板里用插值表达式{{}}、v-bind绑定变量来展示，同时配合v-if、v-for这些内置指令，可以很方便地写出可读性和维护性都很不错的代码。

2、VUE有什么特点?

(1)、VUE采用组件化的模式，提高代码复用率，让代码更好的维护

Vue将相近的部分封装成一个模块，一个模块中包含html，css，js代码，模块可以在任何地方复用，若修改模块中的内容不会影响其他模块。

如图所示：

在这里插入图片描述

（2）、Vue使用虚拟DOM + Diff算法，能极大的提升效率

Vue会将数据先变成虚拟DOM，如果数据有变化时，使用Diff算法进行比较，如果新的虚拟DOM与旧的虚拟DOM中有相同的DOM，就直接复用，这样能够极大的提升效率。

在这里插入图片描述

（3）、Vue数据双向绑定是Vue的精髓

Vue是一个MVVM框架，数据双向绑定，具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。这也算是Vue的精髓之处。尤其是在进行表单处理时，Vue的双向数据绑定非常方便。

Vue.js中的v-model主要用在表单的input输入框，完成视图和数据的双向绑定：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

（4）、Vue指令可以给绑定元素添加特殊的行为

Vue指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。如：v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。

例如 v-if 条件：

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Default Type</div>

1
2
3
4

我们可以这样理解：

function genThisHTML(scopeData) {
  // scopeData 为 Vue 实例里绑定的 data 数据
  if (scopeData.type === "A") {
    return `<div>Type A</div>`;
  } else if (scopeData.type === "B") {
    return `<div>Type B</div>`;
  } else {
    return `<div>Default Type</div>`;
  }
}
1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/69787