vue篇：el挂载点和data数据对象

乐心湖

发布于 2020-07-31 17:01:39

1.4K00

代码可运行

文章被收录于专栏：MyTechnologyMyTechnology

运行总次数：0

代码可运行

vue篇：el挂载点和data数据对象

el是用来设置vue实例挂载（管理）的元素。 vue实例的作用范围：vue会管理el选项命中的元素及其内部的后代元素可以使用其他的选择器，但是推荐使用id选择器 可以使用除div之外的其他双标签，但是不能使用html和body标签。

vue中用到的数据定义在data中 data可以写复杂类型的数据渲染复杂类型数据时，遵守js的语法即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>el挂载点和data数据对象</title>
    </head>
    <body>
        <div id="app">
            {{message}}
            {{home.name}}
            {{home.tell}}
            <ul>
                <li>{{classmate[0]}}</li>
                <li>{{classmate[1]}}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    message:"你好，乐心湖",
                    home:{
                        name:"广东",
                        tell:138
                    },
                    classmate:["心","湖"]
                }
            })
        </script>
    </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js