Vue核心之：Vue的基本認識和Vue的基本使用

時間 2020-09-14

標籤 vue 核心基本認識使用简体版

原文原文鏈接

1.Vue的基本認識javascript

1.1 Vue的基本特色html

1）遵循 MVVM 模式。前端

2）編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發。vue

3）它自己只關注 UI, 能夠輕鬆引入 vue 插件或其它第三庫開發項目。java

1.2 與其它前端 JS 框架的關聯react

1）借鑑 angular 的模板和數據綁定技術

2）借鑑 react 的組件化和虛擬 DOM 技術

1.3 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 端)

2. Vue 的基本使用

2.1 理解 Vue 的 MVVMios

1）MVVM 模式主要是分爲3個部分，M 是 Model，V 是 View，VM 是 Vue 的對象。ajax

2）Model 經過 VM 中的 DOM Listeners 來監聽 View 中的 DOM 元素。vue-router

3）View 經過 VM 中的 Data Bindings 來綁定 Model 中的模型對象。vuex

2.1 簡單示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入門示例</title>
</head>

<body>
    <!--
        1.引入Vue.js
        2.建立Vue對象
            el：指定根element（選擇器）
            data：初始化數據（頁面能夠訪問）
        3.雙向數據綁定：v-model
        4.顯示數據：{{}}
        5.理解vue的 MVVM實現
    -->
    <div id="app">  <!--這一部分是 MVVM 中的 V，即View-->
        <input type="text" v-model="username"/><!-- v-model:雙向綁定 -->
        <p>Hello {{username}}</p><!--大括號表達式，表示輸出-->
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({/*整個 Vue 對象是 MVVM 中的 VM，一般咱們建立的 vue 對象，都命名爲 vm*/
        //配置選項 option
        el:"#app",//element:指定用 vue 來管理頁面中的哪一個標籤區域
        data:{/*這一部分是 MVVM 中的 M，即 Model*/
            username:"World",
        }
    })
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。