zoukankan      html  css  js  c++  java
  • 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的语法即可
  • 相关阅读:
    锋利的BFC
    inline和inline-block的间隙问题
    margin和padding的四种写法
    js中Math.round、parseInt、Math.floor和Math.ceil小数取整小结
    使用vscode自动编译less
    redux获取store中的数据
    react显示隐藏动画
    react使用路由
    react中使用fetchjsonp获取数据
    vue兼容到ie9
  • 原文地址:https://www.cnblogs.com/MasonHu/p/14289126.html
Copyright © 2011-2022 走看看