一、el的两种写法

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

<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue启动时，生成生产提示
    
    //创建Vue实例
    // el的两种写法
   const v =  new Vue( {
        el:'#root', // 第一种写法
        data:{  
            name:'尚硅谷'
        }
     } )
   console.log(v)
   v.$mount('#root')  //第二种写法
</script>

二、data的两种写法

  • data：以后学习组件时，data必须使用函数式，否则会报错。
  • 重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了。
  • 思考：什么是箭头函数？
<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue启动时，生成生产提示
    
    //创建Vue实例
    // el的两种写法
    new Vue( {
        el:'#root', 
        //第一种写法：对象式
        /*
        data:{  
            name:'尚硅谷'
        }
        */
        
        //第二种写法：函数式，不能为箭头函数，且必须有返回值。
        //一般把：data:function()，简写为：data()
        data(){
            console.log('@@@',this) //此处this为Vue实例对象
            return{
                name:'尚硅谷'
            }
        }
     } )

</script>