Vue에서 일반적으로 사용되는 지침은 무엇입니까?-View.js-php.cn

집

웹 프론트엔드

View.js

Vue에서 일반적으로 사용되는 지침은 무엇입니까?

青灯夜游

Nov 25, 2020 am 11:32 AM

vue 지침

vue의 일반적인 명령에는 v-once 명령, v-show 명령, v-if 명령, v-else 명령, v-else-if 명령, v-for 명령, v-html 명령, v-text 명령, v -bind 명령, v-on 명령, v-model 명령 등

Vue에서 일반적으로 사용되는 지침은 무엇입니까?

vue.js는 공식적으로 자신을 데이터 템플릿 엔진으로 정의하고 데이터 렌더링을 위한 일련의 지침을 제공합니다.

Vue.js의 지침은 v-로 시작합니다. 지침은 몇 가지 특별한 기능을 제공합니다. 지침은 바인딩된 대상 요소에 몇 가지 특별한 동작을 추가합니다. 지시어를 특별한 HTML 속성으로 생각하세요.

지시문의 목적은 표현식 값이 변경될 때 그에 따라 특정 동작을 DOM에 적용하는 것입니다.

Vue 공통 지침 요약

1.v-once

은 데이터가 변경되면 보간 시 내용이 업데이트되지 않습니다. 그러나 이는 노드의 다른 데이터 바인딩에 영향을 미친다는 점에 유의하십시오.

<div id="app">
        <p v-once>原始值: {{msg}}</p>
        <p>后面的: {{msg}}</p>
        <input type="text" v-model="msg">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
       el: &#39;#app&#39;,
        data: {
           msg: &#39;今天的天气很好!&#39;
        }
    });

로그인 후 복사

v-once 명령을 추가해도 변경되지 않습니다.

2.v-show

및 v-if 동일합니다. 차이점은 주석 처리된 경우 v-show에 표시되지 않도록 display:none 속성이 부여된다는 것입니다! 사용법은 다음 v-if 지시문을 참조하세요. v-show와 v-if의 차이점:

v-if는 조건부 블록이 적절하게 파괴되고 다시 작성되도록 보장하기 때문에 진정한 조건부 렌더링입니다. 스위치 내부의 이벤트 리스너와 하위 구성요소는 CSS를 기반으로 간단히 전환됩니다.

v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우에는 v-show를 사용하고

, 런타임 중에 조건이 변경될 가능성이 없는 경우에는 v-if를 사용하는 것이 좋습니다.

3.v-if

v-if 뒤에 오는 것은 true 또는 false를 반환하는 표현식 또는 표현식입니다. 그리고 그 값은 true이고 fasle입니다. false이면 주석 처리됩니다. v-show는 표시되지 않도록 display:none 속성을 부여하는 것입니다! true가 정상적으로 표시됩니다.

<div id="app">
<p v-if="show">要显示出来!</p>
<p v-if="hide">不要显示出来!</p>
<p v-if="height > 1.55">小明的身高: {{height}}m</p>
<p v-if="height1 > 1.55">小明的身高: {{height1}}m</p>
<p v-if="3>2">打死你: {{height1}}m</p>
</div>
<script src="js/vue.js"></script>
<script>
   new Vue({
                   el: &#39;#app&#39;,
                 data: {
                           show: true,
                            hide: false,
                           height: 1.68,
                            height1: 1.50
                           }
});
</script>

로그인 후 복사

4.v-else

는 v-if와 함께 사용해야 하며 단독으로 사용할 수 없으며 v-if 아래에 다른 태그가 있어야 하며 오류가 보고됩니다

<div id="app">
　　<p v-if="height > 1.7">小明的身高是: {{height}}m</p>
　　<p v-else>小明的身高不足1.70m</p>
</div>
<script src="js/vue.js"></script>
<script>
　　new Vue({
　　　　　　　　el: &#39;#app&#39;,
　　　　　　　　data: {
　　　　　　　　height: 1.88
　　　　}
});
</script>

로그인 후 복사

5. v-else -if

