Quelles sont les options de vue ?

Dans vue, les options font référence aux "options de construction", qui sont des paramètres transmis lors de la création d'une instance Vue. Elles sont un objet et la syntaxe est "const vm = new Vue(options)". Utilisez "new Vue(options)" pour créer une instance Vue, également appelée objet Vue. Cette instance Vue encapsule toutes les opérations pour faire fonctionner les vues des éléments. Vous pouvez facilement utiliser la vue de la zone correspondante via l'instance Vue.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Le rôle des options dans Vue

Que sont les options

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

• Qu'il s'agisse de jquery.js ou de Vue.js, les opérations correspondantes sont à nouveau encapsulées sur la base de js. Par exemple : obtenez une instance d'élément div jQuery via $('div'), également appelé objet jQuery. L'objet jQuery contient diverses API d'opération pour les éléments div dans les options, de sorte que l'instance jQuery encapsule les opérations sur les éléments dans les options. options. Diverses opérations ;
• Et Vue.js va encore plus loin sur cette base, en encapsulant toutes les opérations sur la vue, y compris la lecture et l'écriture de données, la surveillance des modifications des données, la mise à jour des éléments DOM, etc., via le nouveau Vue(options) Create. une instance Vue, également appelée objet Vue. Cette instance Vue encapsule toutes les opérations pour les vues des éléments opérationnels. Vous pouvez facilement utiliser la vue de la zone correspondante via l'instance Vue

.

• data: data, props, propsData, calculée, Watch;

• DOM: el, template, render, renderError;

• Claim cycle hooks: beforeCreate créé, avantMont , monté, beforeUpdate, mis à jour, activé, désactivé, beforeDestroy, destroy, errorCaptured ;

• ressources : directives, filtres, composants

• combinaisons : parent, mixins, extends, provide, inject ;

Attributs d'entrée

el (point d'accrochage)

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

les données (données internes) prennent en charge les objets et les fonctions, la priorité est donnée à l'utilisation des fonctions

• sera surveillée par Vue
  • sera proxy par les instances Vue
  • Chaque donnée lue et écrite sera surveillée par Vue
  • Vue mettra à jour l'interface utilisateur lorsque les données changent

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

méthodes (méthodes) fonction de traitement d'événements ou fonction ordinaire

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

composants (composants vue : faites attention à la taille d'écriture) trois façons

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

Utilisez les fichiers vue pour ajouter des composantsfichier 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;)

Quatre fonctions de hook de cycle de vie couramment utilisées

• créé : l'instance apparaît en mémoire Medium
  • monté : déclenché lorsque l'instance apparaît dans la page
  • mis à jour : déclenché lorsque l'instance change
  • destroyed : déclenché lorsque l'instance a été détruite

  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 (externes data) Le composant parent veut transmettre des valeurs au groupe enfant

• name="n" (passer dans la chaîne)
  • :name="n" (passer dans this.n data)
  • :fn="add " : (passer la fonction 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;)

[Recommandations associées :

tutoriel vidéo vuejs

, développement web front-end]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!