Vue.js 初接觸

bladefury 發布于2019-08-21 15:52 / 3328人閱讀

摘要：二還有一點也是思想不容易轉過彎的一點，就是我在學習前端時，接觸的思想都是需要我們將者分開，方便維護。但是在學習了接觸了單文件組件之后，世界又變了，又讓我們將同一個組件的放到一個文件中，這樣又便于維護和復用，這一臉的懵那啥。

Vue.js 介紹

官方介紹：

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
以上為Vue.js官網的介紹。

一、其實在接觸了Vue.js后給我最大的沖擊就是雙向數據綁定功能，以前我們需要讓頁面和用戶產生交互時，通常我們會這樣：
1、獲取DOM節點，然后獲取到用戶的輸入內容。
2、獲取展示的DOM節點，然后將獲取的內容插入到節點中。
可以看出這么簡單的功能我們卻需要比較多的代碼去實現，但是在Vue.js中只需要幾行代碼就搞定，看起來也更優雅一些。
二、還有一點也是思想不容易轉過彎的一點，就是我在學習前端時，接觸的思想都是需要我們將HTML CSS JavaScript 3者分開，方便維護。但是在學習了Vue.js接觸了單文件組件之后，世界又變了，又讓我們將同一個組件的HTML CSS JavaScript放到一個文件中，這樣又便于維護和復用，這一臉的懵那啥。
說起來組件的思想到不難理解，其實不管之前的分開文件還是現在的合在一個文件里，都是模塊化的思想，只不過應對的時代不同。
早期的時代web還只是web，頁面也并不復雜，所以提倡的時HTML CSS JavaScript分離，這樣出問題可以很快定位。但是現在的web變成了web應用，它不在只是網頁而變成了網頁應用，上升到應用這以層級，代碼量也是漲了很多倍，如果在沿用之前的思想，那動輒一個文件上萬行，別說解決bug就是找到bug都困難。但是如果切換到單文件組件這個思想時，就容易了。單文件組件思想是指將web中的獨立的頁面結構部分或者是功能部分抽離出來做一個最小的組件，然后將一地組件像搭積木一樣拼接起來形成一個web應用，這樣的做的好處不言而喻：
1、組件與組件之前關聯不大，可以最大限度避免組件之前的侵入。
2、最小功能組件，單一的組件文件并不大，如果有問題可以很快找到，并且別人理解起來也容易。
3、因為是組件與組件搭建的應用，所以發現問題可以很快定位問題。
4、組件也可以復用，提高代碼的可利用度，提升工作效率。
當然有優點就有缺點：
1、組件與組件之間做到很好的分離，避免侵入的同時也阻止了它們之間的通信。
2、對于項目初期組件的合理劃分也有一定要求，如果劃分的不好可能還不如之前的方案。
三、最后還有一點，就是數據與視圖層的分離。
在之前我們的html和數據是摻和到一起的。現在是將數據從view中抽離出來，經過運算再渲染到視圖層。我覺得這也是為什么Vue.js能幫我們省掉了操作DOM的代碼，只要我們將數據和view綁定正確，之后數據有什么處理都不用管view層，只需要在js中處理數據就好，Vue.js會幫你將結果渲染到view層。這是Vue.js帶給我們的便利。
最后總結一下：我用自己的話總結Vue.js，Vue.js是一個擁有數據與視圖分離、單文件組件思想和雙向數據綁定功能的前端框架。

最近一直在學習Vue.js，看過一遍官方文檔之后以為自己會了，但是隔了1天之后再來看，又覺的好陌生，仿佛之前從來沒接觸過，感覺自己的記憶力這么差。
想通過記筆記的形式記住這些東西也不是很成功，是不是自己太笨總記不住知識點，總不能每隔幾天我就過一遍官方文檔吧，這樣學習效率太低了。
之前聽人說，你讀完了一本書，并不意味著你真的能懂了，檢驗自己是否學會的好辦法就是用自己的話將內容轉述出來，這樣才能讓新的知識在腦子里走一圈，和已有的知識縫合在一起。所以我就想將Vue.js中自己選到的知識點轉述出來，變成文字，希望這樣有助于將這些知識牢牢的縫合到自己的知識體系中。這是第一篇的內容，之后還會有學習的體會。
最后，這篇文章只是個人的學習筆記，水平有限，如有問題，請聯系我。謝謝

GPU云服務器云服務器 Vue.js vue.js 屬性 vue.js自學 cdn vue.js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88295.html

vue.js初相識

摘要：是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，采用自底向上增量開發的設計。的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，完全有能力驅動采用單文件組件和生態系統支持的庫開發的復雜單頁應用。 vue.js ue.js 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不...

Jiavan 2019-08-20 19:02 評論0 收藏0
Vue上手初體驗

摘要：已經建立了和數據之間的連接，此時任何對的改動，都會觸發的更新。是一個雙向綁定，意味著當在當前上所對應的數據發生改變時，更新的值當用戶在中修改或輸入內容的時候，同步上對應的數據。 Vue.js vue.js不是一個框架，他只是一個提供MVVM風格的雙向綁定的庫，專注于UI層面。在 Vue.js 的定義中，View 就是用戶實際看到的 DOM 元素，而 Model 就是原生的JavaSc...

Eirunye 2019-08-21 11:19 評論0 收藏0
vue組件初學習（一）---初學者文檔

摘要：在有時候，組建也可以是原生的元素。簡單的說，就是組件是有結構的有樣式的，有交互效果，有行為，信號量可以存數據。組件可以通過屬性開設置。一、什么是組件？組件是vue.js最強大的功能之一，它可以擴展HTML元素，封裝可以重用的代碼. 當然，在更高的層面上，組件是自定義元素，vue.js的編譯器為它添加了特殊功能。在有時候，組建也可以是原生的HTML元素。簡單的說，就是組件是有結構...

HmyBmny 2019-08-21 17:37 評論0 收藏0