Vue.js学习笔记(三)

来源：互联网发布：华润漆怎么样知乎编辑：程序博客网时间：2024/05/22 11:53

通过一个简单的实例加深对Vue的学习

列表渲染

v-for指令
根据一组数组的选项列表进行渲染
语法:
- value,key in items
- value,key of items
对数组进行操作,使用Vue提供的一组方法,会触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

事件处理器

v-on指令
用来监听DOM事件触发的代码
语法:
- v-on:eventName = “eventHandle”
- @eventName=”eventHandle”
事件处理函数
写在methods中统一管理
事件对象
- 在事件处理函数中获取
- 内联事件处理函数执行,传入事件对象

事件修饰符

事件处理函数只有纯粹的逻辑,不处理DOM事件的细节
如:阻止冒泡,取消默认行为,判断按键

修饰符的位置
v-on:eventName.修饰符
修饰符
1. .stop
2. .prevent
3. .capture
4. .self
5. .once
按键修饰符
1. .enter
2. .tab
3. .delete
4. .esc
5. .space
6. .up
7. .down
8. .left
9. .right
10. .ctrl
11. .alt
12. .shift
13. .meta
14. .键值

条件渲染

v-show指令
根据表达式的值,用来显示/隐藏元素
语法:
v-show=”表达式”
元素会被渲染在页面中,只根据表达式的值进行css切换

动态绑定

v-bind指令
元素属性可以使用v-bind绑定

简单的DEMO

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>My Plan</title>    <style>    * {        margin: 0;        padding: 0;    }    h2 {        line-height: 80px;        height: 80px;        font-size: 48px;        padding-left: 20%;        background: orange;        color: white;    }    section {        width: 80%;        padding-left: 20%;    }    h3 {        line-height: 60px;        height: 60px;        font-size: 24px;    }    input {        display: block;        width: 50%;        border: 1% solid #ccc;        border-radius: 5px;        padding: 10px 4%;        color: #999;        margin-bottom: 20px;    }    a {        color: #000;        display: inline-block;        color: #999;        text-decoration: none;        padding: 0 20px;    }    li {        list-style-type: none;        padding: 5px;    }    .checkbox {        display: inline-block;        width: 40px;        text-align: center;    }    .checked {        text-decoration: line-through;        color: #ccc;    }    </style></head><body>    <header>        <h2>任务计划列表</h2>    </header>    <section>        <h3>添加任务</h3>        <input type="text" id="thePlanInput" placeholder="请输入要添加的计划" v-model='input_value' @keyup.enter="addToList">        <span v-if="show">{{length}}个任务未完成</span>        <h3>任务列表:</h3>        <span v-if="!show">还没有添加任务</span>        <ul>            <li v-for='item in list' :class="{checked:item.isChecked}">                <input type="checkbox" class="checkbox" v-model="item.isChecked"> {{item.title}}                <button @click="deleteThisItem(item)">delete</button>            </li>        </ul>    </section>    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>    <script>    var list = [];    var vm = new Vue({        el: 'section',        data: {            list: list,            length: list.length,            show: false        },        methods: {            addToList: function(ev) {                var sTemp = this.input_value;                list.push({                    title: sTemp,                    isChecked: false                });                vm.length = list.length;                ev.target.value = "";                if (vm.length > 0) {                    this.show = true;                } else {                    this.show = false;                }            },            deleteThisItem: function(item) {                var index = this.list.indexOf(item);                this.list.splice(index, 1);                vm.length = this.list.length;                if (vm.length > 0) {                    this.show = true;                } else {                    this.show = false;                }            }        }    });    </script></body></html>

0 0