stop属性:停止冒泡只执行到此处

self:只执行当前

代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<div @click.self="box" :style="{border: 'solid 2px red'}">
<a href="http://ask.mykeji.net" @click.stop.prevent="links">简单记录</a>
</div> </div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue STOP&SELF方法使用'
}
});
var app = vue({
el:'#ask',
data:{
},
methods:{
box(){
alert('这是父级');
},
links(){
alert("这是子级");
}
}
}); </script>
</body>
</html>

Vue STOP&SELF方法使用的更多相关文章

  1. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  3. vue学习笔记(四)- cmd无法识别vue命令解决方法

    解决控制台无法识别vue命令问题 作者:狐狸家的鱼 本文链接:cmd无法识别vue命令解决方法 GitHub:sueRimn 在控制台输入vue会报以下错误: vue : 无法将“vue”项识别为 c ...

  4. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  5. Vue 生命周期方法

    一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便 ...

  6. 【转】安装Vue.js的方法

    安装vue.js的方法   一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...

  7. 千锋教育Vue组件--vue基础的方法

    课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head& ...

  8. Vue实例和方法

    github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...

  9. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

随机推荐

  1. Android数据库GreenDao的使用总结

    一.GreenDao的介绍 GreenDAO是一个开源的Android ORM(“对象/关系映射”),通过ORM(称为“对象/关系映射”),节省了我们在数据库开发过程的时间! 通过GreenDao,我 ...

  2. CMake指南

    版权申明: 本文原创首发于以下网站,您可以自由转载,但必须加入完整的版权声明 博客园:https://www.cnblogs.com/MogooStudio/ csdn博客:https://blog. ...

  3. 坚果云+typora(个人十分喜欢的一个记笔记方式)

    1.名称 坚果云 markdown--->typora 2.喜欢原因 2.1 坚果云 坚果云全平台覆盖,支持Windows.Mac.Linux.iOS(iPad及iPhone).Android. ...

  4. 默认值操作符(Freemarker的空值处理)

    默认值操作符: 使用形式例如: userName!default_expr 或 userName! 或 (userName)!default_expr 或 (userName)! 这个操作符允许你为可 ...

  5. Linux_更改时区和利用Crontab同步时间

    一.更改时区 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 二.Crontab时间同步 crontab -e   #crontab编辑 */5 ...

  6. springboot 2.0+整合RabbitMQ

    基于spring-boot 2.* 作用: 1.异步处理 2.应用解耦 3.流量削峰   相关概念介绍: Broker:它提供一种传输服务,它的角色就是维护一条从生产者到消费者的路线,保证数据能按照指 ...

  7. mysql DDL 锁表

    mysql DDL 锁表 select trx_state, trx_started, trx_mysql_thread_id, trx_query from information_schema.i ...

  8. WSGI与uWSGI的应用场景与使用方法

    WSGI  /与/  uWSGI 在阿里云上部署项目时,在通信中我们都会用到wsgi与uWSGI,这此我就带大家来了解一下wsgi与uWSGI. 对了,上次有个朋友问我Django的生命周期是什么?我 ...

  9. ReactNative: 使用输入框TextInput组件

    一.简介 一个应用程序中,输入框基本不可或缺,它衍生的搜索功能在很多APP中随处可见.在iOS开发中,使用的输入框组件是UITextView和UITextField,在React-Native中使用的 ...

  10. 软件文档写作-plantuml画用例图和时序图

    背景 当下的软件开发人员,不可避免的需要输出一些软件设计文档,作为一个软件工程专业毕业的工程师,最常用的设计工具就是UML,使用UML工具绘制一些软件相关的图,是必备技能,也是输出的技术文档中的重要组 ...