이 기사에서는 Vue의 몇 가지 일반적인 지침에 대해 심도 있게 논의할 것입니다. 도움이 되기를 바랍니다.
먼저 Vue프레임워크에 대해 이야기해 보겠습니다. Vue는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크로, Vue의 가상 Dom 및 양방향 데이터 바인딩을 통해 모두 개발자가 사용할 수 있습니다. 빠르게 시작했는데 개인적으로 Vue 명령이 사용하기 매우 편리하다고 느꼈습니다. 오늘 글에서는 일반적으로 사용되는 Vue 명령에 대해 이야기해 보겠습니다.
우리가 어떤 언어든 처음 배울 때 for
for (let i = 0; i < arr.length; i++) {
}Vue의 v-for는 여전히 우리 js의 가장 기본적인 개념과 동일합니다. 단 두 단어 Loop
v-for for 루프 뒤의 괄호 안의 item 및 index는 for 루프의 arr[i] 및 i, 즉 각 요소에 해당합니다. 및 subscript , 뒤에 in arr 이 arr은 우리가 반복하려는 배열 중 마지막 항목입니다. :key="item.id"는 v-for의 핵심입니다. 오류를 보고하는데 Key가 있는 이유는 무엇입니까? Key가 제공할 매개변수는 무엇입니까? Key의 매개변수는 고유합니다. 즉, 반복 횟수에 관계없이 각 루프의 키를 반복할 수 없습니다. 여기서는 인덱스를 키로 사용하지 않는 것이 좋습니다. 결국 키의 기능은 두 노드를 판단하는 것입니다. 구성 요소를 업데이트할 때 동일합니까? 동일하면 재사용하고, 동일하지 않으면 이전 항목을 삭제하고 새 항목을 만듭니다. 단순 Stateless 컴포넌트 렌더링 시 핵심 컴포넌트를 추가하지 않으면 기본적으로 그 자리에서 재사용되며, 추가된 노드는 삭제되지 않지만, 목록 항목의 텍스트 값이 변경된다는 점을 알아두셔야 합니다. 성능 집약적입니다. 키를 추가한 후 비교 내용이 일치하지 않는 경우 두 개의 노드로 간주되어 이전 노드가 먼저 삭제된 후 새 노드가 추가됩니다.
<li v-for="(item,index) in arr" :key="item.id">
{{ item.name }}
</li>v-show는 부울 값을 기반으로 렌더링되고, true는 페이지에 표시되고, false는 페이지에 표시되지 않습니다. 원칙은 실제로 CSS 스타일을 제어하여 또는 해당 구성요소를 표시하거나 dispaly:"none" ，显示dispaly:"block"
<div v-show="true"> 我 dispaly:"block" 拉 </div> <div v-show="false"> 我 dispaly:"none" 拉 </div> //假装我隐藏了 你看不见我
v-if도 v-show와 유사한 부울 값을 기반으로 렌더링됩니다. false는 페이지에 표시되지 않습니다. 그러나 v-if는 게으르다. 초기 값이 false이면 구성 요소는 처음으로 렌더링되지 않습니다. 매개변수는 true가 되지만 해당 조건은 다시 false가 됩니다. 하위 구성요소는 적절하게 삭제되고 재구성됩니다. 매우 자주 전환해야 하는 경우에는 조건이 거의 변경되지 않는 경우 v-show를 사용하는 것이 좋습니다. 런타임에는 v-if 을 사용하는 것이 좋습니다. v-else<div v-if="true"> </div>
<div v-if="false"> 我被销毁了呜呜呜 </div> //假装我隐藏了 你看不见我
로그인 후 복사
를 언급하고 v-else에 대해서도 이야기했습니다. v-if 조건이 충족되지 않으면 바로 v-else로 이동합니다. 기억하세요v - else 뒤에는 등호가 올 수 없습니다. 구성요소 앞에는 v-ifv-else-if<div v-if="false"> 你看不到我啊 </div> //因为我条件不成立
<div v-else> 你能看到我 </div>
로그인 후 복사
및 v-else도 기억에 남을 것입니다. v- else-if v-if 조건이 성립되지 않으면 v-else-if로 직접 이동하여 조건이 성립되었는지 확인합니다. 구성 요소 앞에는 v-if
<p v-if="score>=90">厉害</p> <p v-else-if="score>=60">差不多</p>
<template>
<div v-once>{{count}}</div>
<button v-on:click="addCount"> 你点我count也不加 </button>
</template>
<script>
export default {
data() {
return { count: 10 }
},
methods: {
addCount: function () {
this.count += 1;
console.log('this.count:'+this.count);
}
}
}
</script><p v-text="data"> 你好你好 </p>
<p v-html="data">厉害</p>
页面显示：<p>
<h1>你好啊<h1>
</p> // 外层还是会有p标签来包裹
data:<h1>你好啊<h1>@ " 간단히 말해서 v-on은 바인딩 이벤트입니다. 여러 이벤트를 하나의 레이블에 바인딩할 수 있습니다. v-on: 첫 번째 이벤트는 이벤트이고 이벤트 뒤에는 맞춤 메서드가 옵니다
<button v-on:mouseenter='onenter' @click='leave'>click me</button>
v-bind 也有一个简便的写法就是" : " 简单来说v-on就是用于绑定数据和元素属性 ， 最常用的方法就是用于动态绑定class
<ul :class="classObject"></ul>
v-model是Vue双向绑定指令 ， 它可以在页面是输入的状态同时改变绑定data属性 ， 也会在data属性发生改变的时候也更新页面的状态 ， 我们经常在input上面能发现他的存在 ， 他的本质上其实是绑定了<input :value="test" @input="test = $event.target.value"> ， v-model后面可以跟修饰符比如 .lazy 、.trim 和 .number 这些修饰符一起使用
.lazy 将input的实时更新改为一个change事件 ， 只有失焦的时候input才会触发事件
.trim 去除字符串首尾的空格
.number 将数据转化为值类型
<input v-model="test"> <input v-model.lazy="msg" > <input v-model.trim="msg"> <input v-model.number="age" type="number">
【相关推荐：vue.js教程】
위 내용은 Vue의 몇 가지 일반적인 지침에 대해 자세히 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
