vue的options選項是什麼

在vue中，options選項是指“建構選項”，是在建立Vue實例時傳入的參數，是一個對象，語法“const vm = new Vue(options)”。透過「new Vue(options)」來建立出一個Vue實例，也稱為Vue對象，該Vue實例封裝了操作元素視圖的所有操作，可透過Vue實例來輕鬆操作對應區域的視圖。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

Vue中options的作用

options是什麼

options
顧名思義就是「選項」的意思, 或稱為建構選項. 是在建立Vue實例時傳入的參數, 是一個物件.
const vm = new Vue(options)

• 無論是jquery.js 或Vue.js, 都是在js 的基礎上再次封裝對應的操作。如: 透過$('div')取得一個jQuery的div元素實例, 也稱為jQuery物件, jQuery物件包含了選項中的div元素的各種操作API,因此jQuery實例封裝的是對選項中元素的各種操作;
• 而Vue.js 在此基礎上更進一步, 封裝了對視圖的所有操作, 包括資料的讀寫、資料變化的監聽、DOM元素的更新等等, 透過new Vue (options) 來建立出一個Vue實例, 也稱為Vue物件, 此Vue實例封裝了操作元素視圖的所有操作, 可透過Vue實例來輕鬆操作對應區域的視圖;

#options的五類屬性

• #資料: data, props, propsData, computed, Watch;

• DOM: el, template, render, renderError;

• #聲明週期鉤子: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured;

• liam:rectives、filters、component;

• 組合: parent、mixins、extends、provide、inject;

##入門屬性

el（掛在點）

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

data（內部資料）支援物件和函數，優先使用函數

• 會被Vue監聽
  • 會被Vue實例代理
  • 每次data的讀寫都會被Vue監聽
  • Vue會在data變化是更新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元件：注意大小寫入）三種方式

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

常用的四個生命週鉤子函數

• 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的options選項是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！