第一个DEMO
<html>
<head>
<title>
Vue demo
</title>
<script src="vue.js"></script>
</head>
<body>
<div>
{{ msg }}
</div>
<script>
let vm = new Vue({
//必须挂载到一个根标签上
el:"#app",
data: {
msg:"Hello VUE!"
},
});
</script>
</body>
</html>`
文本
使用“Mustache”语法 (双大括号) 输出vm的data数据到页面
V-html指令
innerHTML，vm视图绑定技术
Attribute
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令
使用 JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令的所需
v-bind ----- 》 : v-on----------------->@
v-on指令
指令的事件列表：https://www.runoob.com/jsref/dom-obj-event.html
指令缩写：@
事件名称请参见：https://www.runoob.com/jsref/dom-obj-event.html，所有的事件名需要去除on
事件只能在vm中的methods中定义，事件的响应函数的第一个参数event代表事件对象本身
订阅事件不需要加“（）”
计算属性
1、计算属性本质是一个函数，函数的返回值作为属性值存在
2、操作类似属性，编写类似函数
3、计算属性有数据缓存功能
4、只在相关响应式依赖发生改变时它们才会重新求值，如果计算属性依赖data属性，则在依赖的data属性值发生改变后，计算属性会重新计算
