1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         vue指令: 是vue模板中在标签属性上以v-开头的字段, 常用的指令有 v-text, v-html, v-model, v-on, v-bind, v-for, v-if, v-show, v-once <hr>
    5.         1, v-if指令, 判断表达式是否成立, 创建或销毁标签
    6.         <h1 v-if="age >= 18">您已成年, 欢迎进入</h1>
    7.         <h1 v-else>未成年人, 请走后门</h1> 
    8.         <hr>
    9.         2, v-show指令, 判断表达式是否成立, 显示或隐藏标签, 针对标签频繁显示隐藏情况
    10.         <button v-show="age >= 18">家长管理</button> 
    11.         <hr>
    12.         3, v-on指令, 给标签绑定事件 格式  v-on:事件名="事件函数"   函数名后的小括号可加可不加,
    13.         如果不传参, 不建议加(), 默认参数是事件对象event <br>
    14.         如果加(),但不传参,  默认参数undefined <br>
    15.         如果加(),且传参, 参数是实际传入参数值 <br>
    16.         <button v-on:click="add">不加(){{age}}</button>
    17.         <button v-on:click="add()">加(){{age}}</button>
    18.         <button v-on:click="add(5)">加(参数){{age}}</button>
    19.         <button @click="add">v-on: 可以简化为@</button>
    20.         <hr>
    21.         4, v-bind指令, 给标签绑定动态属性  <br>
    22.         <a href="./1,vue基本结构.html">正常的属性</a>
    23.         <a v-bind:href="url">动态的属性</a>
    24.         <div v-bind:class="'c1 '+ myClass" >多个calss拼接写法</div>
    25.         <div v-bind:class="myClass" class="c1">动态calss和静态class可以共存</div>
    26.         <div v-bind:style="myStyle">动态行内样式</div>
    27.         <div v-bind:draggable="true">bool值属性的绑定也可以直接写bool值</div>
    28.         <div :id="myClass[1]">v-bind: 简写为 : </div>
    29.         <hr>
    30.         5, v-once 限制标签中的数据只渲染一次, 当数据更新时不会重新渲染
    31.         <h1 v-once>{{age}}</h1> 
    32.         <hr>
    33.         6, v-for 指令 实现标签的循环渲染
    34.         <select>
    35.             <!-- 简单循环一个数字, 从1开始循环 -->
    36.             <option v-for="item in 5" :value="item">{{item}}</option>
    37.             <!-- 循环数组  -->
    38.             <option v-for="item in myClass" value="">{{item}}</option>
    39.             <!-- 循环时的索引 -->
    40.             <option v-for="item,i in myClass" value="">{{i+1}}:{{item}}</option>
    41.         </select>
    42.         <div v-for="item,i in arr">
    43.             <br>
    44.             <b>{{i}}:</b>
    45.             <span>{{item.name}}</span>
    46.         </div>
    47.         vue中提供了一个template标签, 可以作为父标签进行循环,但不会被渲染到DOM上
    48.         <template v-for="item,i in arr">
    49.             <br>
    50.             <b>{{i}}:</b>
    51.             <span>{{item.name}}</span>
    52.         </template>
    53.     </div>
    54.     <script>
    55.         new Vue({
    56.             el: '#myApp',
    57.             data: {
    58.                 arr: [
    59.                     {name:"张三"},
    60.                     {name: "小名"},
    61.                     {name: "李四"}
    62.                 ],
    63.                 true: false,  // true是一个bool值,不能当作变量名, 
    64.                 age: 15,
    65.                 url: "./2,,vue数据绑定.html",
    66.                 // 如果有多个calss值,建议使用数组结构
    67.                 myClass: ['c2', 'c3', 'c4'],  
    68.                 // 标签样式style属性建议绑定对象, 注意: 1,样式名用小驼峰 2,样式值用字符串
    69.                 myStyle: {
    70.                     color:'red', 
    71.                     fontSize: '20px', 
    72.                     background: 'blue'
    73.                 }
    74.             },
    75.             methods: {
    76.                 add(e){
    77.                     console.log(e)
    78.                     this.age ++;
    79.                 }
    80.             }
    81.         })
    82.     </script>
    83. </body>