vue : 모델과 v-모델의 차이점

Vue에서는 모델과 v-모델이 모두 양방향 데이터 바인딩에 사용되지만 차이점이 있습니다. 모델은 양식 입력 요소, 단방향 데이터 흐름에 적용되며 .sync 수정자가 필요합니다. v-model은 모든 구성 요소와 작동하고 양방향 데이터 흐름을 가지며 구문을 단순화하고 수정자와 모니터를 제공합니다.

In Vue:model과v-modelmodel和v-model的区别

model和v-model二者都是 Vue 中用于双向数据绑定的属性，常用于表单元素的数据绑定。然而，它们之间存在一些关键区别。

model

• 简单的属性绑定，仅适用于表单输入元素（如、和</code>）。</li> <li>仅支持单向数据流（从视图到模型）。</li> <li>需要使用<code>.sync</code>修饰符来实现双向数据绑定。</li> </ul> <p><strong><code>v-model</code></strong></p> <ul> <li>Sugar 语法，用于简化双向数据绑定。</li> <li>可以用于任何类型的组件，不仅限于表单元素。</li> <li>提供了额外的功能，例如修饰符和监视器。</li> </ul> <p><strong>详细说明</strong></p> <p><strong>绑定目标：</strong></p> <ul> <li><code>model</code>只能用于表单输入元素，而<code>v-model</code>可以用于任何类型的组件。</li> </ul> <p><strong>数据流：</strong></p> <ul> <li><code>model</code>仅支持单向数据流（视图到模型），而<code>v-model</code>实现双向数据绑定。</li> </ul> <p><strong>语法：</strong></p> <ul> <li><code>model</code>使用<code>v-bind:value</code>和<code>@input</code>事件来绑定数据。</li> <li><code>v-model</code>将两者合并为一个属性，提供简洁的语法。</li> </ul> <p><strong>功能：</strong></p> <ul> <li><p><code>v-model</code>提供了额外的功能，例如：</p> <ul> <li>修饰符（例如<code>.lazy</code>和<code>.number</code>）</li> <li>监视器（例如<code>watch</code>）</li> </ul></li> </ul> <p><strong>使用场景：</strong></p> <ul> <li>当需要单向数据绑定或仅用于表单元素时，可以使用<code>model</code>。</li> <li>当需要双向数据绑定或使用其他类型组件时，可以使用<code>v-model</code>。</li> </ul> <p><strong>例程：</strong></p> <p>使用<code>model</code>绑定表单元素：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:php;toolbar:false"><code class="html"><input v-bind:value="name" @input="name = $event.target.value"></code></pre> <div class="contentsignin"> 로그인 후 복사 </div> </div> <p>使用<code>v-model</code>绑定表单元素，具有<code>.lazy</code></p> <code>model</code>과 <code>의 차이점 v -model</code>둘 다 Vue의 양방향 데이터 바인딩에 사용되는 속성이며 양식 요소의 데이터 바인딩에 자주 사용됩니다. 그러나 그들 사이에는 몇 가지 주요 차이점이 있습니다. <code>모델</code> <ul> <li>단순한 속성 바인딩, 양식 입력 요소(예:<code><input></code>,<code>)에만 적용 가능 <select></code>및<code><textarea></code>).</li> <li>단방향 데이터 흐름(뷰에서 모델로)만 지원됩니다.</li> <li>양방향 데이터 바인딩을 구현하려면<code>.sync</code>수정자를 사용해야 합니다.</li> </ul> <code>v-model</code> <ul> <li>양방향 데이터 바인딩을 단순화하는 설탕 구문.</li> <li>양식 요소뿐만 아니라 모든 유형의 구성 요소에 사용할 수 있습니다.</li> <li>수정자 및 모니터와 같은 추가 기능을 제공합니다.</li> </ul>상세 설명바인딩 대상: <ul> <li><code>model</code>은 양식 입력 요소에만 사용할 수 있습니다. 그리고<code>v-model</code>은 모든 유형의 구성 요소에 사용할 수 있습니다.</li> </ul>데이터 흐름: <ul> <li><code>모델</code>은 단방향 데이터 흐름(뷰에서 모델로)만 지원하지만<code>v - 모델</code>은 양방향 데이터 바인딩을 구현합니다.</li> </ul>구문: <ul> <li><code>model</code><code>v-bind:value</code>및<code>@input을 사용하세요.</code>데이터 바인딩 이벤트입니다.</li> <li><code>v-model</code>은 두 속성을 단일 속성으로 결합하여 간결한 구문을 제공합니다.</li> </ul>기능: <ul> <li><code>v-model</code>은 다음과 같은 추가 기능을 제공합니다: <ul> <li>수정 기호 (예:<code>.lazy</code>및<code>.number</code>)</li> <li>모니터(예:<code>watch</code>)</li> </ul></li> </ul>사용 시나리오: <ul> <li>단방향 데이터 바인딩이 필요하거나 양식 요소에만 필요한 경우<code>모델</code>을 사용할 수 있습니다. .</li> <li>양방향 데이터 바인딩이 필요하거나 다른 유형의 구성 요소를 사용하는 경우<code>v-model</code>을 사용할 수 있습니다.</li> </ul>루틴: <code>model</code>을 사용하여 양식 요소 바인딩: <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:php;toolbar:false"><code class="html"><input v-model.lazy="name"></code></pre> <div class="contentsignin"> 로그인 후 복사 </div> </div> <code>v-model</code>을 사용하여 양식 바인딩 <code>.lazy</code>수정자가 있는 요소: rrreee <p>위 내용은 vue : 모델과 v-모델의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>관련 라벨：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/ko/search?word=vue" target="_blank">vue</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;"> 원천：php.cn </div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/ko/faq/770700.html" title=""><span>이전 기사：Vue의 모델 구현 원리</span></a> <a href="//m.sbmmt.com/ko/faq/770702.html" title=""><span>다음 기사：vue에서 모델은 무엇을 의미하나요?</span></a> </div> <div class="wzconShengming"> <div class="bzsmdiv"> 본 웹사이트의 성명 </div> <div> 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. </div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle"> 저자별 최신 기사 </div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784146.html">js에서 문자열 유형으로 변환하는 방법</a> </div> <div> 2024-05-10 05:00:26 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784145.html">js의 객체와 클래스 간의 관계</a> </div> <div> 2024-05-10 04:57:21 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784144.html">js의 객체는 무엇입니까?</a> </div> <div> 2024-05-10 04:54:17 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784143.html">js의 어떤 메소드가 원래 배열을 변경합니까?</a> </div> <div> 2024-05-10 04:51:19 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784142.html">js의 클래스 사용법</a> </div> <div> 2024-05-10 04:45:28 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784141.html">js 클로저의 장점과 단점</a> </div> <div> 2024-05-10 04:39:16 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784140.html">js 클래스의 실제 사용 시나리오</a> </div> <div> 2024-05-10 04:33:20 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784139.html">js에서 document.createlement의 역할</a> </div> <div> 2024-05-10 04:30:23 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784138.html">js의 문서화 방법은 무엇입니까?</a> </div> <div> 2024-05-10 04:27:19 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/ko/faq/784137.html">js에서 문서를 사용하는 방법</a> </div> <div> 2024-05-10 04:24:18 </div></li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle"> 최신 이슈 </div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ko/wenda/173540.html" target="_blank" title="Vue 3 및 Vuetify 3은 구성 요소의 SCSS/SASS 변수에 액세스합니다." class="wdcdcTitle">Vue 3 및 Vuetify 3은 구성 요소의 SCSS/SASS 변수에 액세스합니다.</a> <a href="//m.sbmmt.com/ko/wenda/173540.html" class="wdcdcCons">Vue3 구성 요소에서 미리 정의된 변수를 사용하고 싶습니다. <template><divclass="roundedimg-container...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">에서 2023-11-17 13:52:29</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>293 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ko/wenda/173539.html" target="_blank" title="Vue 프로젝트에 모듈이 정의되지 않았습니다." class="wdcdcTitle">Vue 프로젝트에 모듈이 정의되지 않았습니다.</a> <a href="//m.sbmmt.com/ko/wenda/173539.html" class="wdcdcCons">공식 문서에 명시된 대로 npmini tvue@latest를 실행하여 새로운 Vue 애플리케이션을 만들었습니다. 그런 다음 Vue 및 Vite 웹 사이트의 가이드...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">에서 2023-11-17 12:38:53</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>2 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>394 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ko/wenda/173529.html" target="_blank" title="양식의 객체 필드 유효성 검사 - Vue 3 + Vee-validate + yes" class="wdcdcTitle">양식의 객체 필드 유효성 검사 - Vue 3 + Vee-validate + yes</a> <a href="//m.sbmmt.com/ko/wenda/173529.html" class="wdcdcCons">일부 필드가 개체 내부에 있는 양식이 있습니다. <scriptsetuplang="ts">...constschema:yup.Schema...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">에서 2023-11-16 13:56:09</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>169 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ko/wenda/173527.html" target="_blank" title="Vue 3는 Props를 기반으로 동적으로 가져옵니다." class="wdcdcTitle">Vue 3는 Props를 기반으로 동적으로 가져옵니다.</a> <a href="//m.sbmmt.com/ko/wenda/173527.html" class="wdcdcCons">아이콘 구성 요소를 생성하기 위해 unplugin-icon을 사용하고 있습니다. 일반적으로 //scriptimportIconCopyfrom'~icons/prime...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">에서 2023-11-16 11:40:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>1 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>235 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/ko/wenda/173518.html" target="_blank" title="Vue 3 Composition API - 모든 조건이 충족될 때까지 양식 제출 버튼을 비활성화합니다." class="wdcdcTitle">Vue 3 Composition API - 모든 조건이 충족될 때까지 양식 제출 버튼을 비활성화합니다.</a> <a href="//m.sbmmt.com/ko/wenda/173518.html" class="wdcdcCons">모든 입력 필드가 채워지고 오류가 없을 때까지 양식 제출 버튼을 비활성화하고 싶습니다. <button:disabled="disabled"t...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">에서 2023-11-13 09:41:53</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>3 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>438 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt"> <div class="wzczt-title"> <div> 관련 주제 </div> <a href="//m.sbmmt.com/ko/faq/zt" target="_blank">더></a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vuefzj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214322017503.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Vue 상위 구성 요소는 하위 구성 요소의 메서드를 호출합니다."></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vuefzj" class="title-a-spanl" title=""><span>Vue 상위 구성 요소는 하위 구성 요소의 메서드를 호출합니다.</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vuevif"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321856034.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue v-if"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vuevif" class="title-a-spanl" title=""><span>vue v-if</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vueqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321663953.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue2.0과 3.0의 차이점"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vueqb" class="title-a-spanl" title=""><span>vue2.0과 3.0의 차이점</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vuezjcz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321115425.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Vue 구성 요소에 값을 전달하는 방법"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vuezjcz" class="title-a-spanl" title=""><span>Vue 구성 요소에 값을 전달하는 방법</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vueshedqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214300227606.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue3.0과 2.0의 차이점"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vueshedqb" class="title-a-spanl" title=""><span>vue3.0과 2.0의 차이점</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vuecyzl"><img src="https://img.php.cn/upload/subject/202407/22/2024072214262495693.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Vue 공통 지침"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vuecyzl" class="title-a-spanl" title=""><span>Vue 공통 지침</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/vuecyzlynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214194365070.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue에서 일반적으로 사용되는 지침은 무엇입니까?"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/vuecyzlynx" class="title-a-spanl" title=""><span>vue에서 일반적으로 사용되는 지침은 무엇입니까?</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/ko/faq/mpvuehvueqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213475148622.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="mpvue와 vue의 차이점"></a><a target="_blank" href="//m.sbmmt.com/ko/faq/mpvuehvueqb" class="title-a-spanl" title=""><span>mpvue와 vue의 차이점</span></a></li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle"> 인기 추천 </div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vue 하위 구성 요소는 상위 구성 요소의 메서드를 어떻게 호출합니까?" href="//m.sbmmt.com/ko/faq/483395.html">vue 하위 구성 요소는 상위 구성 요소의 메서드를 어떻게 호출합니까?</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Vue 상위 구성 요소에서 하위 구성 요소의 메서드를 호출하는 방법" href="//m.sbmmt.com/ko/faq/483398.html">Vue 상위 구성 요소에서 하위 구성 요소의 메서드를 호출하는 방법</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vue3.0과 vue2.0의 차이점은 무엇입니까?" href="//m.sbmmt.com/ko/faq/464077.html">vue3.0과 vue2.0의 차이점은 무엇입니까?</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title=".vue란 무엇인가요?" href="//m.sbmmt.com/ko/faq/465747.html">.vue란 무엇인가요?</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vue 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법" href="//m.sbmmt.com/ko/faq/480569.html">vue 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법</a> </div></li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div> 인기 튜토리얼 </div> <a target="_blank" href="//m.sbmmt.com/ko/course.html">더></a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one"> 관련 튜토리얼 <div></div> </div> <div class="tabdiv swiper-slide" data-id="two"> 인기 추천 <div></div> </div> <div class="tabdiv swiper-slide" data-id="three"> 최신 강좌 <div></div> </div> </div> <ul class="one"> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1158.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6265067c6e11e273.png" alt="Vue.js 개발 기본 튜토리얼"></a> <div class="wzrthree-right"> <a target="_blank" title="Vue.js 개발 기본 튜토리얼" href="//m.sbmmt.com/ko/course/1158.html">Vue.js 개발 기본 튜토리얼</a> <div class="wzrthreerb"> <div> 61748 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="1158"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1172.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be301380a22627.png" alt="vue+tp는 실시간 전염병 동적 지도를 분리하고 개발합니다."></a> <div class="wzrthree-right"> <a target="_blank" title="vue+tp는 실시간 전염병 동적 지도를 분리하고 개발합니다." href="//m.sbmmt.com/ko/course/1172.html">vue+tp는 실시간 전염병 동적 지도를 분리하고 개발합니다.</a> <div class="wzrthreerb"> <div> 9112 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="1172"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1455.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png" alt="당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]"></a> <div class="wzrthree-right"> <a target="_blank" title="당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]" href="//m.sbmmt.com/ko/course/1455.html">당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]</a> <div class="wzrthreerb"> <div> 137759 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="1455"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1219.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/625e657f3bd5c128.jpg" alt="Vue 3.0 신규 실기 강좌 - 시즌 2"></a> <div class="wzrthree-right"> <a target="_blank" title="Vue 3.0 신규 실기 강좌 - 시즌 2" href="//m.sbmmt.com/ko/course/1219.html">Vue 3.0 신규 실기 강좌 - 시즌 2</a> <div class="wzrthreerb"> <div> 57285 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="1219"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1249.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611c49cb96f804.jpg" alt="VuePress: 30분 안에 Vue 정적 웹사이트 만들기"></a> <div class="wzrthree-right"> <a target="_blank" title="VuePress: 30분 안에 Vue 정적 웹사이트 만들기" href="//m.sbmmt.com/ko/course/1249.html">VuePress: 30분 안에 Vue 정적 웹사이트 만들기</a> <div class="wzrthreerb"> <div> 15660 <b class="kclbcollectb"></b> </div> <div class="courseICollection" data-id="1249"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> <ul class="two" style="display: none;"> <li><a target="_blank" href="//m.sbmmt.com/ko/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"></a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="//m.sbmmt.com/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div> 1394825 학습 시간 </div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"></a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="//m.sbmmt.com/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div> 2349055 학습 시간 </div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"></a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="//m.sbmmt.com/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div> 493193 학습 시간 </div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/901.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"></a> <div class="wzrthree-right"> <a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="//m.sbmmt.com/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a> <div class="wzrthreerb"> <div> 213410 학습 시간 </div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/234.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PS 비디오 튜토리얼을 처음부터 마스터하세요"></a> <div class="wzrthree-right"> <a target="_blank" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" href="//m.sbmmt.com/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a> <div class="wzrthreerb"> <div> 842674 학습 시간 </div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> <ul class="three" style="display: none;"> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1648.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[웹 프런트엔드] Node.js 빠른 시작"></a> <div class="wzrthree-right"> <a target="_blank" title="[웹 프런트엔드] Node.js 빠른 시작" href="//m.sbmmt.com/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a> <div class="wzrthreerb"> <div> 3127 학습 시간 </div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1647.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"></a> <div class="wzrthree-right"> <a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="//m.sbmmt.com/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a> <div class="wzrthreerb"> <div> 2494 학습 시간 </div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1646.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go 언어 실습 GraphQL"></a> <div class="wzrthree-right"> <a target="_blank" title="Go 언어 실습 GraphQL" href="//m.sbmmt.com/ko/course/1646.html">Go 언어 실습 GraphQL</a> <div class="wzrthreerb"> <div> 1977 학습 시간 </div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1645.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다"></a> <div class="wzrthree-right"> <a target="_blank" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" href="//m.sbmmt.com/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a> <div class="wzrthreerb"> <div> 465 학습 시간 </div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> <li><a target="_blank" href="//m.sbmmt.com/ko/course/1644.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬"></a> <div class="wzrthree-right"> <a target="_blank" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" href="//m.sbmmt.com/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a> <div class="wzrthreerb"> <div> 10796 학습 시간 </div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> </div> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div> 최신 다운로드 </div> <a href="//m.sbmmt.com/ko/xiazai">더></a> </div> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef"> 웹 효과 <div></div> </div> <div class="swiper-slide" data-id="twof"> 웹사이트 소스 코드 <div></div> </div> <div class="swiper-slide" data-id="threef"> 웹사이트 자료 <div></div> </div> <div class="swiper-slide" data-id="fourf"> 프론트엔드 템플릿 <div></div> </div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[양식 버튼] jQuery 기업 메시지 양식 연락처 코드" href="//m.sbmmt.com/ko/xiazai/js/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과" href="//m.sbmmt.com/ko/xiazai/js/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="//m.sbmmt.com/ko/xiazai/js/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="//m.sbmmt.com/ko/xiazai/js/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드" href="//m.sbmmt.com/ko/xiazai/js/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임" href="//m.sbmmt.com/ko/xiazai/js/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="//m.sbmmt.com/ko/xiazai/js/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과" href="//m.sbmmt.com/ko/xiazai/js/8064">[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과</a> </div></li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8328" title="[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8327" title="[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8326" title="[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8325" title="[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8324" title="[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8323" title="[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8322" title="[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8321" title="[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿" target="_blank">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div></li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3078" target="_blank" title="[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)">[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3077" target="_blank" title="[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)">[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3076" target="_blank" title="[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3075" target="_blank" title="[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)">[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3074" target="_blank" title="[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)">[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3073" target="_blank" title="[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)">[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3072" target="_blank" title="[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/sucai/3071" target="_blank" title="[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)">[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)</a> </div></li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8328" target="_blank" title="[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8327" target="_blank" title="[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8326" target="_blank" title="[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8325" target="_blank" title="[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8324" target="_blank" title="[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8323" target="_blank" title="[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8322" target="_blank" title="[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/ko/xiazai/code/8321" target="_blank" title="[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div></li> </ul> </div> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/ko/about/us.html" rel="nofollow" target="_blank" title="회사 소개" class="cBlack">회사 소개</a> <a href="//m.sbmmt.com/ko/about/disclaimer.html" rel="nofollow" target="_blank" title="부인 성명" class="cBlack">부인 성명</a> <a href="//m.sbmmt.com/ko/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！ </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all"> </body> </html>