首頁 >web前端 >js教程 >三分鐘了解Vue框架

三分鐘了解Vue框架

烟雨青岚
烟雨青岚轉載
2020-06-23 12:01:312580瀏覽

三分鐘了解Vue框架

三分鐘了解Vue框架

一.Vue基本介紹

1.vue是漸進式的JavaScript框架

2.作者:尤雨溪(一位華裔前Google工程師)

3.作用:動態建立使用者介面

二:Vue的特性

1.遵循MVVM模式(m->model(資料物件)   v->view(檢視)  vm->view model)

2.編碼簡潔,體積小,運作效率高,適合行動裝置/PC端

3.它本身只專注於UI,可以輕鬆引入Vue外掛程式或其他第三方函式庫開發專案

Vue擴充功能外掛:

  • vue-cli:Vue鷹架

  • ##vue-resource(axios ):ajax請求

  • vue-router:路由

  • #vuex:狀態管理

  • vue -lazyload:圖片懶載入

  • vue-scroller:頁面滑動相關

  • mint-ui:基於Vue的UI元件庫(行動端)

  • 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:&#39;vue&#39;
        }
    })

感謝大家的閱讀,希望大家收益多多。

本文轉自:https://blog.csdn.net/weixin_44022886/article/details/88868789

推薦教學:《

JS教學

以上是三分鐘了解Vue框架的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除