Vue.js学习笔记（三）

最新推荐文章于 2024-07-30 18:36:42 发布

luoping1998

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量261

点赞数

分类专栏： vue 文章标签： Vue-js

本文链接：https://blog.youkuaiyun.com/Beng_shakalaka/article/details/80070234

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

Vue 事件处理器：

1.直接用表达式：

v-on:

<div id="app">
    <button v-on:click="counter +=1"></button>
    <p>{{counter}}</p>
</div>

new Vuew({
    el:'#app',
    data:{
        counter:0
    }
})

2.定义一个方法：

<div id="app">
    <button v-on:click="greet"></button>
</div>

var app = new Vue({
    el:'#app',
    data:{
        name:'Vue'
    },
    methods:{
        greet:function(event){
            //'this'指当前实例
            alert('hello'+this.name);
            if(event){
                alert(event.taget.tagName);
            }
        }
    }
})

app.greet();    //也可以用JS直接调用

3.还可以用内联js语句

<div id="app">
    <button v-on:click="say('hi')">sayHi</button>
    <button v-on:click="say('hello')">sayHello</button>
</div>

var app = new Vue({
    el:'#app',
    methods:{
        say:function(mess){
            //'this'指当前实例
            alert(mess);
        }
    }
})

事件修饰符：

.stop 阻止事件冒泡
.prevent 阻止事件发生
.capture
.self 只当是事件在该元素本身触发时回调
.once 只能触发一次

可以串联

按键修饰符：

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

常用按键的别名：

.enter .tab .delete .esc .space .up 
.down .left .right .ctrl .alt .shift .meta

缩写：

同时按下Alt和C：
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

绑定的事件在methods和在computed中的区别：

computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法，而 methods 内的方法则不会。例：

<div id="app">
    <button v-on:click="greet">greet</button>
    <button v-on:click="say">hi</button>    
</div>
new Vue({
    el:'#app',
        methods:{
            say:function(){
                alert('hi!');
            }
        },
        computed:{
            greet:function(){
                alert('greet!');
            }
        }
})              //尽管最开始没有按greet按钮，但是还是会先弹出greet

Vue表单：

利用v-model指令在表单控件上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素

<div id="app">
    <input v-model="mess">
    <p>消息是{{mess}}</p>

    <textarea v-model="text"></textarea>
    <p>text：{{text}}</p>
</div>

new Vue({
    el:'#app',
    data:{
        mess:'emmm',
        'text':'xixixi'
    }
})

复选框：

<div id="app">
    //单个勾选框，逻辑值 
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>

    //多个勾选框，绑定到同一个数组
    <input type="checkbox" id="r1" value="r1" v-model="checkedNames">
    <label for="r1">r1</label>
    <input type="checkbox" id="r2" value="r2" v-model="checkedNames">
    <label for="r2">r2</label>
    <input type="checkbox" id="r3" value="r3" v-model="checkedNames">
    <label for="r3">r1</label>
    <p>选择的值：{{checkedNames}}</p>
</div>
//checkedNames 被选中的值得数组
new Vue({
    el:'#app',
    data:{
        checked:false,
        checkedNames:[]
    }

})

单选按钮：

<div id="app">
    <input type="radio" id="r1" value="r1" v-model="picked">
    <label for="r1">r1</label><br/>
    <input type="radio" id="r2" value="r2" v-model="picked">
    <label for="r2">r2</label>
    <p>选中值为：{{picked}}</p>
</div>

new Vue({
    el:'#app',
    data:{
        picked:'r1'
    }
})

picked对应的是选中的input的value

select列表：

<div id="app">
    <select v-model="selected" name="fruit">
        <option value="">选择</option>
        <option value="1111">RRR</option>
        <option value="2222">GGG</option>
    </select>
</div>

new Vue({
    el:'#app',
    data:{
        selected:''
    }
})

selected 对应的也是选中项的value