Vue.js学习总结（二）

本文章是在学习Vue.js课程后的个人总结，方便以后快速回顾。

学习网站：https://www.bilibili.com/video/BV17x411J73h

一、v-bind的使用

<div id="app">
     <a v-bind:href="url">
         <img v-bind:src="img">
     </a>
</div>

var app = new Vue({
    el:'#app',
    data:{
        url:'http://baidu.com',
        img:'image/fff.png'
    }
})

运行结果：
页面会显示一张图片，点击图片时跳转到www.baidu.com网站

总结：

1. v-bind可用于a和img标签中，用于绑定图片和网站地址
2. 为了更快速开发，在编程中可以用： 代替v-bind

一、v-on的使用

<div id="app">
         <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="clickon">
         点爹
         </button>
         <form v-on:keyup.enter="onKeyup" v-on:submit.prevent="onSubmit">
             <input type="text">
             <button type="submit">submit</button>
         </form>
 </div>

var app = new Vue({
    el:'#app',
    methods:{
        clickon:function(){
            console.log('你已经点了你爹');
        },
        onEnter:function(){
            console.log('鼠标不要放在你爹身上');
        },
        onOut:function(){
            console.log('请离我远一点');
        },
        onSubmit:function(){
            console.log('已经提交');
        },
        onKeyup:function(){
            console.log('回车');
        },
    }
})

运行结果：

总结：

1. mouseenter、mouseleave、click、keyup等都是已经封装好的事件，在嵌入式GUI中也称为信号量。onEnter、onOut、clickon等都是自定义的响应事件的方法。
2. 注意方法的定义应在methods中，而不是data。
3. 在button中v-on:click=“clickon"用于绑定一个事件，v-on=”{mouseenter: onEnter, mouseleave: onOut}"是绑定多个事件的写法。
4. v-on:keyup.enter=“onKeyup” 当键盘按下enter键时执行onKeyup方法。
5. v-on:submit.prevent=“onSubmit” 当点击submit时，会执行自动提交方法（该方法是封装在submit）中的，submit.prevent会阻止执行submit方法而是执行自定义的onSubmit方法。
6. 开发过程中可用@代替v-on