Vue의 Mustache 보간 구문 및 v-bind 명령에 대한 자세한 설명

이 글은 Vue의 Mustache 보간 구문과 v-bind 명령을 소개합니다. 도움이 되길 바랍니다!

1. 콧수염 보간 구문

⭐⭐mustache 구문: "beard"을 의미하며, 삽입된 태그가 콧수염처럼 보이기 때문이라고 합니다 {{}} O( ∩_∩)오하하~)

데이터를 템플릿으로 표시하기 위해 가장 일반적으로 사용되는 구문은 "Mustache" 구문(이중 중괄호) 텍스트 보간

• 에서 반환되는 개체입니다. In Vue의 반응형 시스템에 데이터가 추가됩니다. (학습 영상 공유: vue 영상 튜토리얼)
• 데이터의 데이터가 변경되면 해당 콘텐츠도 업데이트됩니다.
• Mustache는 데이터의 속성일 뿐만 아니라 JavaScript 표현식일 수도 있습니다

⭐⭐
다음과 같이 작성할 수 있습니다.

• value
• expression
• ternary 표현식
• call 메서드 함수

 <div id="app">
      <h2>{{message}}</h2>
      <h2>当前计数：{{counter}}</h2>

      <!-- 2.表达式 -->
      <h2>计数双倍：{{counter*2}}</h2>
      <h2>展示的信息:{{info.split(" ")}}</h2>

      <!-- 3.三元表达式 -->
      <h2>{{age>=18?"成年人" : "未成年人"}}</h2>

      <!-- 4.调用methods中函数 -->
      <h2>{{formatDate(time)}}</h2>
</div>

2. 바인딩 v-bind의 속성

2.1 v-bind 바인딩의 기본 속성

⭐⭐
단방향 바인딩 v-bind: 데이터는 데이터에서 페이지로만 흐를 수 있습니다

   v-를 사용할 수 있습니다. a 요소의 href 속성과 img 요소의 src 속성을 동적으로 바인딩하는 것과 같은 속성을 바인딩하기 위한 바인딩

  v-bind는 하나 이상의 속성 값을

• 바인딩하는 데 사용됩니다. ​​
• props 값 전달* * 다른 구성 요소에 (props: 구성 요소의 입력과 동일하며 나중에 배우게 됩니다)
  
  v-bind:href는 다음과 같이 작성할 수 있습니다. href 이것은 v-bind

<div id="app">
      <!-- 1.绑定img的src属性 -->
      <button @click="switchImage">切换图片</button>
      <img v-bind:src="showImgUrl" alt="" />
      <!--语法糖 v-bind: = :  -->
      <!-- 2.绑定a的href属性 -->
      <a v-bind:href="href">百度一下</a>
    </div>

2.2의 구문 설탕입니다. .v-bind 바인딩 클래스

⭐⭐

1. 기본 바인딩 클래스

<h2 :class="classes">Hello World</h2>

2. 객체 구문을 작성할 수 있는 동적 클래스

<button :class="isActive ? &#39;active&#39;:&#39;&#39;" @click="btnClick">
我是按钮
</button>

3. 객체 구문 다중 키-값. 쌍으로 동적으로 바인딩된 클래스는 일반 클래스와 동시에 사용할 수 있습니다

v-bind:class에 객체를 제공하여 동적으로 클래스를 전환할 수 있습니다

• 물론 v-bind:class도 일반 클래스 기능과 공존할 수 있습니다

• <button :class="{active:isActive}" @click="btnclick">我是按钮</button>

2.3.v-bind 바인딩 스타일

⭐⭐

1. 일반적인 HTML 작성 방법

<button class="abc cba" :class="getDynamicClasses" @click="btnClick">
我是按钮
</button>

2. 스타일의 일부 값은 데이터에서 옵니다

동적 바인딩 스타일이 뒤따릅니다.

<h2 style="color: aqua; font-size: 30px">hhh</h2>

3. 동적 바인딩 속성, 이 속성은 객체입니다

<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>

2.4.v-bind 바인딩 속성 이름

⭐⭐in 바인딩 데이터 속성 이름

속성 이름이 고정되지 않은 경우 사용: [속성 이름 ] = "value"

<h2 :style="objStyle">hhhhh</h2>

2.5.v-bind는 객체를 직접 바인딩합니다

⭐⭐객체를 전달합니다. 객체는 데이터에서 비롯됩니다. 객체의 모든 속성은 요소의 모든 속성에 바인딩됩니다

<div id="app">
      <h2 :[name]="aaaa">Hello World</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            name: "class",
          };
        },
      });
      app.mount("#app");

[추천 관련 영상 튜토리얼:

vuejs 입문 튜토리얼

, 웹 프론트엔드 소개]

위 내용은 Vue의 Mustache 보간 구문 및 v-bind 명령에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!