VUE_01 el, data

VUE

1. 第一个VUE程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 基础 Demo01</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(any) {
            var app = new Vue({
                // 挂载点不能是body或者HTML标签
                el: "#app",
                data:{
                    message: "Hello a杀害就是"
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>

问题:

  • Vue 实例的作用范围:
    • Vue 会管理el选项命中的元素及其内部的后代元素
  • 选择器:
    • 建议使用ID选择器, 可以使用其他选择器
  • 是否可以设置其他的DOM元素:
    • 可以使用其他双标签, 不能使用html 和 body

2. Vue data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Data</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(any) {
            var app = new Vue({
                // 挂载点不能是body或者HTML标签
                el: "#app",
                data:{
                    message: "Hello a杀害就是",
                    school: {
                        name: "结尾小学",
                        mobile: "123456789"
                    },
                    campus: [
                        "二狗",
                        "三花",
                        "四象"
                    ]
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h2>{{ school.name }}  {{ school.mobile }}</h2>
        <ul>
            <li>{{campus[0]}}</li>
        </ul>
    </div>
</body>
</html>

VUE_data:

  • VUE 中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时, 遵守JS的语法即可
posted @ 2021-01-17 15:35  道友请留步W  阅读(48)  评论(0)  编辑  收藏  举报