Apakah pilihan vue?

Dalam vue, pilihan merujuk kepada "pilihan pembinaan", yang merupakan parameter yang dihantar semasa membuat tika Vue Ia adalah objek dan sintaksnya ialah "const vm = new Vue(options)". Gunakan "Vue(pilihan) baharu" untuk mencipta tika Vue, juga dipanggil objek Vue ini merangkum semua operasi untuk paparan elemen operasi Anda boleh mengendalikan paparan kawasan yang sepadan dengan mudah melalui tika Vue.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Peranan pilihan dalam Vue

Apakah pilihan

options
Seperti yang dicadangkan oleh namanya, ia bermaksud "pilihan", atau pilihan binaan Ia adalah parameter yang dihantar semasa membuat tika Vue dan merupakan objek
const vm = new Vue(options)

• Sama ada jquery.js atau Vue.js, operasi yang sepadan dikapsulkan semula berdasarkan js. Contohnya: Dapatkan contoh elemen div jQuery melalui $('div'), juga dipanggil objek jQuery Objek jQuery mengandungi pelbagai API operasi untuk elemen div dalam pilihan, jadi contoh jQuery merangkumkan operasi pada elemen dalam. Pelbagai operasi;
• Dan Vue.js melangkah lebih jauh atas dasar ini, merangkumi semua operasi pada paparan, termasuk membaca dan menulis data, memantau perubahan data, mengemas kini elemen DOM, dll., melalui Vue baharu (pilihan) untuk mencipta tika Vue, juga dipanggil objek Vue ini merangkumkan semua operasi untuk paparan elemen operasi Anda boleh mengendalikan pandangan kawasan yang sepadan dengan mudah melalui contoh Vue

Lima jenis atribut pilihan

Data:
• data, props, propsData, dikira, Tonton;

DOM:
• el, templat, render, renderError;

Kail kitaran hayat:
• sebelumBuat, dibuat, sebelumLekap, dipasang, sebelumKemas kini, dikemas kini, diaktifkan, dinyahaktifkan, sebelumMusnah, dimusnahkan, ralat Ditangkap

Sumber:
• arahan, penapis, komponen; | atribut

• el (titik gantung)

data (data dalaman) menyokong objek dan fungsi, keutamaan Menggunakan fungsi

akan dipantau oleh Vue akan diproksikan oleh instance VueSetiap kali data dibaca atau ditulis, ia akan dipantau oleh Vue

Vue akan berubah apabila data berubah Ia adalah untuk mengemas kini UI

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

• kaedah (kaedah) fungsi pengendali acara atau fungsi biasa
  • komponen (komponen vue: perhatikan huruf besar) Tiga cara
Tambah komponen menggunakan fail vue

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

• fail deon4.vue

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

main.js

Empat fungsi cangkuk kitaran hayat yang biasa digunakan

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

dicipta: Contoh muncul dalam ingatandilekapkan: dicetuskan apabila kejadian muncul pada halamandikemas kini: dicetuskan apabila kejadian berubah

dimusnahkan: dicetuskan apabila kejadian dimusnahkan

<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 './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;)

• props (data luaran) komponen induk mahu menghantar nilai kepada subkumpulan
  • name="n" (lulus dalam rentetan)
  • :name="n" (lulus dalam data ini.n)
  • :fn="add": (lulus dalam fungsi ini.add)

[Cadangan berkaitan:

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

tutorial video vuejs

,
• pembangunan bahagian hadapan web
  ]

Atas ialah kandungan terperinci Apakah pilihan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!