Vue框架学习笔记——创建Vue实例、实例与容器对应关系

---

创建Vue实例

HTML文件中写下述代码，可以消除生产提示，创建Vue实例

  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#box'
    })
  </script>

Vue中大括号内的是配置对象，也可以写成js表达式（表达式会产生一个值，例如函数，因为函数具有返回值），如Date.now()

容器和Vue实例绑定

  <div class="box" id="box">
    <h1>
      hello,world
    </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#box'
    })
  </script>

可以通过配置el加上css选择器的字符串（通常为选择器字符串，也可以写为el:document.getElementById('box')，使用css选择器字符串是推荐的，而且建议使用id选择器），将div的容器和Vue实例建立关联。

容器中标签体的数据和实例中的数据动态绑定

将其改为：

  <div class="box" id="box">
    <h1>
      hello,world{{name}}
    </h1>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#box',
      data: {
        name: "这里是name的值"
      }
    })
  </script>

现在将data写成对象（之后会写成函数）。这样即可使用制定语法建立数据关联，改变data中name的，即可将Vue实例链接的容器中的name的数值。
data中可以使用逗号分隔。
同名的数据以后声明的为主，也就是会覆盖，可以写为层级结构

root容器中的代码被称为Vue模版，模版经过Vue实例解析变为正常的html代码

容器和实例一一对应

如果使用类选择器的el来选择容器，一个实例无法解析多个容器，选择排在代码前方的容器

多个实例选择同一容器，但一个容器无法连接多个实例，容器对应的实例先到先得

---

可以在开发者工具这里查看创建的Vue实例，Root就是创建的那个Vue实例

---

至此，结束。

如果你觉得这篇文章写的不错，多多点赞~收藏吧！