Vue 개발 요점

17850 단어 전단 개발 vue.js 자바 script

1. 조건 렌 더 링 과 목록 렌 더 링
1. v - if 와 v - showv-if 명령 은 내용 을 조건 부 로 렌 더 링 하 는 데 사용 된다.이 내용 은 명령 의 표현 식 이 truthy 값 을 되 돌려 줄 때 만 렌 더 링 됩 니 다.

Vue is awesome!

되다 v-else "else 블록" 추가:

Vue is awesome!
Oh no

조건 에 따라 요 소 를 보 여 주 는 또 다른 옵션 은? v-show 지령용법 은 대체로 같다.

Hello!

다르다 v-show 의 요 소 는 항상 렌 더 링 되 고 DOM 에 보 존 됩 니 다.v-show 요소 만 간단하게 전환 하 는 CSS property display 。
v - if 와 v - show 비교（1）v-if '진짜' 조건 렌 더 링 입 니 다. 전환 과정 에서 조건 블록 안의 이벤트 모니터 와 하위 구성 요소 가 적당 하 게 소각 되 고 재 구축 되 는 것 을 확보 하기 때 문 입 니 다.（2）v-if 또한 타성 입 니 다. 초기 렌 더 링 시 조건 이 가짜 라면 아무것도 하지 않 습 니 다. 조건 이 처음으로 진짜 로 변 할 때 까지 조건 블록 을 렌 더 링 하기 시작 합 니 다.
(3) 비교 해 보면 v-show 훨씬 간단 합 니 다. 초기 조건 이 무엇이든 요 소 는 항상 렌 더 링 되 고 CSS 를 기반 으로 간단하게 전환 합 니 다.
(4) 일반적으로 말 하면 v-if 더 높 은 전환 비용 이 있 습 니 다. v-show 초기 렌 더 링 비용 이 더 높 습 니 다.따라서 잦 은 전환 이 필요 하 다 면 사용 하 라. v-show 비교적 좋다실행 중 조건 이 거의 바 뀌 지 않 으 면 사용 합 니 다. v-if 비교적 좋다.
2、v-on 명령 을 통 해 이벤트 모니터 를 추가 합 니 다. Vue 실례 에서 정 의 된 방법
3. v - model 은 폼 입력 과 응용 상태 간 의 양 방향 연결 을 실현 합 니 다.
4、v-for 명령 은 배열 의 데 이 터 를 연결 하여 항목 목록 을 렌 더 링 할 수 있 습 니 다. 하나의 배열 을 바탕 으로 목록 을 렌 더 링 할 수 있 습 니 다.
되다 v-for 대상 을 옮 겨 다 니 는 property.


  
    {
    { value }}

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

5. v - bind 는 이 요소 노드 의 title attribute 화해시키다 Vue 실례 적 message property 일치 를 유지 하 다
6. Vue 는 수 사 된 배열 의 변경 방법 을 소 포 했 기 때문에 보기 업 데 이 트 를 촉발 합 니 다.이 소 포 된 방법 은 다음 과 같다.

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

2. 사건 처리
(1) 감청 사건
1、 v-on DOM 이 벤트 를 감청 하도록 명령 하고 실행 할 때 자 바스 크 립 트 코드 를 실행 합 니 다.예시:


  
  The button above has been clicked {
    { counter }} times.

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

