一、`VS Code`代码片段配置技巧

配置方式：打开VS Code----->左下角点击“设置”-------->配置用户代码片段-------->按照给定的模板配置就行。

配置之后，在script标签中输入v1，就可以生成以下代码：

二、`Vue`实例和容器之间对应关系

2.1 前言

如果Vue实例和容器之间没有进行关联。

Vue的模板是没有人进行解析的，当然也不报错，因为Vue还没有工作。

<body>
<div id="root">
  <h1>{{name}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
  const vm = new Vue({
    // el:'#root',
    data:{
      name:'张三'
    }
  })
</script>
</body>

展示效果如下：

2.2 注释后代替el的方法

输出Vue实例：

const vm = new Vue({
  // el:'#root',
  data:{
    name:'张三'
  }
})
console.log(vm);//在控制台上输出Vue实例，注意不是Vue的构造函数new Vue({})

控制台可以查看Vue实例对象：

Vue实例对象身上有很多的属性和方法，但是，有一类属性和方法很特殊，他们都是以$开头。

所有以$开头的东西都是Vue为程序员准备好的，都是给程序员使用的。
不带$的，都不是给程序员使用的，Vue底层自身在自己使用，如果把这些删除，Vue就没办法工作了。

我们需要使用的东西不在Vue实例自身上，而是在这个实例缔造者的原型对象上。注意，是有实例，还有实例的缔造者。实例缔造者就是实例的原型对象上的方法和属性，这些方法和属性也是可以看到实例对象本身的东西的。

指定容器的另外一种方式：比较灵活，可以回头再指定为哪个容器服务

(1)可以直接写

vm.$mount('#root')

(2)可以写一个定时器，让等1s钟，再执行这句话

Vue实例准备好了，容器也准备好了,数据也维护好了，等了一秒钟，才让Vue实例和容器关联起来，然后模板拿到数据了，然后Vue实例里面的数据就被解析了，解析完的结构就放到页面上去了。

setTimeout(()=>{
  vm.$mount('#root')
},1000)

解释：为什么叫mount

把容器里面所写的模板交给Vue实例进行解析，解析完成后，把解析完成的内容重新放到/挂载页面的指定位置身上。mount就是有挂载的意思。

三、`data`的两种写法

（1）data的第一种写法，对象式

const vm = new Vue({
  el:'#root',
  data:{
    name:'张三'
  }
})

（2）data的第二种写法，函数式

以后学习到组件时，必须使用麻烦的函数式，不能使用简单的对象式。

以后再使用对象式，就不行了，会报错。

const vm = new Vue({
  el:'#root',
  data:function(){
  // data函数必须要返回一个对象,这个对象里面的数据就是我们所需要的
    return{
      name:'张三'//返回值才是真正想要的对象
    }
  },
  // data(){}//对象里面写方法，删掉function和冒号
})

data属性的值是一个函数function(){return{name:'张三'}}中，该函数不是自己调用的，是Vue帮助我们调用的，我们查看该函数里面的this。

const vm = new Vue({
  el:'#root',
  data:function(){
    console.log('此处的this就是Vue实例对象',this)
    //Vue {_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
  }
})

注意：如果不是写成普通函数的形式，写成箭头函数的形式。

箭头函数没有自己的this，就往外找到全局的window。

在写Vue实例的时候，data不能写成箭头函数的形式，必须写为一个普通函数。

现在这个this是window不影响，但是以后就会很严重。

const vm = new Vue({
  el:'#root',
  //data写成箭头函数
  data:()=>{
    console.log('此处的this就是全局的window',this)
    //Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  }
})

四、总结

data和el的两种写法

（1）el有两种写法

第一种写法：new Vue时候配置el属性

第二种写法：先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

（2）data有两种写法

第一种写法：对象式

第二种写法：函数式

如何选择：目前哪种写法都可以，以后总结到组件时，data必须使用函数式，否则会报错。

（3）一个重要原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

由Vue管理的函数举例：data(){}，即Vue管理的函数，还有很多。

只要是Vue管理的函数，一定要遵循这个原则。

以后会总结很多很多由Vue所管理的函数。

【零基础入门Vue0009】_el和data的两种写法

一、VS Code代码片段配置技巧

二、Vue实例和容器之间对应关系