vue.js框架的基礎知識

今天就跟大家聊聊有關vue.js框架的基礎知識，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

一.Vue基本介紹

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件 。

Vue.js 自身不是一個全能框架--它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時 ，Vue.js 也能完美地驅動復雜的單頁應用。

二：Vue的特點

1.遵循MVVM模式（m->model(數據對象)   v->view(視圖)  vm->view model）

2.編碼簡潔，體積小，運行效率高，適合移動端/PC端

3.它本身只關注UI，可以輕松引入Vue插件或其他第三方庫開發項目

Vue擴展插件：

1. vue-cli:Vue腳手架

2. vue-resource(axios):ajax請求

3. vue-router:路由

4. vuex:狀態管理

5. vue-lazyload:圖片懶加載

6. vue-scroller:頁面滑動相關

7. mint-ui:基于Vue的UI組件庫（移動端）

8. element-ui:基于Vue的UI組件庫（PC端）

三.Vue編寫“Hello vue”

1.引入vue.js

2.創建vue對象

3.雙向數據綁定

4.顯示數據

代碼展示：

<p id="app">
    //3.雙向數據綁定
    <input type="text" v-model="username">
    //4.顯示數據
    <p>Hello {{msg}}</p>
</p>
//1.引入vue.js
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //2.創建vue對象
    var vm = new Vue({
        el:"#app",
        data:{
            msg:'vue'
        }
    })

看完上述內容，你們對vue.js框架的基礎知識有進一步的了解嗎？如果還想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。