Vue框架的基本使用

猿友 2021-02-10 23:03:02 瀏覽數(shù) (9456)

反饋

Vue 的使用步驟

1.創(chuàng)建一個標簽，用于數(shù)據(jù)的填充
2.引入 Vue.js 庫文件
3.實例化 Vue 對象
4.把 Vue 提供的數(shù)據(jù)填充到標簽里

代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ msg }}</div>
        <div>{{ 1 + 1}}</div>
        <div>{{"===" + msg + "==="}}</div>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app', // 元素的掛載位置（值可以是CSS選擇器或者DOM元素）
            // data 模型數(shù)據(jù)（值是一個對象）
            data: {
                msg: 'Hello Vue',
            }
        });
    </script>
</body>

</html>

實例參數(shù)分析

在 Vue 對象里 el 為元素的掛載位置(值可以是 CSS 選擇器也可以是 DOM 元素) data 為模型數(shù)據(jù)(類型是一個對象)

插值表達式的用法

使用插值表達式{{}}將數(shù)據(jù)填充到 HTML 標簽里
插值表達式還支持 JavaScript 的基本計算操作

Vue代碼運行原理分析

概述編譯過程概念（Vue 語法→原生 js 語法)

Vue.js

0 人點贊