Vue 고급 튜토리얼: v-model에 대한 자세한 설명

Share

Vue 공식 홈페이지 튜토리얼의 v-model에 대한 설명은 그다지 자세하지 않습니다. 자세히 분석하여 Vue 2.2 v-model을 소개하는 것이 이 글의 목적입니다. code>개선된 내용과 Vue에 대한 약간의 지식이 산재해 있습니다. <code>v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model改进的地方，然后穿插的再说点 Vue 的小知识。

在 Vue 中，有许多方法和 Angular 相似，这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而，Augular 中存在许多问题，在 Vue 中已经得到解决。

---

v-model 用在 input 元素上时

v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已：↓

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：↓

<input :value="sth" @input="sth = $event.target.value" />

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 sth。
如果你不知道 $event 是从哪来的，那你需要点击它再复习一下文档。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：

在给 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件

---

v-model 用在组件上时

v-model 不仅仅能在 input上用，在组件上也能使用，下面是一个和 Vue 官网教程类似的例子（在看这个例子时我们要考虑两个问题）：

实例演示.gif

父组件的 price 的初始值是 100，更改子组件的值能实时更新父组件的 price

<div id="demo">  <currency-input v-model="price"></currentcy-input>  <span>{{price}}</span></div><script src="https://cdn.bootcss.com/vue/2.3.0/vue.js?1.1.11"></script><script>Vue.component(&#39;currency-input&#39;, {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
        @input="$emit(&#39;input&#39;, $event.target.value)"
      >
    </span>
  `,
  props: [&#39;value&#39;],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
})var demo = new Vue({
  el: &#39;#demo&#39;,
  data: {
    price: 100,
  }
})</script>

---

如果你知道这两个问题的答案，那么恭喜你真正掌握了 v-model，如果你没明白，那么可以看下这段代码：↓

<currency-input v-model="price"></currentcy-input><!--上行代码是下行的语法糖
  <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->

现在你知道 value 和 input 从哪来的了吧。与上面总结的类似：

给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名

---

v-model 的缺点和解决办法

在创建类似复选框或者单选框的常见组件时，v-model就不好用了。

<input type="checkbox" v-model="sth" />

v-model 给我们提供好了 value 属性和 oninput 事件，但是，我们需要的不是 value 属性，而是 checked 属性，并且当你点击这个单选框的时候不会触发 oninput 事件，它只会触发 onchange

Vue에는 Angular와 유사한 방법이 많이 있는데, 주로 Angular가 Vue 초기 개발의 영감의 원천이었기 때문입니다. 그러나 Augular에서는 Vue에서 해결된 많은 문제가 있습니다. 🎜

---

v-model은 입력 요소에 사용됩니다.

🎜v-model양방향 데이터를 사용하는 Angular의 ng-model과 매우 유사하지만 바인딩 이지만 Vue는 단일 데이터 흐름이고 v-model은 단지 구문 설탕입니다. ↓🎜rrreee🎜코드의 첫 번째 줄은 실제로 두 번째 줄의 구문 설탕입니다. 그러면 두 번째 코드 줄은 다음과 같이 축약될 수 있습니다: ↓🎜rrreee🎜 이 코드 줄을 이해하려면 먼저 input 요소 자체에 새로 추가된 oninput 이벤트가 있다는 것을 알아야 합니다. onchange와 유사한 HTML5는 입력 상자의 내용이 변경될 때마다 oninput을 트리거하고 최신 값을 sth에 전달합니다. .
$event의 출처를 모르는 경우 해당 항목을 클릭하고 문서를 검토해야 합니다. 🎜🎜신택스 설탕과 원래 구문의 두 줄의 코드를 주의 깊게 관찰하면 결론을 내릴 수 있습니다. 🎜🎜v-model 속성을 요소에 추가하면 값이 속성으로 사용됩니다. 기본적으로 요소의 'input' 이벤트는 실시간 값 전송을 위한 트리거 이벤트로 사용됩니다🎜

---

v-model이 컴포넌트에 사용되는 경우

🎜 v-model은 입력에만 사용할 수 있는 것이 아니라 구성 요소에도 사용할 수 있습니다. 다음은 Vue 공식 웹사이트 튜토리얼과 유사한 예입니다(볼 때 두 가지 문제를 고려해야 합니다). 이 예): 🎜

예제 Demon.gif

🎜상위 구성 요소의 price 초기 값은 100입니다. 값 변경 하위 구성 요소 중 상위 구성 요소의 가격을 실시간으로 업데이트할 수 있습니다🎜 rrreee

---

🎜이 두 질문에 대한 답을 알고 계시다면 v-model을 완전히 마스터하신 것을 축하드립니다. code>를 이해하지 못한다면 다음 코드를 살펴보세요. ↓🎜rrreee🎜 이제 <code>value와 input이 어디서 왔는지 알 수 있습니다. 위에 요약한 내용과 비슷합니다. 🎜🎜컴포넌트에 v-model 속성을 추가하면 기본적으로 해당 값이 컴포넌트의 속성으로 사용되며, 바인딩 시 'input' 값이 이벤트 이름으로 사용됩니다. 이벤트를 컴포넌트에 추가🎜

---

v-model의 단점과 해결책

🎜체크박스나 라디오 버튼과 같은 일반적인 컴포넌트를 생성할 때 v-model은 사용하기 쉽지 않습니다 . 🎜rrreee🎜v-model은 value 속성과 oninput 이벤트를 제공하지만 우리에게 필요한 것은 value가 아닙니다. code code> 속성이 있지만 checked 속성이 있고 이 라디오 버튼을 클릭하면 oninput 이벤트가 트리거되지 않고 onchange 이벤트. 부끄러워요 🎜

위 내용은 Vue 고급 튜토리얼: v-model에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!