Vue學習-1

預讀:為了滿足目前移動webApp項目的開發需求,MVVM架構誕生,而VUEJS 便是這樣一種js架構,其兩大核心:<code>資料驅動</code>和<code>元件化</code>

為了解決webApp這些體驗和開發上的不足,使用一個MVVM架構VUELS;

(資料驅動視圖)

View --- ViewModel --- Model三部分

頁面DOM viewModel model資料

中間監控兩側的資料,并相對應地通知另一側進行修改;

這就是MVVM架構,屬于MVVM的JS架構還有React.js,Angular.js

Vue更輕量更快

更容易上手

-通過盡可能簡單的 API 實作響應的資料綁定群組合的視圖元件

資料綁定

Vue資料驅動視圖:資料改變視圖自動更新,傳統的做法要手動改變DOM來改變視圖,VUEJS隻需要改變資料,就會自動更改視圖,不用再擔心DOM;

視圖元件化

把整一個網頁的拆分成一個個區塊，每個區塊我們可以看作成一個元件。網頁由多個元件拼接或者嵌套組成;

​

如果你還在用jQuery來頻繁的操作你的DOM更新頁面的話,就可以用vue.js來解放DOM操作;

如果項目中有多個部分是相同的,并可以封裝成一個元件,那就可以使用Vue.js

此外,vue.js的核心使用了ES5的Object.defineProperty特性.IE8以下的版本是不相容的;

為了更好滿足目前移動webapp項目的開發需求，MVVM架構誕生，而Vue.js便是這樣的一種js架構，其兩大核心：資料驅動群組件化。

如果不想安裝到本地,使用CDN方式,引入網上的資源

還可以通過npm在指令行下載下傳

我們通過new Vue( )建立一個執行個體vm，參數是一個json對象，屬性el提供一個在頁面上存在的DOM 元素(id='app')，表明這個執行個體是關聯指定的DOM節點。

在DOM節點上，我們就可以使用雙大括号{{ }}的文法來渲染Vue執行個體對象data中已經存在的屬性值，如上面案例中的name屬性的值“web前端教程”就會被渲染到頁面中，替換{{ name }} 顯示效果為：“web前端教程”

例子:監聽使用者在頁面輸入框輸入的内容，然後将其實時更新在頁面上。

在Vue中我們使用v-model指令就可以輕松實作

元件化就是把頁面中特定的區塊獨立抽出來，并封裝成一個可友善複用的元件。

加入頁面上有三個同樣的圖檔,傳統的辦法,我們需要寫三個同樣布局的HTML布局;

如果我們把每個卡片看作一個可複用的區域的話，那麼它就可以封裝成一個元件。

我們用Vue.component(tagName, options)注冊了一個名字叫card的元件，這樣，在需要複用這個元件的地方，我們隻需要使用就可以了。實際開發中，元件比這個複雜得多，越複雜，封裝後的便利性越高

可能你會說，元件裡面的顯示的内容不可能全都一樣。放心，Vue為元件提供了props屬性來接受傳遞進來的參數,後面會介紹

建立并使用一個Vue執行個體并不難，僅需4步走：

newVue-----&gt;設定資料-----&gt;-------&gt;挂載元素-------&gt;成功渲染

例如:我們有一組數字全是小數,

展示到頁面中

突然，需求改了，我們不能把小數展示出來，需要把小數轉換成整數再顯示

這個時候，我們需要把三個小數經過過濾處理後再展示，不能直接展示。這種情況就需要用到Vue的filters過濾器了

相信大家都注意到了，參數對象除了el和data屬性之外，還多了一個filters屬性，它的值也是一個對象，裡面定義了一個叫toInt( )的方法，傳入了一個value的參數，函數的作用就是把傳入的參數value，簡單地轉成一個整出并return回去。

緊接着:通過管道符|把函數toInt 放在變量後面即可，num1，num2，num3會分别作為參數value傳入toInt( value )方法進行運算，并傳回一個整數

我們有三個數，但是需要展示的是三個數字之和。這種情況，就适合用我們的計算屬性computed。

緊接着 :

需要注意的是，sum的值是依賴data中的資料num1，num2，num3的，一旦它們發生了變化，sum的值也會自動更新。

我們定義一個資料a，當使用者點選按鈕的時候，a的值加1。這種情況，我們可以利用methods來實作。

定義一個plus( )的方法在methods中，下面我們把plus( ) 綁定在按鈕的點選事件上

watch選項是Vue提供的用于檢測指定的資料發生改變的api。

最後一部分watch就是我們新加的代碼，a( ) 表示我們要觀察監聽的就是資料a;

Vue把整個生命周期劃分為建立、挂載、更新、銷毀等階段，每個階段都會給一些“鈎子”

此時的執行個體中的data和el還是undefined,不可用的。

此時，我們能讀取到資料data的值，但是DOM還沒生成，是以屬性el還不存在，輸出$data為一個Object對象，而$el的值為undefined。

此時的$el不再是undefined，而是成功關聯到我們指定的dom節點

，但此時{{ name }}還沒有被成功地渲染成我們data中的資料。

此時列印屬性el，我們看到{{ name }}已經成功渲染成我們data.name的值：“前端課程”。

當修改vue執行個體的data時，vue就會自動幫我們更新渲染視圖，在這個過程中，vue提供了beforeUpdate的鈎子給我們，在檢測到我們要修改資料的時候，更新渲染視圖之前就會觸發鈎子beforeUpdate

在控制台修改一下執行個體的資料name，在更新渲染之前,name還是之前的資料,視圖并未重新渲染更新

此階段為更新渲染視圖之後，此時再讀取視圖上的内容，已經是最新的内容，接着上面的案例，我們添加鈎子updated的代碼

此時name 的值已經被改變了,視圖已經更新;

調用執行個體的destroy( )方法可以銷毀目前的元件，在銷毀前，會觸發beforeDestroy鈎子

成功銷毀之後，會觸發destroyed鈎子，此時該執行個體與其他執行個體的關聯已經被清除，它與視圖之間也被解綁。

此時再在控制台修改資料,視圖不會改變

keep-alive元件被激活的時候調用

keep-alive 元件停用時調用。