Vue学习第二弹

前几天一直在做一个公司的面试题,导致Vue的学习不得不中断,最后辣个公司也没去成,做面试题的时候某个功能实现不了就觉得太TM难了,我为什么要做这个,生无可恋,事后觉得我这个畏难情绪是不对的,完成了之后也并没有觉得多难,毕竟是些基础的东西,这些交互的功能只是自己练的少罢了,这么多人会写的东西我没道理不会啊,不急躁慢慢来就好啦。

言归正传,说说Vue

v-on指令

事件监听,用来监听DOM事件的触发

语法

v-on:eventName="eventHandle"

也可以简写成

@eventName="eventHandle"

在input里输入内容,然后敲回车就alert内容的值就可以这么写

<input id="todolist" @keyup="addTodo"/>

然后在Vue的实例对象里添加methods属性,这个属性收纳所有的事件处理函数以及实例的方法

new Vue({
    el: "#todolist",
    methods: {
        addTodo(ev){            
            if(ev.keyCode === 13){
                alert(ev.target.value)  
            }
        }
    }
})

这是一种写法,但是还是没有get到Vue的精髓。事件处理函数只有纯粹的逻辑判断,不处理DOM事件的细节,例如:阻止冒泡、取消默认行为、判断按键。所以Vue又提供了一堆事件修饰符,语法如下

v-on:eventName.修饰符="eventHandle"

之前的代码我们可以写成:

<input id="todolist" @keyup.enter="addTodo"/>
<script>
    new Vue({
        el: "#todolist",
        methods: {
            addTodo(ev){            
                //去掉if
                    alert(ev.target.value)  
            }
        }
    })
</script>

其他的修饰符还有

.stop .prevent .capture .self .once

以及按键修饰符

.enter .tab .delect .esc .space .up .down .right .ctrl
.alt .shift .meta .键值

Vue是数据驱动,能不操作DOM就不操作DOM,加上v-model,该指令能够自动监控DOM元素的value值

<input id="todolist" v-model="todo" @keyup.enter="addTodo"/>
<script>
    new Vue({
        el: "#todolist",
        data: {
            todo:""
        },
        methods: {
            addTodo(ev){            
                    alert(this.todo);   
                    this.todo = "";
            }
        }
    })
</script>

预览一下:666666

还要提醒一点,事件函数默认传的是事件对象,如果还想传参数要这么写

<input id="todolist" v-model="todo" @keyup.enter="addTodo(123,$event)"/>
<script>
    new Vue({
        el: "#todolist",
        data: {
            todo:""
        },
        methods: {
            addTodo(data,ev){           
                    alert(this.todo);   
                    this.todo = "";
                    console.log(data); //123
                    console.log(ev);    //事件对象         }
        }
    })
</script>

这个$符表示Vue自带的一些属性。

v-show指令

根据表达式的值,用来显示/隐藏元素,调用的css代码是

display: none/block

语法

v-show="表达式"

🌰

<div id="todolist">
    <input v-model="todo" @keyup.enter="addTodo"/>
    <p v-show="!list.length">没有输入任何内容</p>  //!list.length为true的时候显示该元素
    <p v-show="list.length">输入的内容为</p>  //list.length为true的时候显示该元素
    <ul v-for="item in list">
        <li>{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#todolist",
        data: {
            list:[],
            todo:""
        },
        methods: {
            addTodo(ev){
                this.list.push(this.todo)   
                this.todo = "";
           }
        }
    })
</script>

预览一下:

class的绑定

DOM元素的class也可以用v-bind绑定,语法如下

:class = "{classNamne : 表达式}"
//表达式值为true,添加classNamne,
//表达式值为flase,移除classNamne

🌰

<style type="text/css">
    li.checked label{
        text-decoration: line-through;
        color: #777777;
    }
</style>
<div id="todolist">
    <input v-model="todo" @keyup.enter="addTodo"/>
    <p v-show="!list.length">没有输入任何内容</p>
    <p v-show="list.length">输入的内容为</p>
    <ul v-for="item in list">
        <li :class="{checked : item.isChecked}"> //绑定class,item.isChecked为true的时候添加checked这个class
            <input type="checkbox" v-model="item.isChecked" >  //item.isChecked由checkbox决定
            <label>{{item.title}}</label>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: "#todolist",
        data: {
            list:[],
            todo:""
        },
        methods: {
            addTodo(ev){  
                this.list.push(
                    {
                        title:this.todo,
                        isChecked:false
                    }
                );
                this.todo = "";
           }
        }
    })
</script>

预览一下:6的飞起

Comments
Write a Comment