• Vue之el和data基本使用


    1. el:挂载点

    在这里插入图片描述
    案例:分别用类、标签选择器来绑定挂载点

    <body>
        <div id="app" class="app">
            {{message}}<br>
            <span>{{message}}</span><br>
            <span>{{ message }}</span>
        </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            // el: "#app",
            // el: ".app",
            el: "div",
            data: {
                message: "兮动人"
            }
        })
    </script>
    </body>
    

    在这里插入图片描述

    2. data:数据对象

    -
    案例:分别使用对象和数组的形式定义数据对象后取出

    <body>
        <div id="app">
            {{ message }}
            <h2>{{ movie.name }} {{ movie.date }}</h2>
            <ul>
                <li>{{ study[0] }}</li>
                <li>{{ study[1] }}</li>
                <li>{{ study[2] }}</li>
                <li>{{ study[3] }}</li>
            </ul>
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue',
                movie: {
                    name: "进击的巨人 The Final Season",
                    date: 2021
                },
                study: ["前端","后台","运维","安全","测试"]
                }
            })
        </script>
    </body>
    

    在这里插入图片描述

    本文来自博客园,作者:兮动人,转载请注明原文链接:https://www.cnblogs.com/xdr630/p/15254772.html

  • 相关阅读:
    docker使用
    window版docker安装及配置
    mysql命令
    xshell
    git 命令
    分页器原理
    PCL-Kinfu编译手册
    cmake-add_definitions
    cmake-include_directories
    cmake-source_group
  • 原文地址:https://www.cnblogs.com/xdr630/p/15254772.html
Copyright © 2020-2023  润新知