vue.js实战 第一篇 第五章 内置指令

v-cloak 遮盖

<div id="app" v-cloak>{{text}}</div>
//还需要加一句css
[v-cloak]{
    display: none;
}
//简单的项目适用，但在具有工程化的项目里，比如webpack和vue-router时不适用

v-once

也是一个不需要表达式的指令，只渲染一次。一般不用，当需要进一步优化性能时，可能会用到。

条件渲染指令v-if, v-else-if, v-else

<div id="app">
    <p v-if="status===1">text1</p>
    <p v-else-if="status===2">text2</p>
    <p v-else>text3</p>
</div>

<div id="app">
    <template v-if="status===1">
        <p>text1</p>
        <p>text2</p>
    </template>
</div>

元素的复用

比如两个条件当中都有input，切换时输入input的内容会被保留，说明vue在渲染元素时，出于效率的考虑，复用了已有元素。如果不希望这样，可以在input中添加key=“”属性

v-show

<p v-show="status===1">text</p>

只是改变元素的css属性display，不能在template使用

列表渲染v-for

item in items或item of items

支持索引

<li v-for="(item,index) in items">{{index}}-{{{tem.name}}</li>

v-for也可以用在内置标签<template>，对多个元素进行渲染

<ul>
    <template v-for="book in books">
        <li>书名：{{book.name}}</li>
        <li>作者：{{book.author}}</li>
    </template>
</ul>
<script>
    data: {
        books: [
            {
                name: "aaa",
                author: "bbb"
            },
            {
                name:"ccc",
                author:"ddd"
            }
          ]
    }
</script>

除了数组以外，对象也可以遍历。

<span v-for="value in user">{{value}}</span>
data:{
    user:{
        name:"aaa",
        age:26,
        gender:"男"
    }
}

遍历对象属性时，有两个可选的参数key,index

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

还可以迭代整数，渲染的结果是1 2 3 4 5 6 7 8 9 10

<span v-for="n in 10">{{n}}</span>

数组更新

数组更新会触发视图的更新。改变原数组的：push,pop,shift,unshift,splice,sort,reverse，返回新数组的：filter,concat,slice

app.books.push({
    name:'aaa',
    author:'bbb'
});
app.books.filter(function(item){
    return item.name.match(/text/);
});

注意1：通过索引直接设置项app.books[3]={...}，vue不能检测到，也不会触发视图更新。

两种方法解决

//Vue内置的set方法
Vue.set(app.books,3,{...});
//注意：如果webpack中使用组件化的方式，默认是没有导入Vue的，可以试用$set
this.$set(app.books,3,{...});

app.books.splice(3,1,{...});

注意2：修改数组长度app.books.length=1，也是同样的问题

app.books.splice(1);

过滤和排序

不想改变元数组，想通过数组副本来做过滤和排序的显示时，可以使用计算属性返回过滤或排序后的数组。

<ul>
    <template v-for="book in filterBooks">
        <li>...
</ul>
computed:{
    fileterBooks: function() {
        return this.books.filter(function(book){
            return book.name.match(/text/);
}
computed: {
　　sortedBooks: function() {
　　　　return this.books.sort(function(a,b){
　　　　　　return a.name.length<b.name.length
}

 方法与事件

<div id="app">
    clicknum: {{counter}}
    <button @click="counter++">+1</button>
</div>
data: { counter: 0}

扩充一下：

<button @click="handleAdd()">+1</button>
<button @click="handleAdd(10)">+10</button>
data: {counter: 0},
methods: {
    handleAdd: function(count) {
        count= count || 1;
        this.counter+= count;
}

vue提供了一个特殊变量$event，用于访问原生DOM事件

< a href="http://www.baidu.com/" @click="handleClick('禁止打开',$event)">打开链接</a>
methods: {
    handleClick: function(message,event){
        event.preventDefault();
        window.alert(message);
}

修饰符

.stop, .prevent, .capture, .self, .once

<!--阻止事件冒泡-->
<a @click.stop="handle"></a>
<!--提交事件不再重载页面-->
<form @submit.prevent="handle"></form>
<a @click.stop.prevent="handle"></a>
<form @submit.prevent></form>

<input @keyup.13="submit">

keyCode别名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta