Welche Optionen bietet Vue?

In Vue beziehen sich Optionen auf „Konstruktionsoptionen“, bei denen es sich um Parameter handelt, die beim Erstellen einer Vue-Instanz übergeben werden. Sie sind ein Objekt und die Syntax lautet „const vm = new Vue(options)“. Verwenden Sie „neue Vue(Optionen)“, um eine Vue-Instanz zu erstellen, die auch als Vue-Objekt bezeichnet wird. Diese Vue-Instanz kapselt alle Vorgänge zum Bedienen von Elementansichten. Sie können die Ansicht des entsprechenden Bereichs einfach über die Vue-Instanz bedienen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Die Rolle von Optionen in Vue

Was Optionen, ob es sich js. Beispiel: Rufen Sie eine jQuery-Div-Elementinstanz über $('div') ab, auch jQuery-Objekt genannt. Das jQuery-Objekt enthält verschiedene Operations-APIs für die div-Elemente in den Optionen, sodass die jQuery-Instanz die Operationen für die Elemente in kapselt Optionen. Verschiedene Operationen; Und Vue.js geht auf dieser Basis noch einen Schritt weiter und kapselt alle Operationen in der Ansicht, einschließlich Lesen und Schreiben von Daten, Überwachen von Datenänderungen, Aktualisieren von DOM-Elementen usw., durch neue Vue(Optionen) Erstellen Eine Vue-Instanz, auch Vue-Objekt genannt, kapselt alle Vorgänge zum Bedienen von Elementansichten. Sie können die Ansicht des entsprechenden Bereichs einfach über die fünf Arten von Attributen der Vue-Instanz bedienen

🏜 Montieren , gemountet, vor Update, aktualisiert, aktiviert, deaktiviert, vor Zerstören, zerstört, Fehler erfasst;

Direktiven, Filter, Komponenten; options
顾名思义就是“选项”的意思, 或称为构造选项. 是在创建Vue实例时传入的参数, 是一个对象.
const vm = new Vue(options) Eltern, Mixins, erweitert, bereitstellen, injizieren; ?? Proxy durch Vue-Instanzen

Alle gelesenen und geschriebenen Daten werden von Vue überwacht.
• Vue aktualisiert die Benutzeroberfläche, wenn sich die Daten ändern (Vue-Komponenten: Achten Sie auf die Größe des Schreibens) Drei Möglichkeiten

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

Verwenden Sie Vue-Dateien zum Hinzufügen von Komponentendeon4.vue-Datei

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

main.js

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

• Vier häufig verwendete Lebenszyklus-Hook-Funktionen erstellt: Instanz erscheint im Speicher Medium

montiert: Wird ausgelöst, wenn die Instanz auf der Seite erscheint

• Aktualisiert: Wird ausgelöst, wenn sich die Instanz ändertzerstört: Wird ausgelöst, wenn die Instanz zerstört wurde

• 注册全局组件
  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;)

  props (extern data) Die übergeordnete Komponente möchte Werte an die untergeordnete Gruppe übergeben

name="n" (Zeichenfolge übergeben)

• :name="n" (diese.n Daten übergeben) :fn="add ": (übergeben Sie die Funktion this.add)

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

  [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung

]

Das obige ist der detaillierte Inhalt vonWelche Optionen bietet Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!