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>

Last modification:June 5, 2020
如果觉得我的文章对你有用,请随意赞赏