初识Vue-蒲公英云

初识Vue

上一节搭建了vue的简单项目的开发环境，这一节来说说Vue的基本使用

初识Vue：

想让程序运行，必须要创建一个Vue实例，且传入配置对象（el）
root容器（命名可以更改，class也行）中的代码符合html规范，只是混入了Vue语法
root容器中的代码被称为【Vue模板】

1、创建容器

这是一个容器，通过id区分，里面的al和22分别是姓名和年龄数据，这样看来其实就这样就行了，但是如果数据发生了动态变化，那我们怎么做动态展示呢

<!-- 创建容器 -->
<div id="root">
  <h1>hello,al</h1>
  <h1>我的年龄是,22</h1>
</div>

2、创建Vue实例

通过 new Vue({}) 来创建一个Vue实例，通过el将实例与容器绑定，绑定之后，vue会自动将容器中用到的数据从data中解析，因为可能存在多个数据，所有我们把data暂时写成一个json对象

<script>
  new Vue({
    el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      name: 'al',
      age: '22'
    }
  })
</script>

3、容器中使用Vue实例中的数据

使用插值语法 { {}} ，在 { {}} 中写入js 表达式

<!-- 创建容器 -->
<div id="root">
  <h1>hello,{
   {name}}</h1>
  <h1>我的年龄是,{
   {age}}</h1>
</div>
<script>
  new Vue({
    el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class
    // el: document.getElementById('#root'), // 也可以通过document点出来
    data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象
      name: 'al',
      age: '22'
    }
  })
</script>