04_01 el和data的两种写法_el data-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46498227/article/details/119428774

本文详细介绍了Vue.js中data和el的两种常见写法。对于el，可以分别在创建Vue实例时直接配置或者后期通过$mount方法指定。data方面，可以采用对象式直接定义数据，或者使用函数返回数据。尽管目前两种写法均可，但在涉及组件时，data必须用函数形式。文中强调了一个重要原则，即避免使用箭头函数以确保this指向Vue实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>el和data的两种写法</title>
        <script src="../js/vue.js"></script>
    </head>

     <body>
         <div id="root">
            <h1>hello,{{name}}</h1>
         </div>

         <script>
            //  //el的两种写法
            //  const v = new Vue({
            //      //第一种写法
            //      //el:'#root',
            //      data:{
            //         name:"nihao"
            //      }
            //  })
            //  //第二种写法
            //  console.log(v);
            //  setTimeout(()=>{
            //     v.$mount('#root');
            //  },1000);

            //data的两种写法
            new Vue({
                el:'#root',
                //data第一种写法：对象式
                // data:{
                //     name:'尚硅谷'
                // }
                //data的第二种写法：函数式
                // data:function(){
                //     console.log('@@@',this);//此处的this是Vue实例对象
                //     return{
                //         name:'尚硅谷'
                //     }
                // } 
                data(){
                    console.log('@@@',this);//此处的this是Vue实例对象
                    return{
                        name:'尚硅谷'
                    }
                }
             
            })
         </script>
     </body>
</html>

总结：
data与el的两种写法：
1，el有两种写法：
（1）new Vue时配置el属性：el:’#root’
（2）先创建Vue实例vm，随后通过**vm.$mount(’#root’)**指定el的值
2，data有两种写法：
（1）对象式：data:{name:‘尚硅谷’}
（2）函数式：data:function(){ return {name:‘尚硅谷’} }
= =>简写：data(){ return {name:‘尚硅谷’} }
**如何选择：**目前两种写法都可以，以后学习到组件时，data必须使用函数形式
**一个重要原则：**一定不要写箭头函数，如果是剪头函数，this就不再是Vue实例，就是Window