乐趣区

关于vue.js:Vue学习笔记二-相识篇

作者：

jiezi

在

浏览本文须要根本把握HTML、CSS和JavaScript的中级常识，还有《Vue学习笔记(二) 初遇篇》。本篇在某种程度上并不是承接上一篇，更像是初遇篇的重构。

前言

去思否翻了翻本人第一篇写Vue相干的文章《Vue 学习笔记(一)初遇》, 发表的日期是2019年12月14号，也就是这一年呈现了疫情，到当初大略有三年了，不胜唏嘘。往年据说是“寒意凛然”，为了晋升本人的性价比，加强本人的竞争力，我决定重新学习一下前端。这是开玩笑的话，其实是为了做一个开源我的项目做筹备。让咱们来回顾一下《Vue 学习笔记(一)初遇》讲的货色，在这篇内容中咱们次要讲了JavaScript的大抵倒退历史，晚期的浏览器对JavaScript适配不齐全，雷同的JavaScript可能在不同的浏览器上没有统一的行为，而且在写管制DOM结点方面非常繁琐，于是有人推出了JQuery，化繁为简，然而随着网页在越来越简单，因为JQuery间接操纵DOM结点，DOM的节点的扭转就会带来网页的重绘，于是前面的前端框架的思路就是推出虚构DOM，使用diff算法来计算出真正须要更新的节点，最大限度地缩小DOM操作以及DOM操作带来的排版与重绘损耗，从而显著进步性能。 等等，JQuery操纵结点须要重绘，你的Vue也须要重绘啊？ 那么你的Vue到底好在哪里呢？ 好在，会合并运算，将屡次更改合并为一次，举一个例子，在JQuery中假如须要操纵三次Dom，由三个办法触发，但其实最终不须要更新那么屡次结点，咱们将DOM了解为一个数字，每次操作像是对这个数字进行加减，那么三次DOM操作可能就像是 5+ 3 – 5 , 最终只须要加3渲染一次就行了，这是Vue的做法。然而对于JQuery来说就是运算三次，带来三次页面重绘。这个性能节俭就在这里。 那么对于一个简单的页面，你这个diff算法的计算不须要工夫吗？当然也须要工夫, 其实咱们Vue次要还是在晋升开发效率、代码复用性。 这也就是Angular、Vue、React的思路，然而这些前端框架所带来的并不仅仅是虚构DOM，还带来了响应式、MVVM。但Vue并不具备侵入性，是渐进式的，所谓渐进式也就是说，如果你当初就有一个利用，那么你能够抉择将Vue嵌入到你的利用中，来享受Vue提供的便当，而不会对全局进行扭转。等一等，你说Vue提供的便当，你说到这个我就不困了，能举一个例子来阐明下Vue的便当吗？ 好的，上面是一个最终效果图:

对html有一点相熟的同学可能一下子就看进去了，这是四个无序列表标签，列表标签前面是一个json。如果这些json是从服务端传递过去的，那么用JQuery实现下面的思路就是首先应用Ajax获取前端数据，而后拼接成对应的html字符串，通过JQuery选择器选中对应的元素，获取到JQuery对象之后，将对应的html字符串传给对象的append办法，此办法会将咱们拼接的字符串渲染为实在的DOM结点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id = "app">

  </div>  
</body>
 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">
    // 这个标签用于引入JQuery
</script>
<script>
   $(document).ready(function(){
        // dom加载结点之后触发getJSON,获取的数据会传给result
        $.getJSON("http://localhost:8080/hello",function(result){
            var products  = result.products;
            console.log(products);
            var targetStr = "";    
            // 通过foreach办法拼接成最终的字符串
            $.each(products, function(i, field){
                field = JSON.stringify(field);
                targetStr  = targetStr + "<li>" + field + "</li>"
            });
            // 通过append办法创立结点
            $("#app").append("<ul>"+targetStr+"</ul>");
        });
});
</script>
</html>

最终的后果如下图所示:

