Vue学习笔记7--el和data的两种写法

总结：data与el的两种写法

el两种写法
- new Vue的时候配置el属性。
- 先创建Vue实例，再通过v.$mount('#root')函数指定el的值。
data两种写法
- 对象式
- 函数式
- 注：对于为使用到组件时，两种方式都可以，但在应用到组件后，data必须使用函数式，否则会报错。
一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

方式一：el data

// 方式一：el data   
    // const one = new Vue({
    //     el: '#root',
    //     data: {
    //         name: 'vue',
    //         mydata:
    //         {
    //             oneAtt: '我是一个嵌套对象的属性哦',
    //             towAtt: '我是嵌套对象的第二个属性哦'
    //         }
    //     },
    // })

方式二：使用v.$mount('#root') 代替 el data

// 方式二：使用v.$mount('#root') 代替 el data   
    const one = new Vue({
        // el: '#root',
        data: {
            name: 'vue',
            mydata:
            {
                oneAtt: '我是一个嵌套对象的属性哦',
                towAtt: '我是嵌套对象的第二个属性哦'
            }
        },
    })
    one.$mount('#root')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue el data</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1> {{mydata.oneAtt}}</h1>
        <h1> {{mydata.towAtt}}</h1>
        <hr />
    </div>
</body>

</html>

<script type="text/javascript">
    Vue.config.productionTip = false
    // 方式一：el data   
    // const one = new Vue({
    //     el: '#root',
    //     data: {
    //         name: 'vue',
    //         mydata:
    //         {
    //             oneAtt: '我是一个嵌套对象的属性哦',
    //             towAtt: '我是嵌套对象的第二个属性哦'
    //         }
    //     },
    // })

    // 方式二：使用v.$mount('#root') 代替 el data   
    const one = new Vue({
        // el: '#root',
        data: {
            name: 'vue',
            mydata:
            {
                oneAtt: '我是一个嵌套对象的属性哦',
                towAtt: '我是嵌套对象的第二个属性哦'
            }
        },
    })
    one.$mount('#root')

</script>

示例二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue el data</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1> {{mydata.oneAtt}}</h1>
        <h1> {{mydata.towAtt}}</h1>
        <hr />
    </div>
</body>

</html>

<script type="text/javascript">
    Vue.config.productionTip = false
    // 方式一：el data   
    // const one = new Vue({
    //     el: '#root',
    //     data: {
    //         name: 'vue',
    //         mydata:
    //         {
    //             oneAtt: '我是一个嵌套对象的属性哦',
    //             towAtt: '我是嵌套对象的第二个属性哦'
    //         }
    //     },
    // })

    // 方式二：使用v.$mount('#root') 代替 el data   
    // const one = new Vue({
    //     // el: '#root',
    //     data: {
    //         name: 'vue',
    //         mydata:
    //         {
    //             oneAtt: '我是一个嵌套对象的属性哦',
    //             towAtt: '我是嵌套对象的第二个属性哦'
    //         }
    //     },
    // })
    // one.$mount('#root')

    // 方式三：data的第二种书写方式，函数式
    new Vue({
        el: '#root',
        // 对象式
        // data: {
        //     name: 'vue',
        //     mydata:
        //     {
        //         oneAtt: '我是一个嵌套对象的属性哦',
        //         towAtt: '我是嵌套对象的第二个属性哦'
        //     }
        // },

        // 函数式
        // data: function () {
        data() {
            return {
                name: 'vue',
                mydata:
                {
                    oneAtt: '我是一个嵌套对象的属性哦',
                    towAtt: '我是嵌套对象的第二个属性哦'
                }
            }
        },
    })
    one.$mount('#root')

</script>

posted on 2024-02-22 11:51 sunwugang 阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告