事件对象

一：事件对象

1·1语法：

<div @click="fun($event)"></div>

其中$event就是事件对象，主要作用是记录事件的相关信息

确定事件源使用的是 target属性

1·2：事件修饰符

v-on指令提供事件修饰符来处理dom事件

语法：

@click.修饰符="fun()"

1·3：键盘修饰符主要有：

• up（键盘上键被按下的时候触发）
• down（键盘下键被按下的时候触发）
• ctrl（ctrl键）
• enter（回车键）
• space（空格键）

 @keydown.up="up（）"

1·4：事件修饰符主要有

• prevent（阻止事件的默认行为）
• stop（阻止事件冒泡）
• captrue（与事件冒泡的方向相反，事件捕获由外到内）
• self（只会触发自己范围内的事件，不包含子元素）
• once（只会触发一次）

【注意】修饰符之间可以同时使用，前提是相互之间不影响

二：vue的过滤器

2·1：过滤器的作用：

在不改变原有数据的情况下，输出页面想要展示的格式数据

【注意：】在vue2.0的版本中，已经废弃了内置过滤器，所以一般情况下我们使用的会是自定义过滤器

2·2：过滤器的书写位置：

过滤器主要分为全局过滤器和局部过滤器

• 全局过滤器

  书写位置：在创建实例之前

  作用范围：可以在所有的vue实例中进行

  语法：

  Vue.filter("过滤器的名字"，(val)=>{
  	//val:表示需要处理的数据
  	逻辑代码
  	return  处理后的数据
  })
  

• 局部过滤器

  书写位置：在vue的实例中与el属性和data属性同级定义

  作用范围：只有在当前vue注册内容中使用

  语法：

  filters：{
  	过滤器的名字:function(val){
  		return  处理后的数据
  	}
  }
  

三：项目的环境配置

3·1;项目的创建

• node环境

• 全局下载脚手架【cmd：npm install -g @vue/cli】

• 查看版本 vue -version

• 将cmd路径切换到要创建项目的路径下

• 创建项目 vue create 项目名

• 运行项目 【必须将路径切换到你的项目下 cd 项目名即可】

• 启动项目 npm run serve

• 点击生成的链接即可

3·2：自动打开浏览器

在vue的项目的根目录下，根目录，根目录，新建一个vue.config.js

module.exports={
    devServer:{
        open:true,//自动开启
        port:8888//修改端口
    }
}

3·3：单文件组件

一个文件就是一个组件，并且这个文件是以.vue结尾的文件

一个单文件组件由三部分构成

<template>
	<div>
		我是写HTML的地方
	</div>
</template>


<script>
 export default{
 	//我是写 data methods computed watch 等
 }
</script>


<style scoped>
	/*scoped 当前样式仅对当前组件生效
	 写样式的地方*/
</style>

【以上这个模板：可以采用 <v】

3·4：第一个helloword

• components的HelloWord.vue 删除了

• 在components中新建一个我们自己的以.vue结尾的文件

• 在新建的文件中使用<v 补全代码

• 在app.vue 中删除 和helloword相关的三个内容

• 引用我们刚才写的内容

  （1）引用

  ​ （2）调用

ts的HelloWord.vue 删除了

• 在components中新建一个我们自己的以.vue结尾的文件

• 在新建的文件中使用<v 补全代码

• 在app.vue 中删除 和helloword相关的三个内容

• 引用我们刚才写的内容

  （1）引用

  ​ （2）调用

  （3）使用