Vue.js快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43806389/article/details/86599412

vue官网：https://cn.vuejs.org/v2/guide/
提供vue的js源码。
链接: https://pan.baidu.com/s/1Zab4O9jphNSfvDEdRPuhug 提取码: j4m7

入门开始

首先创建maven工程，并且导入vue.js
在这里插入图片描述

一、显示内容

先附上我的html
在这里插入图片描述
写好之后访问页面成功展示

1.首先引入vue的js文件
2.创建vue对象，其中需要给出el和data，以上述例子来说，el:"#app"的意思为id为app的区域由vue接管，data是数据，data内数据格式为json格式
3.展示数据，使用vue的插值表达式{{}}进行展示数据

二、绑定单机事件

1.单机事件

在这里插入图片描述

1.创建vue对象，el表示给定区域，data表示数据，methods表示函数，格式为函数名:function(){
方法体 }
2.在button按钮中定义事件，使用v-on指令，后加事件类型以及方法名，格式为： v-on:click=“fun1”

2.键盘按下事件

在这里插入图片描述
首先给大家介绍$event对象，此对象与传统js的event对象一样，方法也一样，其中keyCode()方法可以获取按键对应的值，preventDefault()方法可以告知浏览器不执行此操作，具体方法可以再w3School上查阅，附上下载链接
链接: https://pan.baidu.com/s/1cAeNZdvLUMXyUdKyVEuZNA 提取码: s5yq

上述html的意思为，在input框内只能输入0-9,其他按键无效

3.鼠标移动事件和阻止事件传播

在这里插入图片描述
介绍一个js方法，event.stopPropagation()，可以阻止事件继续传播。
如果没有这个方法，当鼠标移动至文本域上，会接着触发移动到div上，需要停止传播，消除继续触发。
当然，vue也给我们提供了事件修饰符，可以不使用event这个对象来实现。
.stop指令：停止事件传播
.prevent指令：阻止默认事件进行
刚才的例子这样写也行得通：

			<div id="app">
			<div id="app">
		<div @mouseover="fun1" id="div">
			<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
		</div>
	</div>
			</div>