快捷導(dǎo)航

Vue的Options用法說明

更新時間：2020年08月14日 11:40:21 作者：過程是風(fēng)景

這篇文章主要介紹了Vue的Options用法說明，具有很好的參考價值，希望對大家有所

el：掛載點(diǎn)

與$mount有替換關(guān)系

new Vue({
 el: "#app"
});

new Vue({}).$mount('#app')

注：被你選為掛載點(diǎn)的那個元素，如果在index.html里那個元素里面本來就有內(nèi)容，在渲染時會消失（網(wǎng)速慢可以看到），被這個vue實(shí)例的對應(yīng)內(nèi)容所覆蓋。

data：內(nèi)部數(shù)據(jù)

支持對象和函數(shù)，優(yōu)先用函數(shù)

new Vue({
 //優(yōu)先使用函數(shù)
 data() {
  return {
   n: 0,
  }
 }
}).$mount("#app");

注：能寫函數(shù)盡量寫函數(shù)，否則有可能有BUG；

methods：方法

事件處理函數(shù)

new Vue({
   data (){
    return{
      n:0
    }
   },
  template:`
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
    </div>
  `,
 //add必須寫到methods里面
  methods:{
     add(){
       this.n+=1
     }
  }
}).$mount('#app')

普通函數(shù)：methods代替filter

import Vue from "vue";
Vue.config.productionTip = false;

new Vue({
 data() {
  return {
   n: 0,
   array: [1, 2, 3, 4, 5, 6, 7, 8]
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button> //事件處理函數(shù)
 <hr>
 {{filter()}}  //普通函數(shù)(JS的filter直接在視圖里調(diào)用，每一次更新渲染都會調(diào)用一次)
 </div>
 `,//主動在模板里面調(diào)用
 methods: {
  add() {
   this.n += 1; //事件處理函數(shù)
  },
  filter() {
   return this.array.filter(i => i % 2 === 0); //普通函數(shù)
  }
 }
}).$mount("#app");

components：方法

使用Vue組件，注意大小寫

（建議用法）模塊化：

新建一個vue文件Demo.vue，這個vue文件就是一個組件

在main.js中引入這個vue文件

在vue實(shí)例的components中聲明這是我要用的組件，并且命名為Demo

這樣在這個Vue實(shí)例的template中就可以直接使用這個組件<Demo/>

import Vue from "vue";
import Demo from "./Demo.vue"; //引入這個vue文件  ---文件名最好小寫 組件名最好大寫
Vue.config.productionTip = false;

new Vue({
 components: {
  Demo //在vue實(shí)例的components中聲明這是我要用的組件，并且命名為Demo
  //如果組件名就叫Demo，即Demo：Demo，那就寫Demo --ES6縮寫
  //components: {Demo},
 },
 data() {
  return {
   n: 0
  };
 },
 template: `
 <div class=red>
 {{n}}
 <button @click="add">+1</button>
 <Demo/>  //這樣在這個Vue實(shí)例的template中就可以直接使用這個組件`<Demo/>`
 </div>
 `,
 methods: {
  add() {
   this.n += 1;
  },
 }
}).$mount("#app");

四個鉤子

created -- 實(shí)例出現(xiàn)在內(nèi)存中后觸發(fā)
created(){
     debugger
     console.log('這玩意出現(xiàn)在內(nèi)存中')
  },

mounted-- 實(shí)例出現(xiàn)在頁面中（掛載了）后觸發(fā)

 mounted(){
  debugger
     console.log('這玩意兒已出現(xiàn)在頁面中')
  },

updated -- 實(shí)例更新了后觸發(fā)

updated(){
     console.log('更新了')
    console.log(this.n) 
  },
 //當(dāng)你+1的時候，能證明他在更新的時候觸發(fā),還可以拿到最新的n

destroyed -- 實(shí)例從頁面和內(nèi)存中消亡了后觸發(fā)

props：外部屬性

外部來傳值

message="n"傳入字符串

:message="n"傳入vue實(shí)例的this.n數(shù)據(jù)

:fn="add"傳入vue實(shí)例的this.add函數(shù)

示例

補(bǔ)充知識：vue $options初始化

vue實(shí)例化時，對$options進(jìn)行初始化

vue/src/core/instance/init.js

 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
   startTag = `vue-perf-start:${vm._uid}`
   endTag = `vue-perf-end:${vm._uid}`
   mark(startTag)
  }

  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initInternalComponent(vm, options)
  } else {
  //初始化$options
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
   initProxy(vm)
  } else {
   vm._renderProxy = vm
  }
 }
}

以上這篇Vue的Options用法說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: