概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方中文文档

学习vue我们必须之到它的7个属性
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

Hello Vue

<div id="app">
  {{ message }}
div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js">script>

<script>
  const vm = new Vue({
    el : "#app",
    data :{
      message:"Hello Vue!"}<!--定义Vue对象，el（element）定位元素（id，class...）-->
  })
script>

结果：
数据和 DOM 已经被建立了关联，所有东西都是响应式的打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

v-bind:attribute 指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，vue可用于操作dom

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  span>
div>

（回顾html语法，title的作用是悬停文字显示）

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

Date().toLocaleString()方法是显示当前日期时间

vue v-bind绑定值与字符串拼接两种写法：

• :title="字符串${xx}"
• :title="‘字符串’ + xx"