Vue模板语法(2)

循环:

在模板中可以用v-for指令来循环数组,对象等。

循环数组:

<div id="app">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(book,index) in books">
                <td>{{index}}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            books: [{
                'title': '三国演义',
                'author': '罗贯中'
            },{
                'title': '水浒传',
                'author': '施耐庵'
            },{
                'title': '西游记',
                'author': '吴承恩'
            },{
                'title': '红楼梦',
                'author': '曹雪芹'
            }]
        }
    });
</script>

循环对象:

循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数。示例代码如下:

<div id="app">
    <div v-for="(value,key) in person">
        {{key}}:{{value}}
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            person: {
                "username": "多点笔记",
                "age": 18,
                "homepage": "https://www.baidu.com/"
            }
        }
    });
</script>

保持状态:

循环出来的元素,如果没有使用key元素来唯一标识,如果后期的数据发生了更改,默认是会重用的,并且元素的顺序不会跟着数据的顺序更改而更改。比如:

<div id="app">
    <div v-for="(book,index) in books">
        <label for="book">{{book}}</label>
        <input type="text" v-bind:placeholder="book">
    </div>
    <button v-on:click="changeBooks">更换图书</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            books: ['三国演义','水浒传','红楼梦','西游记']
        },
        methods: {
            changeBooks: function(event){
                this.books.sort((x,y) => {
                    return 5 - parseInt(Math.random()*10)
                });
            }
        }
    });
</script>

如果你在某个input标签中输入了值,然后点击了“更换图书”的按钮,你会发现及时数据更改了,input并不会跟着数据的更改而更改,这时候我们只需要在v-for的时候加上一个key属性就可以了。示例代码如下:

<div v-for="(book,index) in books" v-bind:key="book">
    <label for="book">{{book}}</label>
    <input type="text" v-bind:placeholder="book">
</div>

注意,key只能是整形,或者是字符串类型,不能为数组或者对象。

触发视图更新:

Vue对一些方法进行了包装和变异,以后数组通过这些方法进行数组更新,会出发视图的更新。这些方法如下:

  1. push():添加元素的方法。

    this.books.push("金瓶梅")
  2. pop():删除数组最后一个元素。

     this.books.pop()
  3. shift():删除数组的第一个元素。

     this.books.shift()
  4. unshift(item):在数组的开头位置添加一个元素。

     this.books.unshift("金瓶梅")
  5. splice(index,howmany,item1,...,itemX):向数组中添加或者删除或者替换元素。

     // 向books第0个位置添加元素
     this.books.splice(0,0,"金瓶梅")
     // 下标从0开始,删除2个元素
     this.books.splice(0,2)
     // 下标从0开始,替换2个元素
     this.books.splice(0,2,'金瓶梅','骆驼祥子')
  6. sort(function):排序。

     this.books.sort(function(x,y){
         // 取两个随机数排序
         a = Math.random();
         b = Math.random();
         return a-b;
     });
  7. reverse():将数组元素进行反转。

     this.books.reverse();

还有一些Vue没有包装的方法,比如filterconcatslice,如果使用这些方法修改了数组,那么只能把修改后的结果重新赋值给原来的数组才能生效。比如:

this.books = this.books.filter(function(x){
    return x.length>3?false:true;
})

视图更新注意事项:

  1. 直接修改数组中的某个值是不会出发视图更新的。比如:

     this.books[0] = '金瓶梅';

    这种情况应该改成用splice或者是用Vue.set方法来实现:

     Vue.set(this.books,0,'金瓶梅');
  2. 如果动态的给对象添加属性,也不会触发视图更新。只能通过Vue.set来添加。比如:

     <div id="app">
         <ul>
             <li v-for="(value,name) in person">{{name}}:{{value}}</li>
         </ul>
         <script>
             let vm = new Vue({
                 el: "#app",
                 data: {
                     person: {"username": '多点笔记'}
                 },
                 methods: {
                     changePerson: function(event){
                         // 直接修改this.person.age是没有效果的
                         // this.person.age = 18;
                         Vue.set(this.person,'age',18)
                     }
                 }
             });
         </script>
     </div>

事件绑定:

事件绑定就是在HTML元素中,通过v-on绑定事件的。事件代码可以直接放到v-on后面,也可以写成一个函数。示例代码如下:

<div id="app">
    <p>{{count}}</p>
    <button v-on:click="count+=1">加</button>
    <button v-on:click="subtract(10)">减10</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            subtract: function(value){
                this.count -= value;
            }
        }
    });
</script>

传入event参数:

如果在事件处理函数中,想要获取原生的DOM事件,那么在html代码中,调用的时候,可以传递一个$event参数。示例代码如下:

<button v-on:click="subtract(10,$event)">减10</button>
...
<script>
...
methods: {
    subtract: function(value,event){
        this.count -= value;
        console.log(event);
    }
}
...
</script>

事件修饰符:

有时候事件发生,我们可能需要做一些操作。比如针对这个事件要他的默认行为。那么我们可能通过以下代码来实现:

<div id="app">
    <a href="https://www.baidu.com/" v-on:click="gotoWebsite($event)">百度</a>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            gotoWebsite: function(event){
                event.preventDefault();
                window.location = "https://www.360.cn/"
            }
        }
    });
</script>

那个阻止默认事件执行的代码,我们可以通过click.prevent来实现。示例代码如下:

<a href="https://www.baidu.com/" v-on:click.prevent="gotoWebsite($event)">百度</a>

另外,常见的修饰符还有以下:

  1. .stopevent.stopPropagation,阻止事件冒泡。
  2. .capture:事件捕获。
  3. .once:这个事件只执行一次。
  4. .self:代表当前这个被点击的元素自身。
  5. .passive:在页面滚动的时候告诉浏览器不会阻止默认的行为,从而让滚动更加顺畅。
最后修改:2020年8月6日 08:59