这是我参与8月更文挑战的第30天，活动详情查看:8月更文挑战

el

第一种写法

我们前几篇文章都是通过 el 使 实例和容器进行绑定的。

 <div id="root">
    <h1>Hello,{{name}}</h1>
  </div>
  <script>
    // 创建vue实例
    new Vue({
      el: '#root',
      //写成对象
      data: {
        name: '孙尚香',
      }
    })

  </script>

第二种写法

我们现在不用 实例中的el了。我们先打印一下vue实例来看一下

  const newVue = new Vue({
      data: { 
          name: '孙尚香',
          } 
       })
  console.log(newVue)

所有红色框中的带 $的属性都是给程序员使用的。不带 $的都是底层使用的。

我们现在要用的东西不在实例身上，而在实例的缔造者身上，也就是它原型对象上的方法。如下图

 newVue.$mount('#root')

$mount 也能指定容器。

data

第一种写法

对象式

data:{
    name:'yyds'
}

第二种写法

函数式

并且这个函数要有返回值。在组件中只能使用函数式的写法。

new Vue({
      el: 'root',
      data: function () {
        return {
          name: '孙尚香',
        }
      }
    })

🤔 这个函数是我们调用的吗？

不是，是Vue的实例调用的。那我们看一下这个函数当前的this指向。

new Vue({
      el: 'root',
      data: function () {
        console.log(this,"this")
        return {
          name: '孙尚香',
        }
      }
    })

可以看到当前的this指向是Vue的实例

🤔 我们把普通函数写法换成箭头函数

 new Vue({
      el: 'root',
      data :()=> {
        console.log(this,"this")
        return {
          name: '孙尚香',
        }
      }
    })

可以发现当前的this指向变成了 window。因为箭头函数没有自己的this，它会找到它外层的this。

我们不能使用箭头函数

最后

1. el的两种写法：

• new Vue 时配置el属性
  

• 先创建vue实例，随后通过vm.$mount('#root')绑定el的值
  

2. data的两种写法

• 对象式
  

• 函数式  组件写法必须使用这个，否则报错
  

3. 一个重要的原则

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