Vue学习之路---No.5（分享心得，欢迎批评指正）

向右看齐 2022-03-30 10:16 133阅读 0赞

同样，首先我们还是回顾一下昨天讲到的东西：

**1.常用的Vue修饰器**

**2.当利用js方法不修改数据，但也可以改变视图时，我们需要整体返回再整体接收**

**（如： items.example1 = items.example1.filter(function()\{\})）**

**3.当我们不能直接对数组进行修改的时候，我们通常要么利用vue内置set（），要么利用整体接收来修改**

**4.对数组中的数据进行过滤和排序，可以用computed也可以用methods**

下面我们开始今天的内容：：：

事件和事件的方法：

<div id = example2>

<button v-on:click="greet">greet</botton>

</div>

var example-2 = new Vue(\{

el: ' \#example ',

data : \{

admin : ' vue.js '

\}

method : \{

greet : function ( event )\{

alert ( ' Hello ' + this.name + ' ! ' )

**//this在这里值vm对象**

alert(' event.target.tagName ')

**//event在这里指js原生对象**

\}

\}

\})

//这个方法可以在外部用javascript:;的方法调用

example2.greet() // -> " hello vue.js "

同时，我们也可以直接写表达式处理

<div id = " example-2 ">

<button v-on:click = "contain + = 1 ">add 1</button>

<p>\{ \{ contain \}\}</p>

</div>

el:' \#example-2 ',

data : \{

contain : .0

\}

也可以用传参的方法来处理

<div id = "example-2">

<button v-on:click= " look( 'beauti girl' ) "></button>

<button v-on:click= " look ( ' sex girl ' ) "></button>

</div>

var example2 = new Vue(\{

el: ' \#example2 ',

data\{ \}

methods : \{

look function ( message )\{

alert( message )

\}

\}

\})

我们可以总结一下，就是，如果  **v-on:click=""后面跟的方法名如果带括号，那它就是js表达式**

**如果不带括号，那它就是vue方法名**，从我们第一个例子可以看到，当后面跟的东西没带括号的时候

也 **会有一个event，这是vue内置的默认event，就算它没有传入什么值**。

但是如果是这种情况，也就是带括号的情况，如果括号里没有参数，那么也就获取不到event，如下：

<button v-on:click=" dream( 'I just wanna to run ', $event )"> dream </button>

methods : \{

dream : function( message , event )\{

if ( event ) \{

event.preventDefault()

alert ( message )

\}

\}

\}

这里就需要传参才可以~

下面我们讲一下事件修饰器：：：

// 阻止点击事件的冒泡行为

<a v-on:click.stop="doThis"></a>

// 阻止默认的表单提交

<form v-on:submit.prevent="onSubmit"></form>

// 事件修饰器可以连用

<a v-on:click.stop.prevent="doThat">

// 只需要修饰器，而无需处理方法

<form v-on:submit.prevent></form>

// 使用 capture 模式

<div v-on:click.capture="doThis">...</div>

// 仅当event.target是自身的时候才执行

// 比如，这样写了之后点击子元素就不会执行后续逻辑

<div v-on:click.self="doThat">...</div>

今天的内容稍稍有点少~~打了个电话有点久~~~请朋友们见谅；之后尽量早点开始总结输出~~明天见，goodnight~

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关超凡的IT之路_学习心得 2

超凡的IT之路\_学习心得 2

╰+哭是因爲堅強的太久メ/ 2022年12月03日 13:16/ 0 赞/ 164 阅读

相关超凡的IT之路_学习心得 1

超凡的IT之路\_学习心得 1

小灰灰/ 2022年12月03日 13:15/ 0 赞/ 157 阅读

相关 2019-5-5学习心得

对象的一个方法例如: const obj = { ["func"](a,b){ } }等价于 var obj={ fun

Dear 丶/ 2022年10月02日 14:50/ 0 赞/ 116 阅读

相关学习vue.js心得

编写时间2017-2-7 vue.js编写方式是通过html格式调用模版（元素/标签），这里面的模版可以是template的xml格式，也可以是javascript代码。

心已赠人/ 2022年07月12日 02:17/ 0 赞/ 155 阅读

相关 VUE 的学习之路

vue的安装相信很多小白都可以在官网上一步步操作，但是通过vue-cli脚手架创建完项目之后（对于我这种刚入门的小白）并不能够理解生成的文件有什么作用,这是我整理出来的希望大家

约定不等于承诺〃/ 2022年06月14日 10:20/ 0 赞/ 171 阅读

相关 vue 的学习心得

之前在使用vue的过程中一直忽视的vuex，在目前的项目中使用了，很好用。。。推荐！！！它的具体配置网上有，就不多说了。在vue打包发布的时候，字体文件（。。。。反

电玩女神/ 2022年06月04日 07:30/ 0 赞/ 176 阅读

相关 Vue学习之路---No.5（分享心得，欢迎批评指正）

同样，首先我们还是回顾一下昨天讲到的东西： 1.常用的Vue修饰器 2.当利用js方法不修改数据，但也可以改变视图时，我们需要整体返回再整体接收（如： items.ex

向右看齐/ 2022年03月30日 10:16/ 0 赞/ 134 阅读

相关 2019-5-5学习心得

对象的一个方法例如: const obj = { ["func"](a,b){ } }等价于 var obj={ fun

Myth丶恋晨/ 2022年01月07日 19:35/ 0 赞/ 182 阅读

相关 OpenCV学习之路（附加资料分享）

目录一、前言二、学习历程三、学习资料书籍网站视频教程四、学习建议入门强化灵通 -------------------- 一、前言

水深无声/ 2021年09月17日 11:32/ 0 赞/ 335 阅读

相关 HTML基础学习心得分享

开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 h1-h6 加中括号<>等标签进行定义的。 2、HT...

系统管理员/ 2021年01月27日 15:53/ 0 赞/ 652 阅读