一个案例体会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>
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好在哪里。重点是体会编程思想的改变。
