<template>
    <!-- 模板语法：vue内置了一套模板引擎，是数据驱动的，如下： -->
        <div id='app'>
          <span>输出num的值：{{hello}}</span> <!-- {{变量名}} -----Mustache语法，控制定义变量的输出 -->
    
          <span v-html='hello'></span><!-- v-html='变量名' ---------Html赋值 （元素的innerHTML），注意这里变量的输出不能包含{{}}，直接写变量名字符串 -->
          <span v-text='hello'></span><!-- v-text='变量名' ---------text赋值 （元素的innerText），注意这里变量的输出不能包含{{}}，直接写变量名字符串 ,只能在双标签中使用-->
    
          <ul>
            <li v-for='person in persons'>{{person.name}}</li><!-- v-for='item in array/object' ---------遍历数组或者对象，每一项为item -->
            <li v-is='组件名称'></li><!-- 某些标签只能嵌套在特定的标签中才会正常显示，但是组件并不一定是这个特定的标签，此时可以使用特定标签加v-is='组价名'来实现渲染 -->
          </ul>
    
          <span v-bind:id='personid'></span><!-- v-bind:属性名='变量的key'------v-bind:  简写为  ：  给元素绑定属性，并给值 -->
          <span :id='personid'></span><!-- v-bind简写形式 -->
          <span v-bind:class="className ? 'red' : 'yellow'"></span><!-- v-bind:class="className ? 'red' : 'yellow'" 利用三元表达式控制两样式选其中一种，注意引号内使用引号的情况 -->
          <a v-bind:href="url">新页面</a><!-- 动态设置url -->
          <a v-bind:[id]="url"> 动态设置参数使用:[参数] </a>
    
          <span>{{ true ? names : 'NO' }}</span><!-- {{ 表达式 ? 'true时输出的内容' : 'NO时输出的内容' }}--------使用表达式(三元表达式)，这里如果要输出变量，那么直接在后面跟上变量key即可，无需加{{}} -->
          
          <input type='text' v-model='hello'><!-- v-model='变量名'---给元素（input、textarea、select）绑定双向数据,数据是双向改变的,js内存数据改变影响页面;在不同的标签上数据是不同的 -->
        
          <span>{{message|capitalize}}</span><!-- {{message|capitalize}} 和 v-bind:id='rawld|formatld'-----过滤器,后面介绍 -->
          <span v-bind:id='rawld|formatld'></span>
    
    <!-- Class和Style绑定 -->
          <span :class='{colors:isActive,fonts:isActive}'>{{hello}}</span><!-- 对象语法：v-bind:class='{colors:isActive,fonts:isActive}' ------colors和fonts是定义的class类名，无需在data中声明；isActive是定义的变量，当isActive为true时，显示定义类的样式内容，否则不显示。 -->
          <span :class='[fontColor,fontSize]'>{{hello}}</span><!-- 数组语法:v-bind:class='[fontColor,fontSize]' ------fontColor和fontSize是定义在data中的变量名，它们的值为样式类名字符串；只要给数组加上变量，那么这个变量对应类名控制的样式就会添加给元素 -->
          <span :style="{color:activeColor,fontSize:fontSize + 'px'}">{{hello}}</span><!-- style语法：v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}"----color和fontSize等指CSS样式属性，它们的值为定义在data中对应CSS属性的值 -->
    
    <!-- 条件渲染： -->
          <span v-if='isExist'>{{hello}}</span><!-- 条件渲染:v-if='isExist'---- v-if控制元素是否存在,当定义在data中的变量isExist值为false时,这个元素消失(控制台看不到此元素),并非隐藏；isExist值为true时出现 -->
          <span v-show='isExist'>{{hello}}</span><!-- 条件渲染:v-show='isExist'---- v-show控制元素是否显示,当定义在data中的变量isExist值为false时,这个元素隐藏（display:none），并非消失；isExist值为true时显示-->
          
          <!-- 条件渲染：v-else:此指令需要和v-if指令结合使用，当v-if中isExist变量值为false时出现v-else指令所在标签；值为true时消失 -->
          <div v-if='isExist'>{{hello}}</div>
          <div v-else>{{word}}</div>
         
          <!-- 条件渲染：v-else-if:此指令需要和v-if及v-else指令结合使用(建议结合)，当v-if中isExist变量值为false时再判断v-else-if指令的条件，如值为true时执行，否则执行v-else指令；和原生中if/else if/else执行一样 -->
          <div v-if='isExist'>{{hello}}</div>
          <div v-else-if='isShow'>{{word}}</div>
          <div v-else>{{jack}}</div>
          
          <!-- 条件渲染组：当需要对多个元素进行条件渲染时，可以使用template进行包裹，渲染完后是没有template标签的-->
          <template v-if="ok">
      			<h3>h1</h3>
      			<p>P1</p>
    			</template>
    
          <div v-cloak>{{hello}}</div><!-- 控制当编译完后才显示，可以隐藏未编译的 Mustache 标签，直到编译完在显示 -->
    			
    			<!-- v-for in 遍历数组 -->
    			<li v-for='item in arrays'>{{item}}</li><!--arrays可以是一个整数，此时从1遍历到这个整数值-->
    			<li v-for='(item,index) in arrays'>{{item}}-{{index}}</li>
    			<li v-for='item of arrays'>{{item}}</li><!--也可使用of代替in-->
    			<li v-for='item in arrays' :key='item.id'>{{item}}</li><!--给每项通过key添加唯一标识，便于找到自己-->
    			<!-- 也可以在template 中使用v-for遍历一组内容 -->
    			<!-- v-for in 遍历对象 -->
    			<li v-for='value in objects'>{{value}}</li>
    			<li v-for='(value,key) in objects'>{{value}}-{{key}}</li>
    			<