一个案例体会Vue的优势

最新推荐文章于 2024-07-23 17:22:52 发布

抗争的小青年

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量379

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liyuchenii/article/details/126033434

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

作为一个前端初学者，在初接触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打交道，而把精力放在处理数据和逻辑上的。

留言框案例

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

案例展示：

Snipaste_2022-07-28_13-29-56

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

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

使用原生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>

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} <button class="delButton">删除</button>`
      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)

大家可以看到，在原生js实现的时候，我会频繁操作DOM节点，会频繁创建节点，删除节点，获取节点，这些都是我们考虑的。我们来看看用Vue是什么样的。

使用Vue实现

<body>
  <div class="app">
    <div>
      <input type="text" placeholder="请输入代办事项" v-model="mytext">
      <button @click.enter="handleAdd">添加</button>
    </div>
    <ul>
      <li v-for="(item,index) in list">
        {{item}}
        <button @click="handleDel(index)">删除</button>
      </li>
    </ul>
  </div>
</body>



<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    el: ".app",
    data: {
      list: ['aaa', 'bbb'],
      mytext: ""
    },
    methods: {
      handleAdd() {
        this.list.push(this.mytext);
        this.mytext = '';
      },
      handleDel(index) {
        this.list.splice(index, 1)
      }
    }
  })
</script>

大家可以和用原生js实现的代码进行对比。在用原生js实现的时候，开发人员不但要关注逻辑，数据，同时也得操作DOM树来实现页面的相关效果（操作节点）。

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

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

希望通过该案例，让你对Vue有一个新的认识，明白我们为啥要用Vue，Vue好在哪里。重点是体会编程思想的改变。