vue.js 中 如何阻止默认事件？

JavaScript06

vue.js 中 如何阻止默认事件？,第1张

文档上说了在事件后面加上 .prevent就可以阻止默认事件了。

比如 ：

<!-- 阻止单击事件冒泡 -->

<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>

1、我这里就不去请求服务器了.我觉得解析服务器的JSON数据，其明白最基本的原理即可有同样的效果。

2、我这里就写一个JSON字符串。

3、然后我们用$.each遍历这个json对象，但是在遍历的时候你会发现遍历不了。原因是因为要先解析成JS字符串。用JSON.parse()。

4、解析之后我们才可以去用$.each去遍历出来。

5、我们到浏览器里控制器里可以看到结果。对应的key 跟 value都已经打印出来了。现在你就可以去渲染页面了。从服务器来的数据也是一样。首先先解析，解析完了遍历.然后打印出来看下，之后在渲染。

用v-on指令或者@监听DOM事件，并在触发时运行一些JavaScript代码；

参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定

Vue中的事件修饰符：

1、prevent：阻止默认事件（常用）；

2、stop：阻止事件冒泡（常用）；

3、once：事件只触发一次（常用）；

4、capture：使用事件的捕获模式；

5、self：只有event.target是当前操作的元素时才触发事件；

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

Vue中常用的按键别名：

回车 =>enter、删除 =>delete (捕获“删除”和“退格”键)、退出 =>esc、空格 =>space、换行 =>tab (特殊，必须配合keydown去使用)、上 =>up、下 =>down、左 =>left、右 =>right等。

代码案例

模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。

代码案例

通过watch来响应数据的变化。

代码案例

class样式，写法:class="xxx" ，其中xxx可以是字符串、对象、数组。

1、字符串写法适用于：类名不确定，要动态获取。

2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式，写法：:style="{fontSize: xxx}"，其中xxx是动态值；:style="[a,b]"其中a、b是样式对象。

代码案例