vuejs에 dom을 추가하는 방법

vuejs에 dom을 추가하는 방법: 1. 먼저 new를 사용하여 인스턴스를 만듭니다. 2. dom 노드에 수동으로 마운트합니다. 3. "$appendTo/$before/$after" 및 기타 방법을 사용하여 보간합니다.

이 문서의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터

vuejs에 dom을 추가하는 방법?

vue.js를 사용하여 dom 노드를 삽입하는 방법

이 글은 주로 소개합니다. vue.js에 dom 노드를 삽입하는 방법에 대해서는 별로 설명할 것이 없지만, 자세한 소개를 살펴보겠습니다.

html 코드:

<div id="app"></div>

js 코드:

var MyComponent = Vue.extend({
 template: &#39;<p>Hello World</p>&#39;
})
var myAppendTo = Vue.extend({
template:&#39;<p>appendTo</p>&#39;
})
var myBefore = Vue.extend({
 template:&#39;<p>before</p>&#39;
})
var myAfter = Vue.extend({
 template:&#39;<p>after</p>&#39;
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount(&#39;#app&#39;);

// 手动挂载
new myAppendTo().$mount().$appendTo(&#39;#app&#39;);//appendTo
new myBefore().$mount().$before(&#39;#app&#39;);//before
new myAfter().$mount().$after(&#39;#app&#39;);//after

설명:

1. jquery의 dom 노드 삽입 방법을 비교하면 vue.js의 보간은 new를 사용하여 인스턴스를 생성해야 합니다. 먼저 $mount() 를 전달하세요. $mount() 。

2.手动挂载到dom节点中，然后使用$appendTo/$before/$after

2. dom 노드에 수동으로 마운트한 다음 $appendTo/$before/$after와 같은 메서드를 사용하여 수행합니다. 보간.

3. 돔을 운영한다는 이 아이디어는 사실 Vue가 옹호하는 방식이 아니라, Vue가 옹호하는 방식은 데이터를 조작하여 원하는 결과를 얻는 것입니다.

4. vue의 아이디어는 이 돔이 이미 존재하고 판단을 통해 표시 및 숨기기를 제어할 수 있다는 것입니다.

5. 따라서 vue를 사용할 때는 api에서 제공하는 메소드(v-if)처럼 jquery를 사용할 때 생각하는 방식을 바꿔보세요.

<ul>
 <li v-if="ok">显示</li>
 <li v-else>隐藏</li>
</ul>

(v-show)를 통해 표시 및 숨기기를 제어할 수도 있습니다:

<ul>
 <li v-show="ok">显示</li>
</ul>

그러면 v-if와 v-show의 차이점은 다음과 같습니다.

v-if 블록을 전환할 때 Vue.js에는 v-if 내의 템플릿에는 데이터 바인딩 또는 하위 구성 요소도 포함될 수 있으므로 부분 컴파일/제거 프로세스.

v-if는 조건부 렌더링이 진정한 조건부 렌더링입니다. 전환하는 동안 조건부 블록이 조건부 블록 내의 이벤트 리스너와 하위 구성 요소를 적절하게 삭제하고 다시 빌드하도록 보장하기 때문입니다.

v-if도 게으르다: 초기 렌더링에서 조건이 false이면 아무 작업도 수행되지 않습니다. 부분 컴파일은 조건이 처음으로 true가 될 때만 시작됩니다(컴파일이 캐시됨).

이에 비해 v-show는 훨씬 간단합니다. 요소는 항상 컴파일되고 유지되며 CSS를 기반으로 간단히 전환됩니다.

일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우에는 v-show가 더 좋고, 런타임 시 조건이 변경될 가능성이 없을 경우에는 v-if가 더 좋습니다.

추천: "5개의 vue.js 비디오 튜토리얼 중 최신 선택

"🎜

위 내용은 vuejs에 dom을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!