이것은 비교적 간단합니다. 하하하, 등급을 입력하면 해당 레벨이 표시됩니다.

<div id="app">
        <p>输入的成绩对应的等级是:</p>
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 75">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               score: 90  // 优秀 良好 及格 不及格
            }
        });
    </script>

로그인 후 복사

6.v-for

데이터를 기반으로 목록을 렌더링합니다. JS에서 순회합니다. 해당 데이터 유형은

Array | Object

string일 수 있습니다. 이 명령의 값은 항목에서 특정 구문(항목, 인덱스)을 사용해야 하며 인덱스는 생략 가능합니다. item은 현재 순회하는 요소에 대한 별칭을 제공합니다(원하는 대로 이름을 지정할 수 있습니다). v-for는 v-if

<body>
        <div id="app">
            <!-- 遍历数组 -->
            <p v-for="(d,index) in msg">
                {{index +&#39;:&#39;+d}}
            </p>
            <!-- 遍历对象 -->
            <div v-for="(dd,index) in obj">
                {{index+&#39;:&#39;+dd}}
            </div>
            <!-- 遍历对象 也可以不要index索引 -->
            <div v-for="dd2 in obj">
                {{dd2}}
            </div>
            <!-- 遍历num和string -->
            <p v-for="gg in num2">{{gg}}</p>
            <p v-for="gg2 in string2">{{gg2}}</p>
             
        </div>
    </body>
    <script src="vue/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:&#39;#app&#39;,
            data:{
                msg:[123,98,25,63],
                obj:{name:&#39;敏敏&#39;,age:&#39;21&#39;,height:&#39;160&#39;},
                num2:&#39;1335454&#39;,  //注意这里不要写成了num2:1335154
                string2:&#39;xvzhiming&#39;
            }
        })
    </script>

로그인 후 복사

7.v-html

과 같은 다른 명령보다 우선순위가 높습니다. 이중 중괄호는 데이터를 HTML 코드 대신 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면

보안 문제가 발생할 수 있으므로 v-html을 주의해서 사용해야 합니다. 공식 웹사이트에서는 다음과 같이 설명합니다. 사이트에서 동적으로 렌더링되는 모든 HTML은 쉽게 노출될 수 있으므로 매우 위험할 수 있습니다. XSS 공격으로 이어집니다. 신뢰할 수 있는 콘텐츠에만 HTML 보간을 사용하고 사용자 제공 콘텐츠에는 절대 사용하지 마세요.

<div id="app" v-html="html">
　　<p v-text="msg">哈哈哈</p>  
</div>
<script type="text/javascript">
　　new Vue({
        el:&#39;#app&#39;,
        data:{
            msg:&#39;我爱敏敏！！&#39;,
            html:&#39;<p>大海森林我都不爱！</p>&#39;
            }
    })
</script>

로그인 후 복사

8.v-text

v-html 而且给一个标签加了v-html 里面包含的标签都会被覆盖。

노트에 v-text를 추가하면 태그 안의 원본 내용을 덮어쓰게 되며,

<div id="app">
    <p v-text="msg">哈哈哈</p>
</div>
<script type="text/javascript">
    new Vue({
        　　el:&#39;#app&#39;,
        　　data:{
        　　　　msg:&#39;我爱敏敏&#39;
            }
        })
</script>

로그인 후 복사

9.v-bind

사용법

<!-- 完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 --> <a :href="url">...</a>

로그인 후 복사

예

<div id="app">
     改变src alt等属性
        <img v-bind:src="imgSrc" :alt="alt">
        <img :src="imgSrc1" :alt="alt">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               imgSrc: &#39;img/img_01.jpg&#39;,
               imgSrc1: &#39;img/img_02.jpg&#39;,
               alt: &#39;我是美女&#39;
            }
        });
    </script>

로그인 후 복사

클래스 이름과 CSS 스타일 등을 바인딩할 수도 있습니다.

