Vue의 Options 사용 설명

4613 단어 VueOptions
el:마운트 포인트
$mount와 교체 관계

new Vue({
 el: "#app"
});

new Vue({}).$mount('#app')
주: 마운트 지점으로 선택된 요소, index에서.html에 있는 그 요소에는 원래 내용이 있는데 렌더링할 때 사라진다(인터넷 속도가 느려서 볼 수 있다). 이 vue 실례에 대응하는 내용에 덮어씌워진다.
데이터: 내부 데이터
지원 대상 및 함수, 우선 함수

new Vue({
 // 
 data() {
  return {
   n: 0,
  }
 }
}).$mount("#app");
주: 함수를 최대한 쓸 수 있습니다. 그렇지 않으면 BUG가 있을 수 있습니다.
methods: 메서드
이벤트 처리 함수

new Vue({
   data (){
    return{
      n:0
    }
   },
  template:`
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
    </div>
  `,
 //add methods 
  methods:{
     add(){
       this.n+=1
     }
  }
}).$mount('#app')
일반 함수:methods 대체 filter

import Vue from "vue";
Vue.config.productionTip = false;

new Vue({
 data() {
  return {
   n: 0,
   array: [1, 2, 3, 4, 5, 6, 7, 8]
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button> // 
 <hr>
 {{filter()}}  // (JS filter ， )
 </div>
 `,// 
 methods: {
  add() {
   this.n += 1; // 
  },
  filter() {
   return this.array.filter(i => i % 2 === 0); // 
  }
 }
}).$mount("#app");
components: 메서드
Vue 구성 요소 사용, 대소문자 주의
(권장 사용법) 모듈화:
새 vue 파일 데모.vue, 이 vue 파일은 하나의 구성 요소입니다.
메인js에 이 vue 파일 도입
vue 실례의components에서 이것은 내가 사용할 구성 요소이며 데모라고 명명합니다
이렇게 하면 이 Vue 실례의template에서 이 구성 요소를 직접 사용할 수 있습니다 

import Vue from "vue";
import Demo from "./Demo.vue"; // vue   ---   
Vue.config.productionTip = false;

new Vue({
 components: {
  Demo // vue components ， Demo
  // Demo， Demo：Demo， Demo --ES6 
  //components: {Demo},
 },
 data() {
  return {
   n: 0
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button>
 <Demo/>  // Vue template `<Demo/>`
 </div>
 `,
 methods: {
  add() {
   this.n += 1;
  },
 }
}).$mount("#app");
갈고리 네 개

created --  
created(){
     debugger
     console.log(' ')
  },
mounted - 인스턴스가 페이지에 나타나면 (마운트됨) 트리거

 mounted(){
  debugger
     console.log(' ')
  },
업데이트 -- 인스턴스가 업데이트된 후 트리거

updated(){
     console.log(' ')
    console.log(this.n) 
  },
 // +1 ， , n
destroyed - 페이지와 메모리에서 인스턴스가 사라진 후 터치
props:외부 속성
외부 전송값message = "n"전송 문자열:message = "n"이 vue 인스턴스에 전송된this.데이터:fn="add" vue 실례에 전송된this.add 함수
예제
추가 정보: vue $options 초기화
vue 실례화 시 $options 초기화
vue/src/core/instance/init.js

 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
   startTag = `vue-perf-start:${vm._uid}`
   endTag = `vue-perf-end:${vm._uid}`
   mark(startTag)
  }

  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initInternalComponent(vm, options)
  } else {
  // $options
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
   initProxy(vm)
  } else {
   vm._renderProxy = vm
  }
 }
}
위의 Vue의 Options 용법 설명은 바로 여러분이 공유한 모든 내용입니다. 참고 부탁드리며 많은 응원 부탁드립니다.
[백준] 1110. 더하기 사이클
신경 네트워크 학습 노트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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