Vue 实例事件简单示例
本文实例讲述了Vue 实例事件。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 实例事件</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue 实例事件</h1>
<hr>
<div id="app">
<p>
{{num}}
</p>
<p><button @click="add">add</button></p>
</div>
<p><button οnclick="reduce()">reduce</button></p>
<p><button οnclick="reduceonce()">reduceonce</button></p>
<p><button οnclick="off()">关闭事件</button></p>
</body>
</html>
<script>
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++
}
},
})
//在构造器 on 一直调用 once只能调用一次
app.$on('reduce',function(){
this.num--;
console.log('执行了reduce方法')
})
app.$once('reduceonce',function(){
this.num--;
console.log('执行了reduceonce方法')
})
function reduce(){
//emit 触发当前实例上的事件
app.$emit('reduce');
}
function reduceonce(){
app.$emit('reduceonce');
}
// $off 关闭事件
function off(){
app.$off('reduce');
console.log('关闭了reduce')
}
</script>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
-
本文向大家介绍vue 递归组件的简单使用示例，包括了vue 递归组件的简单使用示例的使用技巧和注意事项，需要的朋友参考一下 前言 递归 相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归相加，直到满足目标数条件。递归虽然能解决大部分，但弊处在于，很容易写出死循环的代码，导致爆栈。下面以我实际
-
本文向大家介绍简单的Vue异步组件实例Demo，包括了简单的Vue异步组件实例Demo的使用技巧和注意事项，需要的朋友参考一下 前言 在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。 为什么需要异步组件，道理和w
-
本文向大家介绍vue实现简单表格组件实例详解，包括了vue实现简单表格组件实例详解的使用技巧和注意事项，需要的朋友参考一下 本来想这一周做一个关于vuex的总结的，但是由于朋友反应说还不知道如何用vue去写一个组件，所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，比如一辆车有大大小小许多零件组成，那么同样的一个页面
-
本文向大家介绍jQuery简单绑定单个事件的方法示例，包括了jQuery简单绑定单个事件的方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery简单绑定单个事件的方法。分享给大家供大家参考，具体如下： PS：这里再附上javascript常见事件与功能说明的在线对照表供大家参考： javascript事件与功能说明大全： http://tools.jb51.net/table
-
本文向大家介绍JS实现点击事件统计的简单实例，包括了JS实现点击事件统计的简单实例的使用技巧和注意事项，需要的朋友参考一下 JS实现网站点击事件的统计功能。 点击事件上报，分为立即上报和延时上报，延时上报通过cookie存储。 一、配置参数，主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。 参数名称 类型 默认值 说明
-
本文向大家介绍Vue 表单控件绑定的实现示例，包括了Vue 表单控件绑定的实现示例的使用技巧和注意事项，需要的朋友参考一下 本文介绍了Vue 表单控件绑定的实现示例，感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，在用户输入