vue의 옵션은 무엇입니까?-프런트엔드 Q&A-php.cn

vue의 옵션은 무엇입니까?

青灯夜游

풀어 주다： 2022-12-22 20:14:01

원래의

3577명이 탐색했습니다.

vue에서 옵션은 Vue 인스턴스를 생성할 때 전달되는 매개변수인 "구성 옵션"을 참조하며 구문은 "const vm = new Vue(options)"입니다. "new Vue(options)"를 사용하여 Vue 객체라고도 불리는 Vue 인스턴스를 생성합니다. 이 Vue 인스턴스는 요소 뷰를 조작하기 위한 모든 작업을 캡슐화합니다. Vue 인스턴스를 통해 해당 영역의 뷰를 쉽게 조작할 수 있습니다.

vue의 옵션은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Vue에서 옵션의 역할

옵션이란 무엇입니까

options
顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.
const vm = new Vue(options)

jquery.js이든 Vue.js이든 해당 작업은 다음을 기반으로 다시 캡슐화됩니다. . 예: jQuery 객체라고도 하는 $('div')를 통해 jQuery div 요소 인스턴스를 가져옵니다. jQuery 객체에는 옵션의 div 요소에 대한 다양한 작업 API가 포함되어 있으므로 jQuery 인스턴스는
그리고 Vue.js는 이를 기반으로 한 단계 더 나아가 새로운 Vue(options) Create를 통해 데이터 읽기 및 쓰기, 데이터 변경 모니터링, DOM 요소 업데이트 등을 포함한 모든 작업을 캡슐화합니다. Vue 객체라고도 하는 Vue 인스턴스는 Vue 인스턴스의 5가지 유형의 속성

data : data, props, propsdata, computed, computed, watch; dom : 엘 엘, 템플릿, 렌더링, 렌더러; , 마운트됨, beforeUpdate, 업데이트됨, 활성화됨, 비활성화됨, beforeDestroy, 파괴됨, 오류 캡처됨;

리소스: 지시문, 필터, 구성 요소:
부모, 믹스인, 확장, 제공, 주입;
항목 속성
el(hanging point)

new Vue({
    el："#app"
    template:`<div>我是小明</div>`
})
可以使用$mount代替
new Vue({
    template:`<div>我是小明</div>`
}).$mount("#app")

로그인 후 복사

data(내부 데이터)는 객체와 기능을 지원하며 기능 사용에 우선순위가 부여됩니다. 는 Vue에서 모니터링됩니다.
모든 데이터 읽기 및 쓰기는 Vue에 의해 모니터링됩니다Vue는 데이터가 변경되면 UI를 업데이트합니다

对象
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }
}).$mount(&#39;#app&#39;)
函数
vue非完整版只支持函数
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount(&#39;#app&#39;)

로그인 후 복사

메서드(메서드) 이벤트 처리 함수 또는 일반 함수

new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">按钮</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    	console.log(&#39;我可以是事件处理函数也可以是普通函数&#39;)
}
        }
}).$mount(&#39;#app&#39;)

로그인 후 복사

구성 요소 (vue 컴포넌트: 쓰기 크기에 주의) 세 가지 방법

注册全局组件
Vue.component(&#39;Deon1&#39;, {
  template: "<h2>全局组件</h2>"
})
注册局部组件
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
   //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h2>组件3</h3>"
  }
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
 	<Deon3></Deon3>
    </div> 
  `
}).$mount(&#39;#app&#39;)

로그인 후 복사

<template>
  <div>我是deon.vue文件{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "组件4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

로그인 후 복사

import Deon4 from &#39;./deon4.vue&#39;
Vue.component(&#39;Deon1&#39;, {
  template: "<h2>全局组件</h2>"
})
const deon2 = {
  template: "<h2>局部组件 {{n}}</h2>",
  //在组建中data必须使用函数
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h2>组件3</h3>"
    },
    Deon4
  },
  template: `
    <div>页面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount(&#39;#app&#39;)

로그인 후 복사

일반적으로 사용되는 4가지 라이프 사이클 후크 함수

created: 인스턴스가 메모리에 나타납니다. Medium

mounted: 인스턴스가 페이지에 나타날 때 트리거됩니다.

updated: 인스턴스가 변경될 때 트리거됩니다.

destroyed: 인스턴스가 파괴될 때 트리거됩니다.

new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }，
     created() {
    console.log("实例出现在内存中了触发");
  },
  mounted() {
    console.log("实例出现在页面中触发");
  },
  updated() {
    console.log("实例出现了变化触发");
  },
  destroyed() {
    console.log("实例被销毁了触发");
  }
}).$mount(&#39;#app&#39;)

로그인 후 복사

props(외부) data) 상위 구성 요소는 하위 그룹에 값을 전달하려고 합니다. name="n"(문자열 전달)

:name="n"(this.n 데이터 전달)

:fn="add" : (this.add 함수 전달)

new Vue({
  components: {
    Deon1: {
      props: ["m"],
      template: "<div>{{m}}</div>"
    }
  },
  template: `<div><Deon1 :m="m"></Deon1></div>`,
  data: {
    m: 666
  }
}).$mount(&#39;#app&#39;)

로그인 후 복사