MENU

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

• January 16, 2020 • Read: 86 • Note,Vue

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>

本站所有未注明转载的文章均为原创,并采用CC BY-NV-SA 4.0 授权协议,转载请注明来源。

Last Modified: June 5, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment