Vue STOP&SELF方法使用
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方法使用的更多相关文章
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- vue学习笔记(四)- cmd无法识别vue命令解决方法
解决控制台无法识别vue命令问题 作者:狐狸家的鱼 本文链接:cmd无法识别vue命令解决方法 GitHub:sueRimn 在控制台输入vue会报以下错误: vue : 无法将“vue”项识别为 c ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- Vue 生命周期方法
一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便 ...
- 【转】安装Vue.js的方法
安装vue.js的方法 一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...
- 千锋教育Vue组件--vue基础的方法
课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head& ...
- Vue实例和方法
github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...
- vue 自定义全局方法
import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...
随机推荐
- Android数据库GreenDao的使用总结
一.GreenDao的介绍 GreenDAO是一个开源的Android ORM(“对象/关系映射”),通过ORM(称为“对象/关系映射”),节省了我们在数据库开发过程的时间! 通过GreenDao,我 ...
- CMake指南
版权申明: 本文原创首发于以下网站,您可以自由转载,但必须加入完整的版权声明 博客园:https://www.cnblogs.com/MogooStudio/ csdn博客:https://blog. ...
- 坚果云+typora(个人十分喜欢的一个记笔记方式)
1.名称 坚果云 markdown--->typora 2.喜欢原因 2.1 坚果云 坚果云全平台覆盖,支持Windows.Mac.Linux.iOS(iPad及iPhone).Android. ...
- 默认值操作符(Freemarker的空值处理)
默认值操作符: 使用形式例如: userName!default_expr 或 userName! 或 (userName)!default_expr 或 (userName)! 这个操作符允许你为可 ...
- Linux_更改时区和利用Crontab同步时间
一.更改时区 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 二.Crontab时间同步 crontab -e #crontab编辑 */5 ...
- springboot 2.0+整合RabbitMQ
基于spring-boot 2.* 作用: 1.异步处理 2.应用解耦 3.流量削峰 相关概念介绍: Broker:它提供一种传输服务,它的角色就是维护一条从生产者到消费者的路线,保证数据能按照指 ...
- mysql DDL 锁表
mysql DDL 锁表 select trx_state, trx_started, trx_mysql_thread_id, trx_query from information_schema.i ...
- WSGI与uWSGI的应用场景与使用方法
WSGI /与/ uWSGI 在阿里云上部署项目时,在通信中我们都会用到wsgi与uWSGI,这此我就带大家来了解一下wsgi与uWSGI. 对了,上次有个朋友问我Django的生命周期是什么?我 ...
- ReactNative: 使用输入框TextInput组件
一.简介 一个应用程序中,输入框基本不可或缺,它衍生的搜索功能在很多APP中随处可见.在iOS开发中,使用的输入框组件是UITextView和UITextField,在React-Native中使用的 ...
- 软件文档写作-plantuml画用例图和时序图
背景 当下的软件开发人员,不可避免的需要输出一些软件设计文档,作为一个软件工程专业毕业的工程师,最常用的设计工具就是UML,使用UML工具绘制一些软件相关的图,是必备技能,也是输出的技术文档中的重要组 ...