- VueJS Tutorial
- VueJS - Home
- VueJS - Overview
- VueJS - Environment Setup
- VueJS - Introduction
- VueJS - Instances
- VueJS - Template
- VueJS - Components
- VueJS - Computed Properties
- VueJS - Watch Property
- VueJS - Binding
- VueJS - Events
- VueJS - Rendering
- VueJS - Transition & Animation
- VueJS - Directives
- VueJS - Routing
- VueJS - Mixins
- VueJS - Render Function
- VueJS - Reactive Interface
- VueJS - Examples
- VueJS Useful Resources
- VueJS - Quick Guide
- VueJS - Useful Resources
- VueJS - Discussion
VueJS - 事件
v-on是添加到 DOM 元素的属性，用于监听 VueJS 中的事件。
点击事件
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "displaynumbers">Click ME</button>
<h2> Add Number 100 + 200 = {{total}}</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return this.total = this.num1+ this.num2;
}
},
});
</script>
</body>
</html>
输出
以下代码用于为 DOM 元素分配单击事件。
<button v-on:click = "displaynumbers">Click ME</button>
v-on 有一个简写形式，这意味着我们也可以按如下方式调用该事件 -
<button @click = "displaynumbers">Click ME</button>
单击按钮时，它将调用“displaynumbers”方法，该方法接收事件，我们已在浏览器中进行了相同的控制台操作，如上所示。
现在我们将检查另一个事件 mouseover mouseout。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : '',
styleobj : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods : {
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
},
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
},
});
</script>
</body>
</html>
在上面的例子中，我们创建了一个宽度和高度为100px的div。它的背景颜色为红色。鼠标悬停时，我们将颜色更改为绿色，鼠标移开时，我们将颜色更改回红色。
因此，在鼠标悬停期间，有一个方法称为changebgcolor，一旦我们将鼠标移出div，有一个方法称为originalcolor。
这是按如下方式完成的 -
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
两个事件 - mouseover 和 mouseout - 被分配给 div，如上所示。我们创建了一个 styleobj 变量，并给出了分配给 div 所需的样式。使用 v-bind:style = ”styleobj” 将同一变量绑定到 div
在changebgcolor中，我们使用以下代码将颜色更改为绿色。
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
}
使用 stylobj 变量，我们将颜色更改为绿色。
同样，下面的代码用于将其改回原来的颜色。
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
这是我们在浏览器中看到的。
当我们将鼠标悬停时，颜色将变为绿色，如下图所示。
事件修饰符
Vue 在 v-on 属性上有可用的事件修饰符。以下是可用的修饰符 -
。一次
允许事件仅执行一次。
句法
<button v-on:click.once = "buttonclicked">Click Once</button>
我们需要在调用修饰符时添加点运算符，如上面的语法所示。让我们在示例中使用它并了解一次修饰符的工作原理。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
Output:{{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
Output:{{clicknum1}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
}
});
</script>
</body>
</html>
输出
在上面的示例中，我们创建了两个按钮。带有“单击一次”标签的按钮已添加一次修饰符，而另一个按钮则没有任何修饰符。这就是按钮的定义方式。
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
第一个按钮调用方法“buttonclickedonce”，第二个按钮调用方法“buttonclicked”。
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
clicknum 和 clicknum1 中定义了两个变量。单击按钮时两者都会增加。两个变量都初始化为 0，并且显示内容如上面的输出所示。
单击第一个按钮时，变量 clicknum 增加 1。第二次单击时，该数字不会增加，因为修饰符阻止它执行或执行在单击按钮时分配的任何操作项。
单击第二个按钮时，将执行相同的操作，即变量递增。每次单击时，该值都会增加并显示。
以下是我们在浏览器中得到的输出。
。防止
句法
<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
输出
如果我们点击 clickme 链接，它会发送一条警报“锚标记被点击”，并且会在新选项卡中打开链接https://www.google.com ，如下面的屏幕截图所示。
现在这可以正常工作，即链接按我们想要的方式打开。如果我们不希望链接打开，我们需要向事件添加修饰符“prevent”，如以下代码所示。
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
添加后，如果我们点击该按钮，它会发送一条警报消息，并且不会再打开该链接。Prevent 修饰符阻止链接打开，并且仅执行分配给标记的方法。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
输出
单击链接时，它将显示警报消息，并且不再打开该网址。
事件 - 按键修饰符
VueJS 提供了关键修饰符，我们可以根据这些修饰符来控制事件处理。假设我们有一个文本框，并且我们希望仅在按 Enter 时调用该方法。我们可以通过向事件添加键修饰符来做到这一点，如下所示。
句法
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
我们要应用于事件的密钥是V-on.eventname.keyname（如上所示）
我们可以使用多个键名。例如，V-on.keyup.ctrl.enter
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
<h3> {{name}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
});
</script>
</body>
</html>
输出
在文本框中输入一些内容，我们会看到只有当我们按 Enter 时才会显示它。
自定义事件
父组件可以使用 prop 属性将数据传递给其组件，但是，当子组件发生更改时，我们需要告诉父组件。为此，我们可以使用自定义事件。
父组件可以使用v-on属性监听子组件事件。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div id = "counter-event-example">
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp"></button-counter>
</div>
</div>
<script type = "text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
</script>
</body>
</html>
输出
上面的代码展示了父组件和子组件之间的数据传输。
该组件是使用以下代码创建的。
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
有一个v-for属性，它将与 languages 数组一起循环。该数组中有一个语言列表。我们需要将详细信息发送给子组件。数组的值存储在项目和索引中。
v-bind:item = "item" v-bind:index = "index"
要引用数组的值，我们需要首先将其绑定到一个变量，并使用 props 属性引用该变量，如下所示。
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
props 属性包含数组形式的项目。我们也可以将该索引称为 -
props:[‘item’, ‘index’]
组件中还添加了一个事件，如下所示 -
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
该事件的名称是showlanguage ，它调用Vue 实例中定义的名为languagedisp的方法。
在组件中，模板定义如下 -
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
已创建一个按钮。该按钮将根据语言数组中的数量创建。单击按钮时，有一个名为 displayLanguage 的方法，并且按钮单击的项目作为参数传递给该函数。现在组件需要将单击的元素发送到父组件进行显示，具体操作如下 -
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
displayLanguage方法调用this.$emit('showlanguage', lng);
$emit用于调用父组件方法。showlanguage 方法是在组件上用 v-on 给出的事件名称。
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
我们将一个参数（即单击的语言名称）传递给主父 Vue 实例的方法，其定义如下。
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
在这里，emit 触发 showlanguage，后者又从Vue 实例方法调用languagedisp 。它将单击的语言值分配给变量languageclicked，并在浏览器中显示相同的值，如以下屏幕截图所示。
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
以下是我们在浏览器中得到的输出。
