vue.js安裝

官網
html


Vue.js(讀音 /vju/,相似於 view) 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,它不只易於上手,還便於與第三方庫或既有項目整合。另外一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也徹底可以爲複雜的單頁應用程序提供驅動。vue


vue中兩個核心點node

響應的數據綁定:
webpack

    當數據發生改變->自動更新界面
git

    利用Object.definedProperty中的setter/getter代理數據,監控數據的操做github

組合的視圖組件:web

    ui頁面映射爲組件樹
vue-cli

    劃分組件可維護,可重用,可測試
npm


虛擬DOM:瀏覽器

1.運行js的速度是很快的,但大量的操做DOM就會很慢。市場在更新數據後從新渲染頁面,這樣照成在沒有改變數據的地方也從新渲染DOM節點,形成很大程度上的資源浪費。

2.利用在內存中生成與真實DOM與之對應的數據結構,這個在內存中生成的結構均稱之爲虛擬DOM。

3.當數據發生改變是,可以智能計算出從新渲染組件的最小代價並應用到DOM操做上。


MVVM模式:

M:Model數據結構

V:View視圖模板

vm:view-Model視圖模型



1)安裝


直接安裝vue,從官方下載vue.js。開發使用開發版本,項目上線切換生成版本

wKioL1kCpRvwD0I5AABMQx1Opxs706.png


引入vue.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js"></script>
    </head>
    <!-- 模板 -->
    <div id="demo">
        {{ message }}
    </div>
    <script>
        // 數據
        let data = {
            message:"Hellow,Vue!"
        }
        // Vm實例
        var vm = new Vue({
            el:"#demo", // 掛載元素:html的掛載點
            data:data
        });
    </script>
    <body>
    </body>
</html>

本地測試:

wKioL1kCvA6hZpuCAAAnXflRE1E025.png


nmp方式安裝vue:

全局安裝 vue-cli:

# npm install --global vue-cli


wKioL1kC2juBfzcqAACf-ve7JsI637.png


安裝好之後進入nodejs的模塊目錄下把vue全名添加到全局:

找到vue執行文件所在位置:

wKiom1kC2jvCYZvHAAAXdi2DfcA711.png


添加全局(路徑根據實際狀況):

wKioL1kC2jvDe2YVAAAthT2-qw0993.png


建立一個基於 webpack 模板的新項目:

# vue init webpack my-project

wKioL1kC3MHB3dl1AABwdYH90R0879.png


安裝依賴,走你(安裝速度至關慢,能夠嘗試換成阿里的cnpm提速):

# cd my-project
# npm install
# npm run dev





vue響應式數據綁定,數據發生改變,界面發生改變:

相似響應式佈局,瀏覽器尺寸大小發生改變,界面發生改變。

wKiom1kC4cfy6e9bAAB_C7_jx98974.png


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js"></script>
    </head>
    <!-- 模板 -->
    <div id="demo">
        <input type="text" v-model="message" />
        <p>`message`</p>
    </div>
    <script>
        // 數據
        let data = {
            message:"Hellow,Vue!"
        }
        // Vm實例
        var vm = new Vue({
            el:"#demo", // 掛載元素:html的掛載點
            data:data
        });
    </script>
    <body>
    </body>
</html>

指令會經過輸入框的特色,會把vm中的值放進value裏面,同時監聽value的變化,當value發送改變,vm會通知頁面從新渲染:

wKioL1kFhVDzxogGAAAR1-bjX2Q386.jpg

相關文章
相關標籤/搜索