Vue 之 Hello Vue

先准备好一个容器

<div id="root">
    <h2>Hello {{name}}</h2>
</div>

创建一个 Vue实例

new Vue({
    el: '#root',
    data: {
        name: 'vue'
    }
})

el：用于指定当前Vue实例为哪个容器服务。这里为id="root"的div服务

data：用于存储数据。这里的name传值给容器中的{{name}}



Hello_vue.html 全代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello_Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!-- 容器 -->
<div id="root">
    <h2>Hello {{name}}</h2>
</div>

<script type="text/javascript">

    // 创建vue实例
    new Vue({
        el: '#root',
        data: {
            name: 'vue'
        }
    })
</script>
</body>
</html>
posted @ 2022-03-29 20:16  春暖花开鸟  阅读(114)  评论(0)  编辑  收藏  举报