1、使用npm下载vue的包，在html页面引入vue.js Vue模板语法有2大类：
- 1.插值语法：
- 功能：用于解析标签体内容。
- 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
- 2.指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
- 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
- 且可以直接读取到data中的所有属性。
- 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
vue的基本指令
<!-- <h1 @click="fn('我爱vue')">{{msg}}</h1> -->
<!-- {{}}里面还可以写表达式 -->
<!-- <h1>{{msg.substring(0,4)}}</h1> -->
<!-- vue的条件判断v-if后面支持变量 也支持直接写布尔值 -->
<!-- 点击 输入你的爱好 如果你输入的是java 页面显示 我爱学习java 输入js 我爱学习js
'' 显示 -->
<!-- <button @click="fn2">点我</button>
<h1 v-if="str1=='java'">我爱学习java</h1>
<h1 v-else-if="str1=='js'">我爱学习javaScript</h1>
<h1 v-else>我什么都不爱学</h1> -->
<!-- 属性想使用动态变量需要加上v-bind v-bind可以简写成: -->
<!-- @click可以直接写js表达式 -->
<!-- class 对象里面的key表示类名 -->
<!-- style 对象里面的key表示属性名 -->
<!-- <h1 :class="{red:flag1,'font-size':flag1}" @click="flag1=!flag1">中国人不骗中国人</h1>
<h1 :style="{color:flag1?'red':'','font-size':flag1?'60px':''}" @click="flag1=!flag1">中国人就骗中国人</h1> -->
<!-- v-for 循环 里面有两项 item表示数组的每一项 index表示数组的索引
循环的时候需要加key key最好时候对象里面的属性 如果没有再使用index-->
<!-- v-for 使用in 和 of 都可以 -->
