Vue技術棧的相關知識點

這篇文章主要為大家展示了Vue技術棧的相關知識點，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“Vue技術棧的相關知識點”這篇文章吧。

成都創(chuàng)新互聯(lián)專注于網站建設|成都網站維護公司|優(yōu)化|托管以及網絡推廣，積累了大量的網站設計與制作經驗，為許多企業(yè)提供了網站定制設計服務，案例作品覆蓋報廢汽車回收等行業(yè)。能根據企業(yè)所處的行業(yè)與銷售的產品，結合品牌形象的塑造，量身開發(fā)品質網站。

vue筆記一：Vue技術棧

1、node.js

如果想要javascript代碼能夠在服務器端運行就必須提供一個Javascript的運行環(huán)境(runtime environment)，這就是node.js。

node.js是對Chrome V8引擎進行了封裝，是一個能讓JavaScript運行在服務端的開發(fā)平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。

2、 npm

node.js的包管理工具，用于統(tǒng)一管理我們前端項目中需要用到的包、插件、工具、命令等，便于開發(fā)和維護。
npm會根據package.json配置文件中的插件名稱和對應的版本號的依賴配置，通過npm install命令來下載插件，下載后自動放在node_modules目錄下面。

3、ES6

Javascript的新版本，ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS代碼，同時利用其提供的強大功能來快速實現(xiàn)JS邏輯。

4、Babel

一款將ES6代碼轉化為瀏覽器兼容的ES5代碼的插件。

5、項目構建工具vue-cli

腳手架工具，搭建開發(fā)所需要的環(huán)境和自動生成Vue項目的生成目錄架構。

6、路由vue-router

創(chuàng)建單?應?，我們的單?應?只做路由切換，組件拼湊成的 ??映射成路由 路由是我們單?應?的核?插件

7、狀態(tài)管理vuex

狀態(tài)管理庫，可理解為全局數(shù)據集中地推薦?項?盡量別?vuex，會顯得有點繁瑣，bus總線機制完全可以處理了。用于統(tǒng)一管理我們項目中各種數(shù)據的交互和重用，存儲我們需要用到數(shù)據對象。

8、http請求?具axios

?個經過封裝的ajax,可以根據??的項?情況再進?封裝 axios是經過了ES6的promise封裝的

9、文件打包工具webpack

可以將我們的前端項目文件統(tǒng)一打包壓縮至js中，并且可以通過vue-loader等加載器實現(xiàn)語法轉化與加載。
將TypeScript、SCSS、LESS、stylus(CSS預處理器)等不能直接被瀏覽器解析的技術，翻譯成瀏覽器可以直接解析的代碼。

10、Vue.js

它是一個輕量級的MVVM框架。

響應式：頁面響應數(shù)據變化

編程范式：聲明式編程（js是命令式編程）

數(shù)據雙向綁定(當修改視圖時數(shù)據也會賦值給model，當更改model的時候也會反應到視圖上)。

Vue實例

var vm = new Vue({
  // 選項
  el:"#app",  //掛載要管理的元素，【string（CSS 選擇器）| Element（HTMLElement 實例）】只在用 new 創(chuàng)建實例時生效。
  data:{     //定義數(shù)據，【Object | Function】組件的定義只接受 function
  	message:'hello world',
  },
  methods:{  //方法【{ [key: string]: Function }】，不應該使用箭頭函數(shù)來定義 method 函數(shù) 
   plus: function () {
      this.a++
    }
  }})

雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發(fā)。因此在文檔中經常會使用 vm (ViewModel 的縮寫) 這個變量名表示 Vue 實例。

當一個 Vue 實例被創(chuàng)建時，它將 data 對象中的所有的 property 加入到 Vue 的響應式系統(tǒng)中。當這些 property 的值發(fā)生改變時，視圖將會產生“響應”，即匹配更新為新的值。

值得注意的是只有當實例被創(chuàng)建時就已經存在于 data 中的 property 才是響應式的。也就是說如果你添加一個新的 property，比如：vm.b = 'hi' ，那么對 b 的改動將不會觸發(fā)任何視圖的更新。如果你知道你會在晚些時候需要一個 property，但是一開始它為空或不存在，那么你僅需要設置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null}

這里唯一的例外是使用 Object.freeze()，這會阻止修改現(xiàn)有的 property，也意味著響應系統(tǒng)無法再追蹤變化。Object.freeze()方法可以凍結一個對象。一個被凍結的對象再也不能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象后該對象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對象。

在實例掛載之后，el ,data元素可以用 vm.$el ,vm.$data訪問。

vue生命周期以及不同生命周期下的應用

生命周期：一個對象從創(chuàng)建到消亡的過程。

生命周期鉤子:created、mounted、updated、destroyed

以上是vue官網上的生命周期的方法，大致劃分一下分為創(chuàng)建前/后，掛載前/后，更新前/后，銷毀前/后這四個階段。各個階段的狀態(tài)總結如下：

beforeCreate：在beforeCreate生命周期執(zhí)行時，data和methods中的數(shù)據還未初始化，所以此時不能使用data中的數(shù)據和methods中的方法

created：data 和 methods初始化完畢，此時可以使用methods 中的方法和data 中的數(shù)據

beforeMount：template模版已經編譯好，但還未掛載到頁面，此時頁面還是上一個狀態(tài)

mounted：此時Vue實例初始化完成了，DOM掛載完畢，可以直接操作dom或者使用第三發(fā)dom庫

beforeUpdate： 此時data已更新，但還未同步頁面

updated：data和頁面都已經更新完成

beforeDestory：Vue實例進入銷毀階段，但所有的 data 和 methods ，指令， 過濾器等都處于可用狀態(tài)

destroyed： 此時組件已經被銷毀，data，methods等都不可用

根據以上介紹，頁面第一次加載時會執(zhí)行 beforeCreate， created， beforeMount， mounted這四個生命周期，所以我們一般在created階段處理http請求獲取數(shù)據或者對data做一定的處理， 我們會在mounted階段操作dom，比如使用jquery，或這其他第三方dom庫。其次，根據以上不同周期下數(shù)據和頁面狀態(tài)的不同，我們還可以做其他更多操作，所以說每個生命周期的發(fā)展狀態(tài)非常重要，一定要理解，這樣才能對vue有更多的控制權。

以上就是關于“Vue技術棧的相關知識點”的內容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學習新知識，若想了解更多相關知識內容，請多多關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：Vue技術棧的相關知識點
URL網址：http://muchs.cn/article10/jepcgo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、網站收錄、微信公眾號、響應式網站、Google、外貿網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)