04_el与data的两种写法

最新推荐文章于 2025-05-11 08:16:53 发布

原创最新推荐文章于 2025-05-11 08:16:53 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用el属性指定元素挂载点，并对比了两种数据定义方式：直接在构造函数中和使用data选项。通过实例演示，帮助开发者理解和实践Vue的基本配置。

04_el与data的两种写法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>


<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>

</body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //el的两种写法
        // const v=new Vue({
        //     // el: '#root', //第一种写法
        //     data: {
        //         name: 'vue'            
        //     }

        // });
        // v.$mount('#root')  //第二种写法

        //data的两种写法    
           const v=new Vue({
            el: '#root', 
            //第一种写法
            // data: {
            //     name: 'vue'            
            // }
            //第二种写法
            data() {
                return {
                    name: 'vue',
                };
            }
         });
    </script>


</html>