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 () { ...
随机推荐
- LiggEasyWinApp-103-Ligg.EasyWinForm：View
首先请在VS里打开下面的文件,我们将对源码分段进行说明: View(视图):一个Function(功能)对应多个View(视图),本框架用View(视图)实现多窗体(MDI)的效果. 一个View(视 ...
- MySQL的数据库定义语法
创建数据库 在MySQL中,使用 CREATE DATABASE 或 CREATE SCHEMA 语句创建数据库 语法结构: CREATE {DATABASE|SCHEMA}[IF NOT EXIST ...
- 三大框架知识点比较（Angular, Vue, React）
点击左键 => 拖拽图片 => 新标签页查看图片 => 放大拖拽查阅
- English:Day-to-day 1014
Piracy Defy Coordination Essential Globe Silky Threat Supply Haste Ample Correspond Beloved Adjust D ...
- 【实习第十天】odoo开发基础整合
前言 发文时间是2019年7月19日.提一下学习odoo的感受,odoo目前在国内并不是很流行,且主流是在企业型软件,所以导致目前odoo在网上的文献很少,学习相对来说比其他框架吃力.以下为大家总结1 ...
- mysql数据库创建用户、赋权、修改用户密码
创建新用户 create user lisi identified by '123456'; 查看创建结果: 授权 命令格式:grant privilegesCode on dbName.tableN ...
- java之数据结构
数据结构有什么用? 现实世界的存储,我们使用的工具和建模.每种数据结构有自己的优点和缺点,想想如果Google的数据用的是数组的存储,我们还能方便地查询到所需要的数据吗?而算法,在这么多的数据中如何做 ...
- Java描述设计模式(08)：桥接模式
本文源码:GitHub·点这里 || GitEE·点这里 一.桥接模式简介 1.基础描述 桥梁模式是对象的结构模式.又称为柄体(Handle and Body)模式或接口(Interface)模式.桥 ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传（开源代码.net core3.0）
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- JavaScript 语法:松软科技前端教程
JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构. var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何 ...