爲何要學習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 庫都有成熟的解決方案。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。