el与data的两种写法

suaxi

2022-05-26 / 0 评论 / 56 阅读 / 正在检测是否收录...

05/26

el的两种写法：

new Vue时配置el属性
先创建Vue实例，之后通过vm.$mount('#root')指定el的值

data的两种写法：

对象式
函数式（使用组件时，必须使用函数式）

注：由Vue管理的函数，不能写箭头函数（作用域）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>你好，{{name}}</h2>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    //el的两种写法
    /* const vm = new Vue({
        //指定当前实例为哪个容器服务
        //写法一
        // el: '#root',
        data: {
            name: '孙笑川'
        }
    })

    //写法二
    vm.$mount('#root') */

    new Vue({
        el: '#root',
        //写法一：对象式
        // data: {
        //     name: '孙笑川'
        // }

        //写法二：函数式
        data: function () {
            console.log(this) //此处的this是Vue实例
            return{
                name: '孙笑川'
            }
        }
    })
</script>
</body>
</html>

el与data的两种写法

评论 (0)