01初始Vue

<template>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>hello, {{ name.toUpperCase() }} ------- {{Date.now()}}  ---{{1+1}} </h1>
      <h1>我的年龄是</h1>
      <button>点我得到年龄</button>
    </div>
  </template>
  <script>
  // 创建Vue实例
  // new Vue({
  //     // el:document.getElementById('root') 亲自找到这个元素配置到el里面
  //     el:'#root', // el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
  //     data: { // data中用于储存数据， 数据供el所指定的容器去使用 值暂时先写成一个对象。
  //       name: ' qinling'
  
  //     }
  //   })
  export default {
    data() { 
      return { 
        name: 'qinling'
      }
    }
    
  }
  </script>
  <!-- 
    初始Vue：
    1.想让Vue工作，就必须创建一个Vue实例， 且要传入一个配置对象
    2.root容器里的代码依然复合html规范， 只不过混入了一些特殊的Vue语法，
    3.root容器里的代码被称为{Vue模板}
    4.Vue实例和容器是一一对应的；
    5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
    6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
    7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。
  
    注意区分：js表达式 和 js代码（语句）
    1.表达式： 一个表达式会产生成一个值， 可以放在任何一个需要值得地方
            （1）.a
            （2）.a+b
            （3）.demo（1）
            （4）.x === y ? 'a' : 'b'
    2.js代码（语句）
            （1）. if(){}
            （2）. for(){}
   -->