初识Vue.js（五）

5.1 基本指令
v-clock不需要表达式，它会在Vue实例结束编译时从绑定的HTMl元素上移除，经常和CSS的display:node;配合使用。
在一般情况下，v-clock是一个解决初始化man导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只能被渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。例如

 <body>

        <div id="app">

           <span v-once>{{message}}</span>
           <div v-once>
            <span>{{message}}</span>
           </div>
        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script>
          var app=new Vue({
            el:'#app',
            data:{
                message:'这是一段文本'
            }
          })
        </script>
    </body>

5.2 条件渲染指令

5.2.1 v-if、v-else-if、v-else
与JavaScript的条件语句相似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：

<body>

        <div id="app">
      <p v-if="status===1">当status为1时显示该行</p>
      <p v-else-if="status===2">当status为2时显示该行</p>
      <p v-else>否则显示该行</p>
        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script>
          var app=new Vue({
            el:'#app',
            data:{
            status:1
            }
          })
        </script>
    </body>

v-else-if 要紧跟v-if，v-else要紧跟v-else-if或v-if，当前元素、组件以及所有子节点将被渲染，为假时将被移除。如果一次判断的是多个元素，可以在Vue.js内置的元素上使用条件指令，最终渲染的结果不会该元素。

5.2.3 v-show
v-show的用法与v-if基本上一致，只不过v-show是改变元素的CSS属性display。当v-show的表达式的值为false时，元素会隐藏。
例如：

<body>

        <div id="app">
   <p v-show="status===1">显示</p>

        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script>
          var app=new Vue({
            el:'#app',
            data:{
            status:2

            }
          })
        </script>
    </body>

查看DOM结构会看到元素上加载了内联样式display：none；

<p style="display: none;">显示</p>

5.2.3 v-if 与v-show的选择
v-if和v-show有同样的功能，不过v-if才是真正的条件渲染，它会根据表达式适当的销毁或重建元素以及绑定的事件或子组件，若表达式初始值为false，则一开始元素、组件并不会渲染，只有当条件第一次变为真时才开始编译。
而v-show只是简单的css属性切换，无论条件真与否，都会被编译，相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。

5.3 列表渲染指令v-for

当需要将一个数组遍历或枚举一个对象循环显示的时候，就会用到列表渲染指令v-for。它的表达式需要结合in来使用，类似item in items的形式。

 <body>

       <div id="app">
            <ul>
                <li v-for="book in books" >{{book.name}}</li>
            </ul>

        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        books: [
        {name:'《Vue.js实战》'},
        {name:'《Java实战》'},
        {name:'《C#实战》'},
        ]
        }
    })
</script>
    </body>

在表达式中，books是数据，book是当前数组元素的别名，循环出的每个列表内的元素都可以访问到对应的当前book。列表渲染也支持of来代替in作为分隔符，它更接近JavaScript迭代器的语法：

<li v-for="book of books" >{{book.name}}</li>

v-for的表达式支持一个可选参数作为当前项的索引，也可以用在内置标签<template>上，将多个元素进行渲染。除了数组外，对象的属性也是可以遍历的，遍历对象属性的时候，有两个可选参数，分别是键名和索引

<ul>
                <li v-for="(value,key,index) in user">
                    {{index}-{{key}}:{value}}                   
                </li>

            </ul>

v-for还可以迭代整数

   <body>
   <div id="app">
    <span v-for="n in 10">{{n}}</span>
    </div>
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app'
        })      
    </script>
    </body>

5.3.2 数组更新
Vue的核心是数据与视图的双向绑定，当我们修改数组的时候，Vue会检测到数据变化，所以v-for渲染的视图会立即更新。Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新。

push()
pop()
shift()
unshift()
splice()
sort()
resverse()

使用以上方法会改变这些方法调用的原始数组，有些方法不会改变原数组，而是生成一个新的数组.
filter(),concat(),slice()，在使用这些非变异方法的时候，可以用新数组来替换原数组。

Vue在检测到数组变化时，并不是直接重新渲染真个列表，而是最大化的复用DOM元素，替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。
需要注意的是，以下变动的数组中，Vue是检测不到的，也不会触发视图更新。

通过索引直接设置项，比如app.books[3]={…}
修改数组长度，比如app.length=1.

5.3.3 过滤与排序
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。
例如

<body>
        <div id="app">
            <ul>
                <template v-for="book in filterBooks">
                    <li>书名：{{book.name}}</li>
                    <li>作者：{{book.author}}</li>
                 </template>
            </ul>       
        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        books: [
        {
            name:'《Vue.js实战》',
            author:'尤雨溪'

        },
        {
            name:'《Java实战》',
            author:'许致远'
        },
        {
            name:'《C#实战》',
            author:'许晨'
            }
        ]
        },
        computed:{
            filterBooks:function(){
                return this.books.filter(function(book){
                return book.name.match(/Java/); 
                });

            }
        }
    })
</script>
    </body>

在Vue.js 2.x中废弃了1.x中内置的limitBy、filterBy和orderBy过滤器，统一使用计算属性来实现。

5.4 方法与事件

5.4.1 基本用法
我们已经引入了Vue事件处理的概念V-on，在事件绑定上，类似原生的JavaScript的OnClick写法，也是在HTML上进行监听的。例如，我们写监听一个按钮的点击事件，设置一个计数器，每次都加1：

<body>
        <div id="app">
            点击次数：{{counter}}
            <button @click="counter++">+1</button>
        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            counter:0
        }
    })
</script>
    </body>

@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选项内的函数名字，比如对上例进行扩展，再增加一个按钮，点击一次，计数器加10；

<body>
        <div id="app">
            点击次数：{{counter}}
            <button @click="handleAdd()">+1</button>
            <button @click="handleAdd(10)">+10</button>

        </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            counter:0
        },
        methods:{
            handleAdd:function(count){
                count=count||1;
                this.counter+=count;

            }
        }
    })
</script>
    </body>

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则正好相反，因为通过HTML就能知道调用的是那个方法，将逻辑与DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器会自动删除，无需自己清理。
Vue提供了一个特殊变量$event,用于访问原生DOM事件。
5.4.2 修饰符
Vue支持以下修饰符

stop
prevent
capture
self
once

在表单元素上监听键盘事件时，还可以使用键盘修饰符，比如调用某个键时才调用某个方法。

5.2 条件渲染指令

5.3 列表渲染指令v-for

5.4 方法与事件

猜你喜欢