vue의 옵션은 무엇입니까?

vue에서 옵션은 Vue 인스턴스를 생성할 때 전달되는 매개변수인 "구성 옵션"을 참조하며 구문은 "const vm = new Vue(options)"입니다. "new Vue(options)"를 사용하여 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에 의해 모니터링됩니다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('Deon1', {
    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;)

vue 파일을 사용하여 컴포넌트 추가
• • deon4.vue 파일

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

  main.js

  • import Deon4 from './deon4.vue'
    Vue.component('Deon1', {
      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;)

  [관련 권장 사항:
  • vuejs 비디오 튜토리얼
  ,
  • 웹 프론트 엔드 개발
  ]

위 내용은 vue의 옵션은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!