<div id="app">
        //v-for是一个遍历                 给他一个calss 如果index===cative class名是active，如果不等就为空
        //index 是v-for的索引
        <p v-for="(college, index) in colleges" :class="index === activeIndex ? &#39;active&#39;: &#39;&#39;">
            {{college}}
        </p>
        <p :style="{color: fontColor}">今天的天气很好!</p>
    </div>
 
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: &#39;#app&#39;,
            data: {
               colleges: [
                   &#39;iOS学院&#39;,
                   &#39;Java学院&#39;,
                   &#39;HTML5学院&#39;,
                   &#39;UI学院&#39;,
                   &#39;VR学院&#39;
               ],
                activeIndex: 0,
                fontColor: &#39;green&#39;
            }
        });
    </script>

로그인 후 복사

v-blnd가 입력에 사용되고 쓰기 방법이 더 이상 {에 래핑되지 않습니다. {}};

<body>
        <div id="app"> <br>　　　　　　　　　　　　　　//加粗的内容刚刚学时 很容易出错 注意不要加{{}}；
            原始值<input type="" name="" id="" <strong>:value=name</strong> />
             模板<input type="" name="" id="" <strong>:value=name.split(&#39;&#39;).reverse().join()</strong> />
            methods<input type="" name="" id="" <strong>:value=fz()</strong> />
            conputed<input type="" name="" id="" <strong>:value=fz2</strong> />
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:&#39;#app&#39;,
            data:{
                name:&#39;chenglianjie&#39;
            },
            methods:{
                fz(){
                    return this.name.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            },<br>　　　　　　　　　　　　　　//这是vue的计算属性 在我的博客vue分类里面有介绍
            computed:{
                fz2(){
                    return this.name.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            }
        })
    </script>

로그인 후 복사

10.v -on

나중에 블로그

<!-- 完整语法 -->
 <a v-on:click="doSomething">...</a> 
 
<!-- 缩写 --> 
<a @click="doSomething">...</a>

로그인 후 복사

11.v-model

에서 언급할 바인딩 이벤트의 몇 가지 사용법이 있습니다. v-model은 , ,

으로 제한되는 명령과 데이터의 양방향 바인딩 작업을 위한 구성 요소입니다.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7514

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

vue.js로 JS 파일을 참조하는 방법 Apr 07, 2025 pm 11:27 PM

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

Vue는 천막/텍스트 스크롤 효과를 인식합니다 Apr 07, 2025 pm 10:51 PM

CSS 애니메이션 또는 타사 라이브러리를 사용하여 VUE에서 Marquee/Text Scrolling Effects를 구현하십시오. 이 기사는 CSS 애니메이션 사용 방법을 소개합니다. & lt; div & gt; CSS 애니메이션을 정의하고 오버플로를 설정하십시오 : 숨겨진, 너비 및 애니메이션. 키 프레임을 정의하고 변환을 설정하십시오 : Translatex () 애니메이션의 시작과 끝에서. 지속 시간, 스크롤 속도 및 방향과 같은 애니메이션 속성을 조정하십시오.

VUE 버전을 쿼리하는 방법 Apr 07, 2025 pm 11:24 PM

Vue DevTools를 사용하여 브라우저 콘솔에서 vue 탭을 보면 VUE 버전을 쿼리 할 수 있습니다. npm을 사용하여 "npm list -g vue"명령을 실행하십시오. package.json 파일의 "종속성"객체에서 vue 항목을 찾으십시오. Vue Cli 프로젝트의 경우 "vue -version"명령을 실행하십시오. & lt; script & gt에서 버전 정보를 확인하십시오. vue 파일을 나타내는 html 파일의 태그.

Vue Pagination 사용 방법 Apr 08, 2025 am 06:45 AM

Pagination은 큰 데이터 세트를 작은 페이지로 나누어 성능 및 사용자 경험을 향상시키는 기술입니다. VUE에서 다음 내장 방법을 페이징에 사용할 수 있습니다. 총 페이지 수를 계산하십시오 : TotalPages () Traversal 페이지 번호 : V-For Directive 현재 페이지를 설정하려면 : CurrentPage 현재 페이지 데이터 가져 오기 : currentPagedAta ()

See all articles

Vue에서 일반적으로 사용되는 지침은 무엇입니까?

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제