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

浏览本文须要根本把握 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 的两个外围性能。

做过服务端开发大多都对 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？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，甚至是命令行终端中的界面

在下面的例子中，咱们的利用总是从 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 列表和内联款式是数据绑定的一个常见须要，它们都是 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…

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

前言

MVVM 模式

Vue 简介

Vue 实例

模板语法

类与款式绑定

操纵元素的 class

绑定内联款式

计算属性

条件渲染与列表渲染

总结一下

参考资料

Just My Socks（注册教程内含优惠码）

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

前言

MVVM 模式

Vue 简介

Vue 实例

模板语法

类与款式绑定

操纵元素的 class

绑定内联款式

计算属性

条件渲染与列表渲染

总结一下

参考资料

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）