Vue框架的基本使用

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

反饋

Vue 的使用步驟

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

代碼示例

<!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ù)（值是一個(gè)對(duì)象）
            data: {
                msg: 'Hello Vue',
            }
        });
    </script>
</body>

</html>

實(shí)例參數(shù)分析

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

插值表達(dá)式的用法

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

Vue代碼運(yùn)行原理分析

概述編譯過(guò)程概念（Vue 語(yǔ)法→原生 js 語(yǔ)法)

Vue.js

0 人點(diǎn)贊