为何要学习vue

时间 2019-11-13

标签为何学习 vue 繁體版

原文原文链接

Vue是什么？来看看官方的介绍。

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。css

Vue和Jquery有什么区别？

jquery到vue转变是一个思想的转变，是将jquery直接操做dom的思想转变到操做数据上去。
jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操做，其实和原生的HTML的区别只在于能够更方便的选取和操做DOM对象，而数据和界面是在一块儿的。好比须要获取label标签的内容：$("lable").val();,它仍是依赖DOM元素的值。
Vue则是经过Vue对象将数据和View彻底分离开来了。对数据进行操做再也不须要引用相应的DOM对象，能够说数据和View是分离的，他们经过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

从代码来看看二者的不一样，咱们从中能够看出vue只须要向数据message里面push一条数据便可完成添加一个li标签的操做，而jquery则须要获取dom元素节点，并对dom进行添加一个标签的操做，若是dom结构特别复杂，或者添加的元素很是复杂，则代码会变得很是复杂且阅读性低。html

为了帮助你们让学习变得轻松、高效，给你们免费分享一大批资料，帮助你们在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给你们推荐一个前端全栈学习交流圈：866109386.欢迎你们进群交流讨论，学习交流，共同进步。前端

jquery代码vue

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <ul id="list">
            <li>第1条数据</li>
            <li>第2条数据</li>
        </ul>
        <button id="add">添加数据</button>
    </div>

</body>
<script>
    $(document).ready(function() {  
    var i=2;
    $('#add').click(function() { 
       i++; 
       //经过dom操做在最后一个li元素后手动添加一个标签
      $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
    });  
  }); 
</script>

Vue代码jquery

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!--根据数组数据自动渲染页面-->
            <li v-for="item in message">{{item}}</li>
        </ul>
        <button @click="add">添加数据</button>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            message: ["第1条数据","第2条数据"],
            i:2
        },
        methods:{
            //向数组添加一条数据便可
            add:function(){
                this.i++
                this.message.push("第"+this.i+"条数据")
            }
        }
    })
</script>

# 为何须要使用vue?

近两年前端技术变革速度太快，vue不论针对web项目开发，网站制做，仍是app，小程序开发，都愈来愈流行，其便捷性及易用程度都让你不得不考虑去学习。若是仅仅仍是传统的各类cms开源代码建站仿站，显然你的技术已经跟不上了，若是你开发的项目数据交互较多，而且先后端分离明显，那么vue将会使你将来技术长足成长的不二选择。web

组件化: 其中以 React 的组件化最为完全,甚至能够到函数级别的原子组件,高度的组件化能够是咱们的工程易于维护、易于组合拓展。
自然分层: JQuery 时代的代码大部分状况下是面条代码,耦合严重,现代框架无论是 MVC、MVP仍是MVVM 模式都能帮助咱们进行分层，代码解耦更易于读写。
生态: 如今主流前端框架都自带生态,无论是数据流管理架构仍是 UI 库都有成熟的解决方案。