一个案例体会Vue的优势

一个案例体会Vue的优势
作为一个前端初学者，在初接触Vue的时候，大可能按照网上的教程学完Vue这个前端框架的使用方法。在实际开发中可以运用就行。但我认为这样学习是不太妥的或者说是不太够的，我认为框架语言思想方面的学习要远远重要于框架使用方面的学习。这也正是我想和大家说的，我们为什么要用Vue呢？他和原生Js比好在哪里？

你可以点击这里打开Vue的官方文档，你可以重点关注介绍这部分内容。在介绍中，官方文档有一句话是这样说的：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层

这里和大家简单说一下Vue的为啥是一个渐进式框架。大家都知道Vue里面还有Vuex，VueRouter等，Vue给用户提供了一个全家桶，用户需要什么，就引入什么，每个部分都可以单独使用，这就是Vue的渐进式。

Vue 是一套构建用户界面的渐进式的自底向上增量开发的 MVVM 框架， 核心是关注视图层，vue 的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以 vue 的核心思想是数据驱动和组件化。

正如Vue所说，在没有Vue前，前端开发人员会频繁的对DOM进行操作，Vue的出现，就是改变这个情况。它的核心就是就是数据驱动，减少开发人员和DOM打交道。让前端开发人员把精力放在处理数据和逻辑这块。

这里我准备了一个案例，让大家体会一下Vue是如何减少开发人员与DOM打交道，而把精力放在处理数据和逻辑上的。

留言框案例

项目描述：搭建一个简单的留言框，用户在框内输入内容，点击添加按钮，添加的消息在留言框下面的列表中进行展示，可以多条显示。每条留言后面有个删除按钮，点击按钮，删除当前留言。

案例展示：

博主还分享过一个界面美观的留言框案例，点击这里学习。

这里我们注重功能，就不写的这么花里胡哨了。

使用原生js实现

html
```
<body>
  <div>
    <input type="text">
    <button class="addButton">添加button>
  div>
  <div>
    <ul>
      <li>我是第一个 <button class="delButton">删除button>li>
      <li>我是第二个 <button class="delButton">删除button>li>
    ul>
  div>
body>

1
2
3
4
5
6
7
8
9
10
11
12
13
```
JavaScript
```
  var input = document.querySelector("input[type=text]")
  var button = document.querySelector(".addButton")
  var ul = document.querySelector("ul")

  //给按钮添加点击事件，完成元素的添加
  button.addEventListener("click", function () {
    if (input.value.length == 0) {
      window.alert("你最好输入一些什么在点击按钮")
    } else {
      var str = `${input.value} `
      var li = document.createElement("li")
      li.innerHTML = str
      ul.appendChild(li)

      var deletea = document.querySelectorAll(".delButton")
      deletea.forEach((item, index) => {
        item.onclick = function () {
          // console.log(item.parentNode);
          ul.removeChild(item.parentNode)
        }
      })

      // 这种方式也是给所有的按钮添加删除事件

      // for (let i = 0; i < deletea.length; i++) {
      //   deletea[i].onclick = function () {
      //     console.log(this.parentNode);
      //     ul.removeChild(this.parentNode);
      //   }
      // }
      input.value = ""
    }
  }, false)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
```
大家可以看到，在原生js实现的时候，我会频繁操作DOM节点，会频繁创建节点，删除节点，获取节点，这些都是我们考虑的。我们来看看用Vue是什么样的。

使用Vue实现
```
  
    
      
      
    
    
      
        {{item}}
        
      
    
  








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
```
大家可以和用原生js实现的代码进行对比。在用原生js实现的时候，开发人员不但要关注逻辑，数据，同时也得操作DOM树来实现页面的相关效果（操作节点）。

但这一点到了Vue这里就完全不同了，在Vue实例中，我只注重数据以及逻辑，很少去直接操作DOM树，这就是Vue相对于原生js的优势，这也就是我们为什么要使用Vue。

尽管Jquery封装了JavaScript让JavaScript变得更好用，但它的编程思想仍然是让开发者既操作DOM元素，又关注逻辑。这一点到了Vue这里就完全改变了，在Vue里你可以不太关注页面元素，只注重逻辑就可以实现效果，操作元素节点的事情Vue已经帮你做了。

希望通过该案例，让你对Vue有一个新的认识，明白我们为啥要用Vue，Vue好在哪里。重点是体会编程思想的改变。
相关阅读:
『现学现忘』Git分支 — 41、分支基本操作（二）
【若依(ruoyi)】bootstrapTable 有选中行按钮可用，无选中行按钮不可用/单选和多选按钮样式
 汽车CAN/ CAN FD数据记录仪在上汽大通诊断测试部门的应用
 【Linux】线程安全-死锁
 真正的模块化编程原来是这样的！
ArcGis for JavaScript 4.23版本接入国家天地矢量地图
 删除node_modules文件夹
 【博客487】prometheus-----高基数问题的危害以及如何排查和避免
 虹科干货 | Redis Enterprise 自动分层技术：大数据集高性能解决方案
 DedeCMS整合百度ueditor编辑器
原文地址：https://blog.csdn.net/liyuchenii/article/details/126033434

留言框案例

使用原生js实现

使用Vue实现