Vue基本指令有哪一些，你了解几种？
发布时间：2022-04-07 15:43:14 所属栏目：语言 来源：互联网
导读：本文主要给大家分享的关于vue指令的内容，下面介绍了一些基本指令以及用法，小编认为是比较实用的，因此分享给大家作参考，感兴趣的朋友们可以了解一下。 Vue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue
|
本文主要给大家分享的关于vue指令的内容，下面介绍了一些基本指令以及用法，小编认为是比较实用的，因此分享给大家作参考，感兴趣的朋友们可以了解一下。 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 一. v-on指令 1. 基础用法 v-on是事件监听的指令, 下面来看简单用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{counter}}</h2> <button v-on:click="add"> + </button> <button v-on:click="sub"> - </button> </div> <script src="../js/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { 2. 语法糖 我们知道, v-bind指令可以简写为:, 同样v-on也可以简写, 简写为@, 如上写法可以简写如下: <button @click="add"> + </button> <button @click="sub"> - </button> 3. 事件的参数 无参方法 上面的案例都是不带参数. 如果方法没有参数, 那么我们在调用的时候可以省略括号 add方法不带参数, 调用的时候可以有如下两种写法: 调用方式2: 不带括号 <div id="app"> <button @click="print"> 打印 </button> </div> 这里和方式1的区别是, 调用方法的括号都省了.这时会是什么效果呢? 可以看到, 这时不是undefined了, 而是一个MouseEvent鼠标事件.为什么呢? 其实, 当鼠标点击按钮的时候, 页面会自动生成一个事件, 如果没有传递参数, 那么会自动将这个事件作为参数传递过了, 如果需要调用这个事件, 那么, 可以在方法入参,显示的接收event参数. （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
