前言 最近在学习vue.js框架，学习过程中遇到一些问题，所以记下其中遇到问题的解决过程，避免以后再遇到同样的问题，分享出来也方便遇到这个问题的朋友参考，下面话不多说了，来一起看看详细的介绍： 先来看这段示例代码 <div id="wrap"><input type="text" v-on:textInput="fn"> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript">new Vue({el:#wrap,methods:{fn:function(){console...
用 v-on 指令监听 DOM 事件 注意:HTML5中不能使用v-on，换为@ （1）html代码： <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> （2）js代码： var vm = new Vue({ el: #example, data: { name: Vue.js }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // 方法内 `this` 指向 vm alert(Hello + this.name + !) // `event` 是原生...
方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件： <div id="example"><button v-on:click="greet">Greet</button> </div>我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法： var vm = new Vue({el: #example,data: {name: Vue.js},// 在 `methods` 对象中定义方法methods: {greet: function (event) {// 方法内 `this` 指向 vmalert(Hello + this.name + !)// `event` 是原生 DOM 事件...
使用v-on绑定自定义事件可以让子组件向父组件传递数据，用到了this.$emit(‘自定义的事件名称,传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/vue.js"></script> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component"> <div><p>总数是{{total}}</p><child-component @increment="incrementT...
在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码，下面我们就简单聊聊Vue.js中的监听事件是怎么处理的。 在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"><button v-on:click="count += 1">点击测试</button><p>这个按...
本文为大家分享了vue $emit 和 $on 组件通信，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type="text/javascript"> //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` <div> <span>我是A组件的数据->{{a}}</span> <input type="button" value="把A数据传给C" @...
之前关于 Vue 数据绑定原理的一点分析，最近需要回顾，就顺便发到随笔上了 在之前实现一个自己的Mvvm中，用 setter 来观测model，将界面上所有的 viewModel 绑定到 model 上。 当model改变，更新所有的viewModel，将新值渲染到界面上 。同时监听界面上通过v-model 绑定的所有 input，并通过 addEventListener事件将新值更新到 model 上，以此来完成双向绑定 。 但是那段程序除了用来理解 defineProperty，其它一文不值。没有编译节...
这个是在组件开发中遇到的问题，当时我在编写button的组件，模板是这样的： <template><button class="disable-hover button ion-button":class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]"><span class="button-inner"><slot></slot></span><div class="button-effect"></div></button> </template>使用是这样子的： <ion-button @click.native="primary()" color="primary">primary</ion-bu...
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><script src="../js/Vue.js" charset="utf-8"></script><script type="text/javascript">window.onload = function () {var vm = new Vue({el: #box,data: {},methods: {show: function (ev) {alert(ev.keyCode)}}});}</script> </head>...
用jquery的时候你会发现，页面渲染后动态生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。html: <div id="app"> <table v-for="table in tables"><tr v-for="row in table.row"><td style="width:80px;float:left" v-for="item in row"><input type="text" v-model="item.val" style="width:40px"><div style="width:40px;float:left">{{item.val}}</di...
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script><style type="text/css">#box {width: 100%;height: 2000px;}</style> </head> <div id="box"></div> <body><!-- vue监听滚动事件 --><script type="text/javasc...
前言 前几天工作中在做项目的时候，需要实现一个动态锚点的效果，具体效果如下：如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题： 1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？ 2. 如何监听页面滚动事件？ 在浏览了大量文章、进行多次尝试之后，终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法，和 Vue 生命周期中的 mounted 一、锚点实现 在实现平滑滚动之前，...
事件处理主要通过v-on这个指令来执行。 事件监听及方法处理 1.简单的可以直接内嵌在页面。 2.可以通过将方法定义在methods中，然后再v-on中执行 3.可以通过绑定给函数传递参数，还可以传递通过变量$event给函数传递原生DOM事件。 <div id="app-1"><button v-on:click="counter += 1">增加1</button><p>这个按钮被点击了{{counter}}</p><button v-on:click="great">great</button><button @click="sya(hi)">say hi</button><button ...
监听事件可以用v-on指令监听DOM事件来触发一些javascript代码。 demo: <div v-on:click="++counter">点击，增加1</div> <span>{{counter}}</span>data:{counter:0}方法事件处理器许多事件处理器的逻辑都很复杂，所以直接把javaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用 <div v-on:click="counter()">点击，增加1</div> <span>{{counter}}</span> data:{counter:0},method:{counter:function(){th...
整理文档，搜刮出一个vue事件对象、冒泡、阻止默认行为的代码，稍微整理精简一下做下分享。 事件对象 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="../js/Vue.js" charset="utf-8"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:#box,data:{},methods:{show:function(ev){alert(ev.clientX);alert(ev.clientY);}}});}</script></head><body><div ...