[정리 및 공유] 효율성을 높이는 데 도움이 되는 여러 Vue 명령!

이 글은 계속해서 Vue를 배우는 데 도움이 되며, 효율성 향상에 도움이 되는 몇 가지 Vue 지침을 정리하고 공유합니다.

Vue를 사용하는 많은 학생들은 가장 쉽게 지침을 무시하는 경향이 있습니다. Vue를 처음 접하는 많은 학생들이 Vue에 접해 본 적도 없다는 점을 고려하여 v-clos를 소개하기 전에 먼저 우물을 사용하겠습니다. 알려진 v-모델 작성 작은 데모

v-model

모든 사람이 v-model에 익숙하다고 생각합니다. 간단히 말해서 v-model은 양식 컨트롤 및 구성 요소에 대한 양방향 데이터 바인딩

을 만드는 데 사용됩니다. Vue의 작은 환경을 구축하고 HTML 페이지에 Vue.js를 소개하세요

다음은 모두를 위한 작은 밤입니다:

  <div>
    <input><br>
    这里是文本框输入的值——{{message}}
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好，几何心凉!&#39;,
    },
  })</script>

매우 간단한 예이며 결과는 의심할 여지가 없습니다! [관련 권장사항: vuejs 동영상 튜토리얼, 웹 프론트엔드 개발]

이제 양방향 관계를 더 직접적으로 볼 수 있습니다

1. 콘솔에서 모델의 데이터를 변경합니다.

모델의 메시지 값을 변경하면 그에 따라 View의 값도 변경되는 것을 확인할 수 있습니다

2 텍스트 상자의 View에 있는 값을 변경하여 모델의 변경 사항을 확인합니다.

텍스트 상자를 통해 뷰의 값을 변경하면 모델의 값도 그에 따라 변경되는 것을 발견했습니다.

요약
위의 예를 통해 Vue의 양방향 바인딩에 대해 더 잘 이해하셨나요? 왜냐하면 양식 요소를 통해서만 View의 데이터를 변경할 수 있기 때문입니다. 물론 다른 양식 요소도 사용할 수 있습니다. . 하나씩 나열하지는 않겠습니다.

v-model modifier

1..lazy.lazy
我们在上面的动图中可以看到通过v-model绑定的文本框只要是文本框的值发生变化了就会更新到Model的数据中，很多时候我们可能连贯实现某种功能但是会影响我们的性能，所以我们用到了.lazy修饰符
他会在我们文本框失去焦点的时候再帮我们将文本框的值同步给Model

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
    },
  })</script>

来看一下效果

2..number
我们还是拿文本框举例，很多时候我们需要一些值让用户填写而这个值可能希望他是数字我们用于计算，这个时候很多同学想到很多办法，转换呀、输入后去判断等等等，但其实v-model中有一个修饰符就可以帮助我们完成这个需求

我们还是通过一个小栗子来看一下，首先我们希望两个文本框各输入一个数值我们进行求和

可以看一下结果

我们可以看到并不是我们想要的结果，他是作为拼接而不是求和，那么我们添加上.number修饰符来试试看

  <div>
   <h3>我是求和——{{num1+num2}}</h3>
<input><input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,
      num1: &#39;&#39;,
      num2: &#39;&#39;,

    },
  })</script>

再来看看结果

3..trim 위 애니메이션에서 v-model을 통해 바인딩하는 것을 볼 수 있습니다. 텍스트 상자의 값이 변경되면 모델 데이터로 업데이트됩니다. 특정 기능을 지속적으로 구현하지만 성능에 영향을 미칠 수 있으므로 .lazy Modifier를 사용합니다. 텍스트 상자가 초점을 잃을 때 텍스트 상자의 값을 모델에 동기화하는 데 도움이 됩니다

  <div>
   <h3>我是测试——{{message}}</h3>
<input>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;&#39;,

    },
  })</script>

효과를 살펴보겠습니다

2..number

텍스트 상자를 예로 들어보겠습니다. 사용자가 입력해야 할 값이 필요한 경우가 많으며, 이 값은 계산에 사용하는 숫자일 수 있습니다. 이때 많은 학생들은 변환, 입력 등 다양한 방법을 생각하지만 실제로는 그렇습니다. 이 요구 사항을 충족하는 데 도움이 되는 수정자가 있습니다작은 밤나무를 통해 살펴보겠습니다. 먼저 합산을 위해 두 텍스트 상자 각각에 값을 입력하려고 합니다

결과를 보실 수 있습니다

보면 알 수 있어요 이건 우리가 원하는 결과가 아니라서 합산이 아닌 접합으로 사용하고 있으니 .number 수식어를 추가해서 한번 해보세요

  <div>
   <h3>我是测试——{{message}}</h3>
  </div><script>
  var app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好几何心凉&#39;,
    },
  })</script>

결과를 살펴볼까요

3..trim

이 상대적인 비교에 익숙하실 겁니다. 공백을 제거하는 것이지만 텍스트 상자의 가운데가 아닌 양쪽 끝의 공백만 제거됩니다

rrreee🎜효과를 보세요🎜🎜🎜🎜🎜🎜 🎜팁: 🎜🎜🎜사실 여기 텍스트 상자에 바인딩되어 있습니다. v-model은 단지 구문 설탕일 뿐입니다. 텍스트 상자의 값이 완료되면 값 속성과 입력 이벤트를 사용합니다. 변경하면 입력 이벤트를 트리거하여 바인딩된 값을 변경하고 동시에 텍스트 상자의 값도 메시지에 연결됩니다. 먼저 다음 코드를 살펴보겠습니다🎜rrreee🎜그러면 페이지가 렌더링되면 다음 순간이 발생합니다🎜 🎜🎜🎜🎜 순식간에 지나갑니다🎜🎜

이 현상은 실제 개발 과정에서 발생합니다. 특히 네트워크 상태가 좋지 않거나 백엔드 인터페이스의 반응이 느려서 v-cloak을 사용합니다.

실제로 그의 원칙은 표시: 없음입니다. . 모두가 이해해야 합니다. 즉, 데이터에 바인딩된 변수가 값을 갖기 전에 Dom 요소가 숨겨져 있으므로 위의 문제는 발생하지 않습니다

(학습 동영상 공유: vuejs 입문 튜토리얼, Basic 프로그래밍 영상)

위 내용은 [정리 및 공유] 효율성을 높이는 데 도움이 되는 여러 Vue 명령!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!