(2) 사건 처리 방법
그러나 많은 사건 처리 논리 가 더욱 복잡 할 수 있 기 때문에 자바 스 크 립 트 코드 를 직접 작성 합 니 다. v-on 명령 중 에는 실행 할 수 없다.그러므로 v-on 호출 이 필요 한 방법 이름 도 받 을 수 있 습 니 다.
예시:

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  //   `methods`        
  methods: {
    greet: function (event) {
      // `this`          Vue   
      alert('Hello ' + this.name + '!')
      // `event`     DOM   
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

//      JavaScript       
example2.greet() // => 'Hello Vue.js!'

(3) 이벤트 수정자
이벤트 처리 프로그램 에서 호출 event.preventDefault() 혹시 event.stopPropagation() 흔 한 수요 입 니 다.비록 우리 가 방법 에서 이 점 을 쉽게 실현 할 수 있 지만 더 좋 은 방법 은 DOM 사건 의 세부 사항 을 처리 하 는 것 이 아니 라 순수한 데이터 논리 만 있다 는 것 이다.
이 문 제 를 해결 하기 위해 Vue. js 는 v-on 이벤트 수정자 가 제공 되 었 습 니 다.앞서 언급 했 듯 이 장식 부 호 는 점 에서 시작 하 는 명령 접미사 로 표시 된다.

.stop

.prevent

.capture

.self

.once

.passive











...



...

장식 부 호 를 사용 할 때 순서 가 중요 하 다.해당 코드 는 같은 순서 로 만들어 집 니 다.그래서 v-on:click.prevent.self 모든 클릭 을 막 고, v-on:click.self.prevent 원소 자체 에 대한 클릭 만 막 을 수 있 습 니 다.

3. 폼 입력 바 인 딩
1、v-model
쓸 수 있다 v-model 명령 、

</code>   <code><select/></code>            。                      。      ，  <code>v-model</code>          。                 ，                。</p> 
  <p><code>v-model</code>                  property         ：</p> 
  <ul> 
   <li>text   textarea      <code>value</code> property   <code>input</code>   ；</li> 
   <li>checkbox   radio    <code>checked</code> property   <code>change</code>   ；</li> 
   <li>select     <code>value</code>    prop    <code>change</code>     。</li> 
  </ul> 
  <p>2、   </p> 
  <p>.lazy</p> 
  <p>      ，<code>v-model</code>     <code>input</code>                    (            )。      <code>lazy</code>    ，      <code>change</code>   _  _    ：</p> 
  <pre><code><!--  “change”   “input”    -->
<input v-model.lazy="msg"/></code></pre> 
  <p> .number</p> 
  <p id="number">                  ，    <code>v-model</code>    <code>number</code>    ：</p> 
  <pre><code><input v-model.number="age" type="number"/></code></pre> 
  <p>      ，      <code>type="number"</code>  ，HTML               。         <code>parseFloat()</code>   ，        。</p> 
  <p>.trim</p> 
  <p>                  ，    <code>v-model</code>    <code>trim</code>    ：</p> 
  <pre><code><input v-model.trim="msg"/></code></pre> 
  <p> </p> 
  <h3> 、     </h3> 
  <p>1、 Vue      ：</p> 
  <pre><code>//        button-counter     
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
    { count }} times.</button>'
})</code></pre> 
  <p>        Vue   ，       ：        <code><button-counter/></code>。          <code>new Vue</code>     Vue     ，               ：</p> 
  <pre><code><div id="components-demo">
  <button-counter/>
</div></code></pre> 
  <pre><code>new Vue({ el: '#components-demo' })</code></pre> 
  <p>2、    </p> 
  <p>         ：<strong>    </strong> <strong>    </strong>。         <code>Vue.component</code>      ：</p> 
  <pre><code>Vue.component('my-component-name', {
  // ... options ...
})</code></pre> 
  <p>                     (   <code>new Vue</code>)      Vue    ，                  。</p> 
  <p>3、  Prop        </p> 
  <p>Prop                  attribute。          prop attribute    ，               property。             ，        <code>props</code>               prop    ：</p> 
  <pre><code>Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{
    { title }}</h3>'
})</code></pre> 
  <p>                prop，            prop。      ，                   ，     <code>data</code>      。</p> 
  <p>   prop      ，                  attribute     ：</p> 
  <pre><code><blog-post title="My journey with Vue"/>
