vueのオプションは何ですか?

vue では、options オプションは、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 であっても、対応する操作は js ベースで再度カプセル化されます。例: $('div') を通じて jQuery div 要素インスタンスを取得します。これは、jQuery オブジェクトとも呼ばれます。jQuery オブジェクトには、オプションの div 要素に対するさまざまな操作 API が含まれているため、jQuery インスタンスは、要素に対する操作をカプセル化します。さまざまな操作;

• そして、Vue.js はこれに基づいてさらに一歩進んで、新しい Vue を介して、データの読み取りと書き込み、データ変更の監視、DOM 要素の更新など、ビュー上のすべての操作をカプセル化します。 (オプション) Vue オブジェクトとも呼ばれる Vue インスタンスを作成します。この Vue インスタンスは、要素ビューを操作するためのすべての操作をカプセル化します。Vue インスタンスを通じて、対応する領域のビューを簡単に操作できます;

オプションの 5 種類の属性

##Data:
• data, props, propsData, computed 、Watch;

DOM:
• el、template、render、renderError;

ライフサイクル フック:
• beforeCreate、create、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured;

#Resources:
• ディレクティブ、フィルター、コンポーネント;

組み合わせ:
• 親、ミックスイン、拡張、提供、注入;

#属性の開始

#el (ハングポイント)

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;)

  methods (メソッド) イベント処理関数または通常の関数

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

• components (vue コンポーネント: pay)サイズに注意 Write) 3 つの方法

注册全局组件
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: インスタンスがメモリに表示されます

• 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 (外部データ) 親コンポーネントは値

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 ビデオ チュートリアル 、 Web フロントエンド開発]

  以上がvueのオプションは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。