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. js 回调地狱的另类解决方案尝试

    例如 通过学生获取学生所在学校信息,需要先查询学生所在班级,再通过班级查询所在学校信息.js代码类似写法如下: function getStudentSchool(id) { ajax.get(&qu ...

  2. Cnblogs图片无法上传

      2019年5月28日以前的两三个月时间,使用cnblogs原来的接口时,提示图片无法上传,空间不足,实在没办法了,自己实现了博客代理,发现上传图片时返回了503错误,只好先把图片传到其它服务器,再 ...

  3. 2019/12/16学习内容摘要（Vim）

    一,Vim与vi的区别 vim可以当作vi的升级版本,他可以用多种颜色的方式来显示一些特殊的信息. vim会依据文件扩展名或者是文件内的开头信息, 判断该文件的内容而自动的执行该程序的语法判断式,再以 ...

  4. [Go] 轻量服务器框架tcp的粘包问题 封包与拆包

    tcp传输的数据是以流的形式传输的,因此就没有办法判断到哪里结束算是自己的一个消息,这样就会出现粘包问题,多个包粘在一起了 可以使用这样一个自定义的形式来解决,一个消息分为 head+body  he ...

  5. Centos 7.5私有域名服务器部署（coredns+etcd）

    单机配置: 一.安装etcd:   1.安装 yum install etcd -y   2.启动 systemctl start etcd   3.设置开机启动 systemctl enable e ...

  6. java之递归

    什么是递归 递归:指在当前方法内调用自己的这种现象. 递归的分类: 递归分为两种,直接递归和间接递归. 直接递归称为方法自身调用自己. 间接递归可以A方法调用B方法,B方法调用C方法,C方法调用A方法 ...

  7. js中call、apply、bind到底有什么区别？bind返回的方法还能修改this指向吗？

     壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...

  8. ej3-0开端

    开始 编码多年,总有一些最佳实践,Java也是,比如设计模式,比如Effective Java 3 (ej3) . 设计模式先后看过<大话设计模式>,<HeadFirst 设计模式& ...

  9. Github新项目Dress（好耶是女装）

    面向可爱的蓝孩子 (/ω＼) 的 git 学习实践项目,包含了600多位蓝孩子的女装照,访问前做好心理准备. 每个人都可以成为这个项目的参与者 访问地址:https://github.com/kome ...

  10. el-dialog模态窗点击空白不消失

    通过查阅ElementUI的官方文档,可以发现Dialog对话框组件提供了一个close-on-click-modal属性来设置el-dialog模态窗点击空白不消失. <el-dialog : ...