vue的options選項有什么作用

這篇文章主要講解了“vue的options選項有什么作用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue的options選項有什么作用”吧！

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

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;

• 資源: directives、filters、components;

• 組合: 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('#app')
函數
vue非完整版只支持函數
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount('#app')

• methods（方法）事件處理函數或者普通函數

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

• components（vue組件：注意大小寫）三種方式

注冊全局組件
Vue.component('Deon1', {
  template: "<h3>全局組件</h3>"
})
注冊局部組件
const deon2 = {
  template: "<h3>局部組件 {{n}}</h3>",
   //在組建中data必須使用函數
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h3>組件3</h4>"
  }
  },
  template: `
    <div>頁面
    <Deon1></Deon1>
    <Deon2></Deon2>
 	<Deon3></Deon3>
    </div> 
  `
}).$mount('#app')

使用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: "<h3>全局組件</h3>"
})
const deon2 = {
  template: "<h3>局部組件 {{n}}</h3>",
  //在組建中data必須使用函數
  data() {
    return {
      n: "小明"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h3>組件3</h4>"
    },
    Deon4
  },
  template: `
    <div>頁面
    <Deon1></Deon1>
    <Deon2></Deon2>
    <Deon3></Deon3>
    <Deon4><Deon4>
    </div> 
  `
}).$mount('#app')

• 常用的四個生命周鉤子函數

• 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('#app')

• 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('#app')

感謝各位的閱讀，以上就是“vue的options選項有什么作用”的內容了，經過本文的學習后，相信大家對vue的options選項有什么作用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！