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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/vue@2/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/7106340182974005255#heading-2
为什么说JS的DOM操作很耗性能 https://zhuanlan.zhihu.com/p/86153264
怎样精确区分这些名词：库、插件、组件、控件、扩展？ https://www.zhihu.com/question/49536781/answer/117606933
MVC https://developer.mozilla.org/zh-CN/docs/Glossary/MVC

Vue学习笔记(二) 相识篇

前言

MVVM模式

Vue 简介

Vue 实例

模板语法

类与样式绑定

操纵元素的class

绑定内联样式

计算属性

条件渲染与列表渲染

总结一下

参考资料

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue学习笔记(二) 相识篇

前言

MVVM模式

Vue 简介

Vue 实例

模板语法

类与样式绑定

操纵元素的class

绑定内联样式

计算属性

条件渲染与列表渲染

总结一下

参考资料

热门文章

最新文章

相关课程

相关电子书