el的两种写法

第一种写法

之前的文中学到过这种写法
直接在Vue实例里写上el:

new Vue({
    el:"#root", //第一种写法
        data:{
            name:'test'
        }
      })

第二种写法

第二种写法，首先我们随便创建一个v来接收Vue实例
然后再用v.$mount('#root')指定容器

const v = new Vue({
        data:{
            name:'test'
        }
      })

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

第二种更灵活点。例如：设置定时器的时候

data的两种写法

第一种写法：对象式

new Vue({
              el:"#root",
              //data的第一种写法：对象式
              data:{
                name:'test'
              }

    })

第二种写法：函数式

以函数式，返回值的形式

new Vue({
    el:'#root'
    data:function(){
                return{
                  name:'test'
                }
              }
            })

总结

data与el的2种写法：

1. el有2种写法
   (1) new Vue时候配置el属性
   (2) 先创建vue实例，随后再通过vm.$mount('#root') 指定el的值
2. data有2种写法
   (1) 对象式
   (2) 函数式
   如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
3. 一个重要的原则：
   由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了