<blog-post title="Blogging with Vue"/>
<blog-post title="Why Vue is so fun"/></code></pre> 
  <p> 4、      v-model</p> 
  <p>               <code>v-model</code>         。  ：</p> 
  <pre><code><input v-model="searchText"/></code></pre> 
  <p>   ：</p> 
  <pre><code><input v-bind:value="searchText" v-on:input="searchText = $event.target.value"/></code></pre> 
  <p>       ，<code>v-model</code>     ：</p> 
  <pre><code><custom-input v-bind:value="searchText" v-on:input="searchText = $event"/></code></pre> 
  <p>        ，       <code><input/></code>   ：</p> 
  <ul> 
   <li>   <code>value</code> attribute         <code>value</code>   prop  </li> 
   <li>   <code>input</code>       ，           <code>input</code>     </li> 
  </ul> 
  <p>          ：</p> 
  <pre><code>Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input v-bind:value="value"/>
  `
})</code></pre> 
  <p>   <code>v-model</code>                    ：</p> 
  <pre><code><custom-input v-model="searchText"/></code></pre> 
  <p>5、Prop  </p> 
  <p>         prop       ，          。            ，  Vue             。                     。</p> 
  <p>     prop      ，     <code>props</code>                 ，          。  ：</p> 
  <pre><code>Vue.component('my-component', {
  props: {
    //         (`null`   `undefined`          )
    propA: Number,
    //        
    propB: [String, Number],
    //       
    propC: {
      type: String,
      required: true
    },
    //         
    propD: {
      type: Number,
      default: 100
    },
    //         
    propE: {
      type: Object,
      //                    
      default: function () {
        return { message: 'hello' }
      }
    },
    //        
    propF: {
      validator: function (value) {
        //                 
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})</code></pre> 
  <p>  prop        ，(         ) Vue             。</p> 
  <p>6、        keep-alive</p> 
  <p>                   <code>is</code> attribute         ：</p> 
  <pre><code><component v-bind:is="currentTabComponent"/></code></pre> 
  <p>             ，              ，               。</p> 
  <p>    <code><keep-alive/></code>            。</p> 
  <pre><code><!--           ！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"/>
</keep-alive></code></pre> 
  <p>7、    &  </p> 
  <p>（1）     </p> 
  <p>    <code>new Vue</code>        ，         <code>$root</code> property     。</p> 
  <p>（2）       </p> 
  <p>  <code>$root</code>   ，<code>$parent</code> property                   。        ，             ，        prop            </p> 
  <h3>  、  /   &     </h3> 
  <p>Vue    、       DOM  ，               。      ：</p> 
  <ul> 
   <li>  CSS            class</li> 
   <li>          CSS    ，  Animate.css</li> 
   <li>           JavaScript      DOM</li> 
   <li>          JavaScript    ，  Velocity.js</li> 
  </ul> 
  <p>1、         </p> 
  <p>Vue     <code>transition</code>      ，      ，              /    </p> 
  <ul> 
   <li>     (   <code>v-if</code>)</li> 
   <li>     (   <code>v-show</code>)</li> 
   <li>    </li> 
   <li>     </li> 
  </ul> 
  <p>          ：</p> 
  <pre><code><div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div></code></pre> 
  <pre><code>new Vue({
  el: '#demo',
  data: {
    show: true
  }
})</code></pre> 
  <pre><code>.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}</code></pre> 
  <p> </p> 
  <p>2、       </p> 
  <p><code><transition-group/></code>           。           ，       。                <strong><code>v-move</code> class</strong>，                。        ，     <code>name</code> attribute       ，      <code>move-class</code> attribute     。</p> 
  <p><code>v-move</code>                     ，  ：</p> 
  <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"/>

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {
    { item }}
    </li>
  </transition-group>
</div></code></pre> 
  <pre><code>new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})</code></pre> 
  <pre><code>.flip-list-move {
  transition: transform 1s;
}</code></pre> 
  <p>        ，     ，Vue        FLIP        <br/>    transforms                  。</p> 
  <p>                 ，                 。</p> 
  <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"/>

<div id="list-complete-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list-complete" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-complete-item">
      {
    { item }}
    </span>
  </transition-group>
</div></code></pre> 
  <p> </p> 
  <pre><code>new Vue({
  el: '#list-complete-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})</code></pre> 
  <pre><code>.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}</code></pre> 
  <p>         FLIP            <code>display: inline</code> 。      ，      <code>display: inline-block</code>       flex  。</p> 
  <p>3、      </p> 
  <p>       Vue          。            ，         <code><transition/></code>    <code><transition-group/></code>      ，                 。</p> 
  <p>   template      ：</p> 
  <pre><code>Vue.component('my-special-transition', {
  template: '\
    <transition name="very-special-transition" mode="out-in" v-on:before-enter="beforeEnter" v-on:after-enter="afterEnter">\
      <slot/>\
    </transition>\
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})</code></pre> 
  <p>              ：</p> 
  <pre><code>Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})</code></pre> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Chrome Extension 2 편 -- 통신

메모: 만약 여러 페이지 가 onMessage 사건 을 감청 한다 면, 어떤 사건 에 대해 서 는 sendResponse () 를 처음 호출 하 는 것 만 성공 적 으로 응답 할 수 있 고, 모든 다른 응답 은 무 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ES6 지식 점 정리 대상 의 할당 해제 응용

[Java] 접근제한자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다