Vue中指令

**v-bind **

  • v-bind 指令被用来响应地更新 HTML 属性
  • v-bind:href 可以缩写为 :href;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度1</a>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com'
      },
      methods: {
        handle: function(){
          // 修改URL地址
          this.url = 'http://itcast.cn';
        }
      }
    });
  </script>
</body>

绑定对象

  • 我们可以给v-bind:class 一个对象，以动态地切换class。 注意：v-bind:class指令可以与普通的class特性共存
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     <style type="text/css">
        .active {
          border: 1px solid red;
          width: 100px;
          height: 100px;
        }
        .error {
          background-color: orange;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div v-bind:class="{active: isActive,error: isError}">
          测试样式
        </div>
        <button v-on:click='handle'>切换</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          样式绑定

        */
        var vm = new Vue({
          el: '#app',
          data: {
            isActive: true,
            isError: true
          },
          methods: {
            handle: function(){
              // 控制isActive的值在true和false之间进行切换
              this.isActive = !this.isActive;
              this.isError = !this.isError;
            }
          }
        });
      </script>
    </body>
    绑定数组
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <style type="text/css">
        .active {
          border: 1px solid red;
          width: 100px;
          height: 100px;
        }
        .error {
          background-color: orange;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div v-bind:class='[activeClass, errorClass]'>测试样式</div>
        <button v-on:click='handle'>切换</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          样式绑定

        */
        var vm = new Vue({
          el: '#app',
          data: {
            activeClass: 'active',
            errorClass: 'error'
          },
          methods: {
            handle: function(){
              this.activeClass = '';
              this.errorClass = '';
            }
          }
        });
      </script>
    </body>
    样式绑定之class绑定3个细节用法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <style type="text/css">
        .active {
          border: 1px solid red;
          width: 100px;
          height: 100px;
        }
        .error {
          background-color: orange;
        }
        .test {
          color: blue;
        }
        .base {
          font-size: 28px;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
        <div v-bind:class='arrClasses'></div>
        <div v-bind:class='objClasses'></div>
        <div class="base" v-bind:class='objClasses'></div>

        <button v-on:click='handle'>切换</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          样式绑定相关语法细节：
          1、对象绑定和数组绑定可以结合使用
          2、class绑定的值可以简化操作
          3、默认的class如何处理？默认的class会保留
          
        */
        var vm = new Vue({
          el: '#app',
          data: {
            activeClass: 'active',
            errorClass: 'error',
            isTest: true,
            arrClasses: ['active','error'],
            objClasses: {
              active: true,
              error: true
            }
          },
          methods: {
            handle: function(){
              // this.isTest = false;
              this.objClasses.error = false;
            }
          }
        });
      </script>
    </body>
    样式绑定之style绑定用法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <div id="app">
        <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
        <div v-bind:style='objStyles'></div>
        <div v-bind:style='[objStyles, overrideStyles]'></div>
        <button v-on:click='handle'>切换</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          样式绑定之内联样式Style：
          
        */
        var vm = new Vue({
          el: '#app',
          data: {
            borderStyle: '1px solid blue',
            widthStyle: '100px',
            heightStyle: '200px',
            objStyles: {
              border: '1px solid green',
              width: '200px',
              height: '100px'
            },
            overrideStyles: {
              border: '5px solid orange',
              backgroundColor: 'blue'
            }
          },
          methods: {
            handle: function(){
              this.heightStyle = '100px';
              this.objStyles.width = '100px';
            }
          }
        });
      </script>
    </body>
    分支结构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
      <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>60'>一般</div>
        <div v-else>比较差</div>
        <div v-show='flag'>测试v-show</div>
        <button v-on:click='handle'>点击</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          分支结构

          v-show的原理：控制元素样式是否显示 display:none
        */
        var vm = new Vue({
          el: '#app',
          data: {
            score: 10,
            flag: false
          },
          methods: {
            handle: function(){
              this.flag = !this.flag;
            }
          }
        });
      </script>
    </body>

v-show 和 v-if的区别

**v-show本质就是标签display设置为none，控制隐藏 **

  • &nbsp;&nbsp;&nbsp;&nbsp;v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
    v-if是动态的向DOM树内添加或者删除DOM元素
  • &nbsp;&nbsp;&nbsp;&nbsp;v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构-遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{{item}}</li>
      <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>

key的作用:

  1. key来给每个节点做一个唯一标识
  2. key的作用主要是为了高效的更新虚拟DOM

遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
  <div id="app">
    <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 使用原生js遍历对象
    var obj = {
      uname: 'lisi',
      age: 12,
      gender: 'male'
    }
    for(var key in obj) {
      console.log(key, obj[key])
    }
    /*
      循环结构
    */
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>

选项卡案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  <style type="text/css">
    
    .tab ul {
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .tab ul li {
      box-sizing: border-box;
      padding: 0;
      float: left;
      width: 100px;
      height: 45px;
      line-height: 45px;
      list-style: none;
      text-align: center;
      border-top: 1px solid blue;
      border-right: 1px solid blue;
      cursor
    }
    .tab ul li:first-child {
      border-left: 1px solid blue;
    }
    .tab ul li.active {
      background-color: orange;
    }
    .tab div {
      width: 500px;
      height: 300px;
      display: none;
      text-align: center;
      font-size: 30px;
      line-height: 300px;
      border: 1px solid blue;
      border-top: 0px;
    }
    .tab div.current {
      display: block;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="tab">
      <ul>
        <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
      </ul>
      <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
        <img :src="item.path">
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        currentIndex: 0, // 选项卡当前的索引
        list: [{
          id: 1,
          title: 'apple',
          path: 'img/apple.png'
        },{
          id: 2,
          title: 'orange',
          path: 'img/orange.png'
        },{
          id: 3,
          title: 'lemon',
          path: 'img/lemon.png'
        }]
      },
      methods: {
        change: function(index){
          // 在这里实现选项卡切换操作：本质就是操作类名
          // 如何操作类名？就是通过currentIndex
          this.currentIndex = index;
        }
      }
    });
  </script>
</body>