Vue 명령어 시작하기: 일반적으로 사용되는 6가지 내장 명령어에 대해 이야기해 보겠습니다.

이 글은 Vue 명령을 안내하고 일반적으로 사용되는 Vue 내장 명령 6개를 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

명령 분류

지시문은 vue에서 개발자를 위해 제공하는 템플릿 구문으로, 개발자가 페이지의 기본 구조를 렌더링하는 데 도움을 주는 데 사용됩니다. (학습 동영상 공유: vuejs 동영상 튜토리얼)

에서 사용되는 데이터는 인스턴스의 data에 정의되고, 이벤트는 인스턴스

콘텐츠 렌더링 지침
• 의 methods에 정의됩니다. 개발자가 DOM 요소를 렌더링하도록 지원합니다. 텍스트 콘텐츠
• 속성 바인딩 지침: 개발자가 요소의 속성에 대한 속성 값을 동적으로 바인딩하도록 지원
• 이벤트 바인딩 지침: 개발자가 요소에 대한 이벤트를 바인딩하도록 지원
• 양방향 바인딩 지침: 개발자가 DOM을 작동하지 않고도 신속하게 양식 데이터를 얻을 수 있도록 지원합니다(데이터 소스의 변경 사항은 페이지에 동기화되고 페이지의 변경 사항도 데이터 소스에 동기화됩니다)
• 조건부 렌더링 지침: 개발자가 누르도록 지원 DOM의 표시 및 숨기기를 제어해야 함
• 목록 렌더링 명령: 개발자가 배열을 기반으로 목록 구조를 반복하고 렌더링하도록 지원

1. 콘텐츠 렌더링 명령

v-text

는 일반 텍스트 콘텐츠만 렌더링할 수 있으며 는 태그 내부의 원본 콘텐츠를 덮어씁니다.

<p v-text="gender">性别</p>

{{ }} 보간 표현식

은 일반 텍스트 콘텐츠만 렌더링할 수 있지만 는 렌더링하지 않습니다. 덮어쓰기 태그 내부의 원본 콘텐츠

<p>性别：{{ gender }}</p>

v-html

태그된 문자열을 html 콘텐츠로 렌더링할 수 있으며 태그 내부의 원본 콘텐츠를 덮어씁니다

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

2. 속성 바인딩 지침

v-bind: 또는 :

은 요소의 속성입니다.

동적 바인딩 속성 값

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->

참고:

보간 표현식 및 v-bind도 javascript 표현식

{{ 1 + 2 }}  //一元运算
{{ ok ? 'YES' : 'NO'}}  //三元运算
{{ message.split('').reverse().join('') }}  //字符串的反转

<div :id="&#39;list-&#39; + id"></div>  <!--字符串和变量的拼接-->

의 작업을 지원합니다. 3. 이벤트 바인딩 지침

v-on: 또는 @

이벤트를 요소

<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相当于vm.count ++;
            }
        }
    })
</script>

pass 매개변수

에 바인딩하려면 매개변수가 전달되지 않습니다. 기본 형식 매개변수 이벤트가 있습니다. 는 객체이며 내부의 대상 속성은 현재 바인딩된 이벤트의 DOM 요소를 가리킵니다. 매개변수 전달: 이벤트를 전달하고 유지하려면 이벤트를 덮어쓰세요. 다른 실제 매개변수를 수동으로 전달할 수 있습니다. 형식 매개변수는 선택사항입니다
• event，它是一个对象，里面的target属性指向的是当前绑定事件的DOM元素
• 传一个参：event则会被覆盖，为了能用自己传的参又能保留event，则可以手动再传一个实参$event

  <button @click="add(1, $event)">+N</button>
  ------------------------------------------------------------
  <script>
      //创建vue的实例对象
      const vm = new Vue({
          methods:{                    
              add(n,event){
                  //修改
                  this.count +=n;
  
                  //判断
                  if(this.count % 2 === 0)
                      event.target.style.color = &#39;red&#39;;
                  else
                      event.target.style.color = &#39;&#39;;
              }                    
          }
      })
  </script>

이벤트 수정자

이벤트인 경우 사용할 수 있는 수정자는 다음과 같습니다.

이벤트 수정자.prevent.stop.capture.once.self

<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

Description
기본 동작 방지(예: 링크 점프 방지, 양식 제출 방지)
이벤트 버블링 방지
캡처 모드에서 현재 이벤트 핸들러를 트리거합니다
바운드 이벤트는 한 번만 트리거됩니다.
이벤트 핸들러는 event.target이 현재일 때만 트리거됩니다. 요소 자체

키 수정자

는 키보드 이벤트가 트리거될 때만 사용할 수 있습니다. 다음은 일반적으로 사용되는 2가지

키 수정자.esc입니다. .enter

<!--举个例子-->
<!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">

설명
프레스 키보드에서 esc 키를 눌렀을 때
키보드에서 Enter 키를 눌렀을 때

4. 양방향 바인딩 명령

v-model 양식 데이터를 빠르게 가져옵니다(입력, 텍스트 영역, 선택과 같은 양식 요소에만 적용됨)

<input type="text" v-model="username">

<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

독점 수정자

v-model에만 사용할 수 있는 수정자

독점 수정자.number .trim.lazy

<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、条件渲染指令

v-show

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

<p v-if="flag">这是被 v-if 控制的元素</p>

v-else-if

配合 v-if 指令一起使用，否则将不会被识别

<div v-if="type === &#39;A&#39;">优秀</div>
<div v-else-if="type === &#39;B&#39;">良好</div>
<div v-else-if="type === &#39;C&#39;">一般</div>
<div v-else>差</div>

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

• item是 被循环的每一项 ，名字随意
• items是 待循环的数组 ，名字随意

<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:&#39;张三&#39;, gender:&#39;男&#39; },
                { id: 2, name:&#39;李四&#39;, gender:&#39;女&#39; },
                { id: 3, name:&#39;王五&#39;, gender:&#39;男&#39; }
            ]
        }
    })
</script>

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

• key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
• key 的属性值只能是 字符串/数字 类型，否则报错
• key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）

<tr v-for="(item,index) in list" :key="item.id">

（学习视频分享：web前端开发、编程基础视频）

Description
사용자가 입력한 값을 숫자형으로 자동 변환
사용자가 입력한 앞뒤 공백 문자 자동 필터링
자동으로 초점을 잃었을 때 데이터 업데이트(보통 실시간 업데이트)

위 내용은 Vue 명령어 시작하기: 일반적으로 사용되는 6가지 내장 명령어에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!