Vue.js从入门到实践学习笔记（一）——Vue.js语法简介
一、Vue实例
在一个使用Vue.js框架的页面应用程序中，至少要创建一个Vue实例。语法为new Vue()。
创建Vue实例时，需要传入一个选项对象，传在（）里，（{…}），该对象可以包含数据、方法、组件生命周期钩子。
提示：实例可以赋值给变量，如：var vm = new vue({......})
实例挂载：通过el属性绑定要渲染的view，el： ‘#app’ 表示该实例挂载到前面的HTML标签语句中。
data：{...}数据对象，放所有的数据vm.$mount("#app")方法手动挂载Vue实例 ，返回实例本身- el是在()里挂载，
$mount是在（）外挂载
var vm=new Vue({
...}).$mount("app")
二、插值（数据绑定）
1、模板文本中的绑定
对于<html>里的标签之间的文本值，需要调用写在<script>里的实例里的属性值，使用文本插值，即Mustache语法（双花括号）：<p>{
{message}}</p>
- 如果值是一段HTML代码，{
{HTML}}并不会执行这段HTML代码，只会原样输出（顾名思义，文本插值，只传递文本进去）：
<p>{ {html}}</p> - 使用v-html指令可以输出执行HTML语句后的结果：
<p v-html="html"></p>
2、HTML元素属性值的绑定
对于HTML元素的属性值，也即标签的属性值，如<a href=?>{
{...}}</a> ，?处不能用{
{}}，要传值的话需要使用v-bind指令：
<a v-bind:href="url">{
{
...}}</a>`
对所有的数据绑定，提供完全的JavaScript支持，如:
<p>{
{
message.tuUpperCase()}}</p> //tuUpperCase()会把传进来的文本变为全大写字母。
{
{
a+b}}
{
{
isLogin？username：‘not login’}}
{
{
message.split(' ').reverse().join('')}} //反转句子
<div v-bind:id="'list-' + id"></div>·
这些表达式会先在Vue实例的数据作用域下作为JavaScript被解析。
注意：每个表达式只能包含单个表达式，不能是语句或if语句，如：
{
{
var a = 1}} //这是语句，不是表达式
{
{
if (OK) {
return message} }} //if语句也不会生效，可以用三元表达式来代替
三、指令
指令是带有v-前缀的特殊属性，其值限定为单个表达式（可以是值，也可以支持JavaScript表达式）。
当<script>中Vue实例里的属性值发生改变，<html>中与之绑定的标签的属性值也会跟着改变。
1、一些常用指令及用法：
v-if指令
<p v-if = "show">能看到吗</p> //v-if指令将根据show的值的真假来决定是否显示<p>的文本
一些指令可以带有参数，在名称后用冒号表示，如：
v-bind指令
<a v-bind:herf= "url"></a> //用于响应式地更新HTML属性
<a :herf= "url"></a> //简写
v-on指令
<button v-on:click="sayGreat"></button> //用于监听DOM事件
<button @click="sayGreat"></button> //简写
2、指令的参数可以是动态参数
从Vue.js 2.6.0版本开始，指令的参数可以是动态参数，语法为 指令:[JavaScript表达式]，如：
<a v-bind:[attribute]= "url"></a>
attribute会被作为一个JavaScript表达式进行动态求值。假设在Vue实例中有一个对象属性为attribute，值为href，就相当于v-bind:herf；若值为null，绑定就会被移除，相当于
<a></a>
注意1：在DOM中使用模板时（之间在HTML文件里写模板），需要避免使用大写字符命名动态参数，因为浏览器会把元素的属性名全部强制转换为小写。
也就是<html>里的动态参数名改成小写了，但是<script>里与之对应的名不会改成小写，就会找不到动态参数对应的数据对象。
注意2：动态参数不要使用复杂的表达式。因为HTML元素的属性命名有规范，不能有引号或空格。
错误示范：<a v-bind:['foo' + bar]= "value"></a>