简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  Vue에서 일반적으로 사용되는 내장 명령어에 대해 이야기하는 기사 [백과사전]

Vue에서 일반적으로 사용되는 내장 명령어에 대해 이야기하는 기사 [백과사전]

青灯夜游
青灯夜游앞으로
2022-09-06 19:53:082243검색

이 글은 Vue에 내장된 모든 지침을 검토하고 요약합니다. 몇 가지 일반적인 지침을 먼저 설명하고 덜 일반적으로 사용되는 지침은 뒤에 배치합니다.

Vue에서 일반적으로 사용되는 내장 명령어에 대해 이야기하는 기사 [백과사전]

0. 보간 표현식

설명 : 보간 표현식은 Mustache 구문(예: 이중 중괄호)이라고도 하며 이중 중괄호 레이블은 해당 구성 요소 인스턴스 로 대체됩니다. msg 속성. 동시에 msg 속성이 변경될 때마다 동기적으로 업데이트됩니다. [관련 권장사항: vuejs 비디오 튜토리얼msg 属性的值。同时每次 msg 属性更改时它也会同步更新。【相关推荐：vuejs视频教程】

  b2afd68918e546cb374a1c24691a872e
    9ef6101249767d81d4698769b8f602fb
    c1a436a314ed609750bd7c7d319db4da{{message}} - {{message}}2e9b454fa8428549ca2e64dfac4625cd
    
    2606cfc876c4f7b95f34dead360db33a
    c1a436a314ed609750bd7c7d319db4da{{counter * 10}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da{{ message.split(" ").reverse().join(" ") }}2e9b454fa8428549ca2e64dfac4625cd
    
    ed385a16220899853edae7594c73287b
    872d9b32c8da191b77f57bee34da1d47
    c1a436a314ed609750bd7c7d319db4da{{getReverseMessage()}}2e9b454fa8428549ca2e64dfac4625cd
    
    a9eef1710a66a568c2ef3239283949bc
    c1a436a314ed609750bd7c7d319db4da{{ isShow ? "哈哈哈": "" }}2e9b454fa8428549ca2e64dfac4625cd
    6159835a68da9af36b165079f357645e切换65281c5ac262bf6d81768915a4a77ac0

    67ac0dbf43588ec2e5eb6f29e5b49789
    4904c3e070de047a8967787da241ac97 赋值语句 -->
    <!-- c1a436a314ed609750bd7c7d319db4da{{var name = "abc"}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da{{ if(isShow) {  return "哈哈哈" } }}2e9b454fa8428549ca2e64dfac4625cd -->
  21c97d3a051048b8e55e3c8f199a54b2

1. v-on

说明： 给元素绑定事件监听器。

缩写：@

参数： event (使用对象语法则为可选项)

修饰符：

  • .stop ——调用 event.stopPropagation()。
  • .prevent ——调用 event.preventDefault()。
  • .capture ——在捕获模式添加事件监听器。
  • .self ——只有事件从元素本身发出才触发处理函数。
  • .{keyAlias} ——只在某些按键下触发处理函数。
  • .once ——最多触发一次处理函数。
  • .left ——只在鼠标左键事件触发处理函数。
  • .right ——只在鼠标右键事件触发处理函数。
  • .middle ——只在鼠标中键事件触发处理函数。
  • .passive ——通过 { passive: true } 附加一个 DOM 事件。

详细描述：事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

  • 当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。
  • 当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
  • v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。
<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联声明 -->
<button v-on:click="doThat(&#39;hello&#39;, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button>

<!-- 停止传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button>

<!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form>

<!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" />

<!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

说明： 动态的绑定一个或多个 attribute，也可以是组件的 prop。

缩写： : 或者 . (当使用 .prop 修饰符)

修饰符：

  • .camel ——将短横线命名的 attribute 转变为驼峰式命名。
  • .prop ——强制绑定为 DOM property。3.2+
  • .attr ——强制绑定为 DOM attribute。3.2+

用途：

약어: @

매개변수: event (객체 구문 사용 시 선택 사항)

🎜🎜수정자: 🎜🎜

위 내용은 Vue에서 일반적으로 사용되는 내장 명령어에 대해 이야기하는 기사 [백과사전]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html xss if for select class 值类型 Attribute Property Event number 对象 作用域 事件 default dom innerHTML display input
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Vite Learning의 심층 분석 "의존성 스캔"다음 기사：Vite Learning의 심층 분석 "의존성 스캔"

관련 기사

더보기