Vue.js(2)----常用指令

2017-07-14 本文已影响177人 _地中海大叔

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

下面介绍几种常用指令(v-if、v-show、v-else、v-for、v-bind、v-on)，看vue.js如何让将数据渲染进入DOM系统：

！注意 如果以下代码不好用，请注意页面是否引入了可用版本的vue.js。引入途径分为两种，一种是下载独立的vue.js官方下载地址。也可以使用CDN方法，但是目前国内的不太稳定，推荐下载到本地BootCDN(国内)、unpkg(国外)、cdnjs(国外)。

1. v-if

条件渲染指令，根据其后的表达式的布朗值判断是否渲染该元素。

<div id="view">
    <p v-if="Male">男</p>
    <p v-if="Female">女</p>
    <p v-if="age>20">年龄:{{age}}</p>
  </div>
<script>
var vm= new Vue({
        el:"#view",
        data:{
            Male:true,
            Female: false,
            age:29,
        }
    })
</script>

页面效果如下：

查看页面元素，可以发现黄色标记区域是v-if指令渲染出来的页面元素,只渲染了符合条件的元素。

2. v-show

接着v-if直接说v-show，上面说v-if只渲染符合条件的元素，而v-show则会渲染全部的元素，让我们把代码中的v-if全部替换为v-show，看看有什么区别。

可以看到页面的显示与之前的是没有区别的，但是在页面代码中多了一个p标签，并且style='display=none'，这说明了虽然不符合条件，但v-show依然渲染全部元素。

3. v-else

v-else指令必须要和v-if、v-show指令搭配在一起才能使用，如果v-if、v-show指令的表达式为true，那么else元素不显示；如果v-if、v-show指令的表达式为false，则else元素显示；

<div id="view">
    <p v-if="Male">我是个男人</p>
    <p v-else>{{message}}</p>
  </div>
<script>
new Vue({
        el:"#view",
        data:{
            Male:false,
            message:"我是个女人"
        }
    })
</script>

4. v-for

作用是遍历数组元素，“item in items”，items是数组，item是在数组中的元素。讲个一个数组中包含着很多的人的手机号码，那么就可以使用v-for遍历输出在页面中。

<div id="view">
    <table>
        <tr>
            <th>姓名</th>
            <th>号码</th>
        </tr>
        <tr v-for="user in users">
            <td>{{ user.name  }}</td>
            <td>{{ user.num  }}</td>
        </tr>
    </table>
</div>
<script>
new Vue({
        el: '#view',
        data: {
            users: [{
                name: '张三',
                num: 12345,
            }, {
                name: '李四',
                num: 67890,
            }, {
                name: '王五',
                num: 12345,
            }, {
                name: '赵六',
                num: 3697810,
            }]
        }
    })
</script>

以上的实例是在model层保存数据，然后再view层使用v-for方法去遍历model层的数组，遍历后将数据显示在页面。

5. v-bind

这个指令用于实时更新HTML元素中的属性，先看下面的实例：

<style type="text/css">
    .red{
      color: red;
    }
  </style>
</head>
<body>
  <div id="view">
    选中更改字体颜色<input type="checkbox" v-model='red'>
    <div v-bind:class="{'red':red }">字体</div>
  </div>
<script>
new Vue({
        el: '#view',
        data: {
            red:false
        }
    })
</script>

点击checkbox时，字体会更改颜色，也就是添加.red类。view层的input使用了v-model绑定了.red类（v-model创建了双向数据绑定，这里先不细说v-model）。在view层，v-bind负责它所在元素的属性，是否添加red属性。在model层，默认这个.red类为false,即为不添加，当更改input中checkbox的布朗值，model层的属性也会随之更改。v-bind属性可以有很多应用的场景，如网页一些需要高亮提示的地方。

6. v-on

用来监听指定元素的DOM事件，比如说点击事件，下面的实例和我们平常onclick()触发某个函数是很相似的。

<div id="view">
        <button v-on:click="helo">Helo</button>
</div>
<script>
    var Data ={
      message:'Hello World'
    }
    new Vue({
      el:'#view',
      data:Data,
      methods:{
          helo:function(){
            alert(this.message);
          }
      }
    })
</script>

常用的指令大概就是上面的这几个，在编写的时候要注意不要经常写分号。笔者习惯了写js代码，就一时有些改不过来。
希望大家喜欢这个系列，喜欢的话记得点击那颗小心心，会给我很多鼓励哦！
祝大家周末愉快。