Vue插值语法

Vue的插值语法：{{}}

 chacao中需要写 js 表达式，且能够自动读取到data中定义的属性

<!-- 创建容器 -->
<div id="root">
  <h1>hello,{{name}}</h1>
  <h1>我的年龄是,{{age}}</h1>
  <h1>1+1的和,{{1+1}}</h1>
  <h1>当前时间：{{ new Date().getTime()}}</h1>
</div>

<script>
  Vue.config.productionTip = false

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

可以看到，页面上展示的 姓名和年龄都是data中定义的属性，但是另外两个插值插槽中的数据都是自定义的，之所以可以这样写，是因为插值语法中，会自动处理js表达

ps：请区分js表达式和js语法

js表达式：

js表达式：一个表达式会生成一个值，可以放在任何一个需要的地方

•  1、const x = a

• 2、const x = a+b 运算表达式

• 3、const x = demo(1) 函数表达式,及时返回的是undefined，那也是属于返回值

• 4、a === b ? '1' : '0'  三元表达式

js语句

•  if(){} 语句

• for(){} 语句