// getJson返回的数据格式如下
{
  "products": [
    {
      "id": 1,
      "quantity": 1,
      "name": "红焖羊肉"
    },
    {
      "id": 2,
      "quantity": 0,
      "name": "猪肉韭菜饺子"
    },
    {
      "id": 3,
      "quantity": 4,
      "name": "热干面"
    },
    {
      "id": 4,
      "quantity": 5,
      "name": "烩面"
    }
  ]
}

上面Vue的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id = "app">
    <ul v-for = "product in products" > 
        <li>
             {{product}} 
        </li> 
    </ul>
</div>
<div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
    // 代表创立一个Vue实例
    const app = new Vue({
        el:'#app', // el 代表element 前面跟的是须要Vue接管的元素
        data:{
            products:[]
        },
        // 页面加载的时候触发created函数
        created(){
            // 申请这个地址
           fetch('http://localhost:8080/hello').then(response=> response.json()).then(json => {
             // 将拿到的值赋给products    
            this.products = json.products;
           })     
        }
    })
</script>
</body>
</html>

下面的v-for 就是循环products，最终的成果与JQuery一样，然而Vue的更为天然一点，如果咱们要再加要求，比方计算出还剩多少份饭，渲染到指定结点上，残余份数为0就显示饭曾经卖光了，如果用JQuery来做，还是用选择器抉择对应的元素，而后写入到对应的元素中，这里不再给出JQuery的写法，咱们间接上Vue的写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id = "app">
    <ul v-for = "product in products" > 
        <li>
             {{product.name}}  {{product.quantity}} 
             <span v-if = "product.quantity === 0">
                曾经售空
            </span>
            <button @click = "product.quantity += 1">
                增加
           </button> 
        </li> 
    </ul>
    <h2> 总库存 {{ totalProducts}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
    // 代表创立一个Vue实例
    const app = new Vue({
        el:'#app', // el 代表element 前面跟的是须要Vue接管的元素
        data:{
            products:[]
        },
        // 页面加载的时候触发created函数
        created(){
            // 申请这个地址
           fetch('http://localhost:8080/hello').then(response=> response.json()).then(json => {
             // 将拿到的值赋给products    
            this.products = json.products;
           })     
        },
        // computed 是计算属性
        computed:{
            totalProducts(){
                // reduce是js提供, 进行累加   
                return this.products.reduce((sum,product) => {
                    return sum + product.quantity;
                },0);
            }
        },
    })
</script>
</body>
</html>

最终的成果如下图所示:

当咱们点击猪肉韭菜饺子的增加按钮，你会发现曾经售空会隐没，同时总库存会响应的减少。这也就是Vue中响应式的真义: 数据在产生变动的时候,Vue会帮你更新所有网页中用到它的中央。下面的例子中我么首先碰到的就是{{变量名}}， 这种语法被用来获取Vue实例中data对象的属性，这种语法在Vue中咱们称之为模板语法，这在Vue中被称之为申明式渲染，Vue 基于规范 HTML 拓展了一套模板语法，使得咱们能够申明式地形容最终输入的 HTML 和 JavaScript 状态之间的关系。 申明式和响应式是Vue的两个外围性能。

MVVM模式

做过服务端开发大多都对MVC模式不会模式:

view负责图形显示，是提供给用户的操作界面，是程序的外壳。Controller负责转发用户申请，将申请分发给对应的model，由model对提取用户所须要的数据。那MVVM模式呢？上面是一张介绍Vue中mvvm模式的一张经典图片:

页面中的一个惯例操作是咱们用JavaScript对DOM节点的某些事件进行监听，事件产生触发咱们的监听函数，监听函数更新DOM。在Vue中引入了v-model指令来对下面的惯例操作进行封装，咱们无需在写监听事件，借助v-model指令，页面的数据发生变化时候主动达到咱们的函数，函数来更新对应的节点，这所有仅仅须要一个简略v-model指令,让咱们来看上面一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id = "app">
    <p>Message is: {{ message }}</p>
    <input v-model="message" placeholder="edit me" />
</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>   
<script>
 var vue = new Vue({
    el:'#app',
    data:{
       'message': 'Hello Vue.js'     
    }
 })
</script>
</body>
</html>

当咱们在输入框中输出值，输出值会主动替换p标签的{{message}}, 你看看这是不是简略很多了， 这里咱们先让v-model漏个面，简略的先意识下，忘了说，这种景象咱们也称之为双向绑定。

Vue 简介

什么是 Vue？Vue2文档的答复是:

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。

Vue2文档的答复最终只突出渐进式框架, 我感觉这个答复是不够直观的。那咱们接着来看Vue 3是如何答复这个问题:

Vue (发音为 /vjuː/，相似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于规范 HTML、CSS 和 JavaScript 构建，并提供了一套申明式的、组件化的编程模型，帮忙你高效地开发用户界面。无论是简略还是简单的界面，Vue 都能够胜任。

咱们从这个答复中看到的就比拟多了，并且更加直观，绝对于Vue2的答复较新的词是申明式、组件化，申明式在下面咱们曾经介绍过了，那什么是组件化？ 或者什么是组件？ 组件事实上是一个含意很大的概念，个别是指软件系统的一部分，承当了特定的职责，能够独立于整个零碎进行开发和测试，一个良好设计的组件应该能够在不同的软件系统中被应用(可复用)。例如V8引擎是Chrome浏览器的一部分，负责运行JavaScript代码，这里V8引擎就能够被视为是一个组件。V8引擎同时也是Node.js的JavaScript解释器，这体现了组件的可复用性。Vue组件也是如此，承当了特定的职责，具备可复用性。举一个例子，咱们司空见惯的下拉框，一个按钮事实上分成三块，第一个是骨架也就是html，第二个是css也就是款式，第三个是触发按钮事件(点击)之后的逻辑(JavaScript)。在Vue中咱们就能够将这个按当做一个组件来对待,如下图所示:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

咱们将下面的代码放入一个叫button.vue文件中，如果咱们想在别的中央应用这个组件，在须要用到的中央应用即可，咱们能够将button.vue称之为单文件组件，用英文名为Single-File Component, 缩写为SFC。单文件是组件是Vue的标志性性能。基于此咱们就能够将一个页面切分成若干个组件，组件零碎是 Vue 的另一个重要概念，因为它是一种形象，容许咱们应用小型、独立和通常可复用的组件构建大型利用。认真想想，简直任意类型的利用界面都能够形象为一个组件树：

这个图片来自Vue官网。Vue2的文档在答复何为Vue的时候，突出了渐进式，然而在Vue 3的第一答复中没有渐进式，但这并不意味着Vue具备侵入性，它依然是渐进式的，渐进式呈现了Vue的特点介绍中。在下面的例子中，咱们就是没有借助Vue的构建工具，而是将Vue当作相似JQuery一样的存在，渐进式的加强动态的html。事实上Vue的应用形式是多种多样的，你能够这样应用Vue:

  • 无需构建步骤，渐进式加强动态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页利用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 动态站点生成 (SSG)
  • 开发桌面端、挪动端、WebGL，甚至是命令行终端中的界面

Vue 实例

在下面的例子中，咱们的利用总是从new 一个Vue对象开始，再看一下咱们的第一个Vue示例，这个示例中咱们用到了Vue实例中的data和el属性、created办法，el属性用来指明Vue实例的作用范畴，在Vue实例的作用范畴中，在html中能够用双大括号能够取出data对象的值，当一个 Vue 实例被创立时，它将 data 对象中的所有的 property 退出到 Vue 的响应式零碎中。当这些 property 的值产生扭转时，视图将会产生“响应”，即匹配更新为新的值。Vue的构造函数会为Vue的成员变量赋值，留神在JavaScript函数也能当做一个变量解决，所以咱们也能够抉择传入一个函数。那Vue实例有哪些成员变量呢，咱们来看以下Vue的API文档:

咱们目前用过的成员变量有data这个属于数据，computed属于计算属性，created办法在Vue的官网文档中被称为钩子，每个 Vue 实例在被创立时都要通过一系列的初始化过程——例如，须要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变动时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段增加本人的代码的机会。还有很多生疏的，不要焦急，咱们会做懒加载。

模板语法

咱们下面应用的是Vue模板语法中最常见的一种，被称为”Mustache“语法(双大括号取值)的文本取值，如果你想取出来的是html，能够通过上面的指令通知Vue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id = "app">
    <span v-html = "product"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
    // 代表创立一个Vue实例
    const app = new Vue({
        el:'#app', // el 代表element 前面跟的是须要Vue接管的DOM元素ID
        data:{
            product: "<h1>这是被Vue渲染进去的</h1>"
        },
    })
</script>
</body>
</html>

最终成果:

动静渲染的任意HTML可能会十分危险，因为它很容易导致XSS攻打，请审慎应用动静渲染。那这种模板语法是否作用dom元素的属性呢，在Vue是不能的，然而Vue中提供了另一种曲线救国的形式：v-bind指令。v-bind指令能够帮咱们将dom元素的属性和Vue对象的data实例绑定在一起。上面是v-bind指令的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id = "app">
    <span v-html = "product"></span>
    <div v-bind:id = "dynamicId" >
    <button v-bind:disabled="isButtonDisabled">Button</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
    // 代表创立一个Vue实例
    const app = new Vue({
        el:'#app', // el 代表element 前面跟的是须要Vue接管的DOM元素ID
        data:{
            product: "<h1>这是被Vue渲染进去的</h1>",
            dynamicId: "dynamicId",
            isButtonDisabled: true // 对于布尔类型的属性, false、null、undefined,对应的属性不会呈现在渲染进去的元素中
    })
</script>
</body>
</html>

v-bind的语法为: v-bind:绑定属性。

类与款式绑定

操纵元素的class

操纵元素的class列表和内联款式是数据绑定的一个常见须要，它们都是attribute，所以咱们能够用v-bind指令来解决，然而拼接字符串往往是个麻烦的事件，因而在Vue 中专门对class和style 做了加强，表达式的后果除了字符串之外，还能够是对象和数组。让咱们来看上面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id = "app">
    <div v-bind:class="{ active: isActive }" id = "app01">测试</div>    
    <div v-bind:class="{  active: isActive, 'text-danger': hasError }" id = "app02">这代表对象语法</div>    
    <div v-bind:class="[activeClass, errorClass]"> 这是数组语法</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>   
<script>
 var vue = new Vue({
    el:'#app', // active这个款式的存在与否取决于isActive的true、false
    data: {
        isActive: true, // #app02 是否具备active和text-danger取决于isActive和hasError的true和false
        hasError: true,
        activeClass: 'active',
        errorClass: 'text-danger'
    }
 })
 </script>
</html>

绑定内联款式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <div v-bind:style="styleObject"> 对象语法</div>
        <div v-bind:style="[styleObject, overridingStyles]"> 数组语法,data中申明的overridingStyles、overridingStyles在style中</div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>   
<script>
    var vue = new Vue({
       el:'#app', 
       data: {
        styleObject: {
            color: 'red',
           fontSize: '13px'
        },
        overridingStyles: {
           'background-color': 'black',
            'width':'500px'
        }
       }})
    </script>
</html>

计算属性

模板外面能够容许呈现一些表达式，如上面的代码所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
         {{number  + 1}}
         {{message}}
         {{ message.split('').reverse().join('') }}
         {{tips}}
         {{reversedMessage}}
        这里间接调用办法{{reversedMessagePlus()}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
    var vue  = new Vue({
        el: '#app',
        data:{
            number: 0,
            message: '护维以难,法写种这荐推不',
            tips: 'Vue 为咱们筹备了计算属性来应答这样的场景'
        },
        //  上面是用计算属性实现的
        computed:{
            // reversedMessage 关联上函数
            // 这个函数将被用作reversedMessage的getter 函数
            // 当data中的message产生扭转, reversedMessage会主动跟着扭转
            // 验证这一点只须要关上浏览器的控制台, 为vue.messsage 赋值即可
            reversedMessage:function(){
                return this.message.split('').reverse().join('')
            }
        },
        // 留神methods 和 computed中的函数不能同名
        methods: {
            reversedMessagePlus:function () {
                 return this.message.split('').reverse().join('')
            }
       }   
    })
</script>
</html>

在computed函数中的咱们称之为计算属性，在methods中咱们称之为一般的办法，两种形式的最终计算结果是完全相同的。不同的在于计算属性是基于它们的响应式依赖进行缓存的。只有相干响应式依赖产生扭转时它们才会从新求值。这就意味着只有message还没有产生扭转，屡次拜访reversedMessage会立即返回之前的计算结果，而不用再执行函数。

上面的计算属性不会再页面上更新，起因在于Date.now并不是响应式依赖，不依赖于data对象的值。

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每次触发从新渲染，调用办法将再次执行methods中的函数。计算属性的缓存在于，如果咱们须要有一个开销很大的计算属性A，它须要遍历一个微小的数组并作大量的计算。而后咱们可能其余的计算属性依赖于A，如果没有缓存，那么这个计算就会被执行屡次。

条件渲染与列表渲染

所谓条件渲染咱们能够这么了解，满足肯定条件，对应的dom元素才会被渲染进去，就像咱们下面用到的v-if。有v-if 就有v-else。值得注意的时v-else元素必须紧跟v-if或者v-else-if 的元素的前面，否则它将不会被辨认。v-else-if 于Vue在2.10版本推出，充当 v-if 的“else-if 块”，能够间断应用。值得注意的时，Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得十分快之外，还有其它一些益处。例如，如果你容许用户在不同的登录形式之间切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
          </template>
          <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
          </template>
          <button @click = "toggle">切换登陆形式</button>
    </div>
    
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
      var vue  = new Vue({
        el: '#app',
        data: {
            loginType: 'username'
        },
        // 在这个例子中,用户输出,点击切换形式,并不会清空用户的输出。  
        methods:{
            toggle:function(){
                this.loginType = this.loginType === 'username' ? 'email': 'username';
            }
        }    
      });
</script>
</html>

如果想点击切换登陆形式之后切换,给每个input的key属性一个惟一的key就行，像上面这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
          </template>
          <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
          </template>
          <button @click = "toggle">切换登陆形式</button>
    </div>
    
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
    // 这里代表引入Vue
</script>
<script>
      var vue  = new Vue({
        el: '#app',
        data: {
            loginType: 'username'
        },
        methods:{
            toggle:function(){
                this.loginType = this.loginType === 'username' ? 'email': 'username';
            }
        }    
      });
</script>
</html>

另一个用于依据条件展现元素的选项是 v-show 指令。用法大抵一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简略地切换元素的 CSS property display。也就是暗藏。

v-for就是列表渲染，遍历data中的元素，这里不再做介绍。

总结一下

重新学习了一下JavaScript内框架与库的倒退历史，从原生JavaScript到JQuery，再到古代前端框架。古代前端框架更加着眼于代码复用、性能、开发效率。咱们下面介绍了Vue的几大重要个性: MVVM，双向绑定、响应式。MVVM是一种理念，某种程度上双向绑定能够算的上是MVVM在Vue的实现，所谓双向绑定，就是咱们的数据对象和DOM建设关系之后，数据会主动的从DOM结点流向咱们的数据对象，在Vue实例中咱们如果对数据对象再进行操作，不须要咱们间接更新DOM结点，会主动的挂载到对应的数据结点。网页开发中咱们一个常见的需要是依据数据渲染结点，在Vue中咱们能够用模板语法、条件渲染、列表渲染来实现。如果你想要操纵款式，能够通过V-bind指令来实现。

参考资料

  • 虚构DOM(Virtual DOM)的劣势在哪里？ https://juejin.cn/post/710634…
  • 为什么说JS的DOM操作很耗性能 https://zhuanlan.zhihu.com/p/…
  • 怎么准确辨别这些名词：库、插件、组件、控件、扩大？ https://www.zhihu.com/questio…
  • MVC https://developer.mozilla.org…

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章