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

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

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 ? &#39;YES&#39; : &#39;NO&#39;}}  //三元运算
{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}  //字符串的反转

로그인 후 복사

<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 매개변수

이벤트가 있습니다.

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前端开发、编程基础视频）

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

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