한 번의 이동으로 일반적인 Vue 지침 얻기

이 글에서는 Vue의 일반적인 지침을 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

텍스트 삽입:

v-text

요소의 innerText 속성과 동일하며 이중 라벨이어야 합니다.

HTML 삽입:

요소의 innerHTML 속성과 동일

루프 순회

v-for 사용, item 속성 외에도 몇 가지 다른 보조 속성이 있습니다.

 /* 在html中使用v-for指令进行渲染 */
/*
 普通数组
 */
  data:{
      list:[1,2,3,4,5,6]
   }
  <p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

/*
 对象数组
 */
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:&#39;zs1&#39;},
        {id:2, name:&#39;zs2&#39;},
        {id:3, name:&#39;zs3&#39;},
        {id:4, name:&#39;zs4&#39;},
        {id:5, name:&#39;zs5&#39;},
        {id:6, name:&#39;zs6&#39;},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:&#39;托尼.贾&#39;,
        gender:&#39;男&#39;
      }
 }
 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

/*
 数字
 <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
 */
<p v-for="count in 10">这是第{{count}}次循环</p>

조건부 렌더링

v-if: 요소 삽입 여부

v-show 요소 숨기기 여부 및 렌더링 CSS에 따른 요소

속성 바인딩

v-bind : 속성 이름 = "상수 || 변수 이름"

약식: 속성 이름 = "상수 || 변수 이름"

<p v-bind:属性名="变量"></p>
//可以简写成
<p :属性名="变量"></p>

//如果要赋值常量，需要给常量用单引号包起来，如
<p :属性名=" &#39;常量&#39; "></p>

양방향 바인딩: v-model

소위 양방향 바인딩은 뷰 레이어에 있다는 의미입니다. 값이 변경되면 vue의 해당 값도 변경됩니다. 값 속성이 있는 요소만 양방향 데이터에 바인딩될 수 있습니다.

바인딩 이벤트: v-on

v-on:click = "메소드 이름|| vue 내부 변수를 직접 변경",

약식: @click = "메소드 이름|| vue 내부 변수를 직접 변경"

<p v-on:click=" num = 1 "></p>
//可以简写成
<p @click=" num = 1 "></p>

요소 건너뛰기 node

v-pre: 이 요소와 해당 하위 요소의 컴파일 프로세스를 건너뜁니다. 원래 Mustache 태그를 표시하는 데 사용할 수 있습니다. 지침 없이 많은 수의 노드를 건너뛰면 컴파일 속도가 빨라집니다.

한 번만 렌더링

v-once: 요소와 구성 요소를 한 번만 렌더링합니다. 이후에 다시 렌더링할 때 요소/구성 요소와 모든 하위 요소는 정적 콘텐츠로 처리되어 건너뜁니다. 이는 업데이트 성능을 최적화하는 데 사용될 수 있습니다.

추천 학습: vue.js 튜토리얼

위 내용은 한 번의 이동으로 일반적인 Vue 지침 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!