構(gòu)造選項(xiàng)

V2 options文檔
內(nèi)容:new Vue(options)options取值詳解
查看示例代碼

Vue實(shí)例

什么是Vue實(shí)例？
Vue實(shí)例就如同jQuery實(shí)例:
封裝了對DOM的所有操作
封裝了對data的所有操作

比如悬嗓，如果我們用jQuery選擇一個元素框舔，會得到一個jQuery的實(shí)例(實(shí)例就是對象)事示，而不是得到這個元素。這個對象封裝了對那個<div>的所有操作牺丙。Vue也是一樣的，我們要做的就是用Vue去搞出一個Vue實(shí)例來。
[圖片上傳失敗...(image-ea58f7-1648655325202)]
new Vue() 這就是構(gòu)造一個Vue的實(shí)例癌佩。
這個實(shí)例會根據(jù)你給的選項(xiàng)得出一個對象(vm)，vm封裝了這個DOM對象以及對應(yīng)的所有操作便锨，不管是事件綁定還是數(shù)據(jù)的讀寫围辙、DOM更新，全部都由vm這個對象負(fù)責(zé)放案。你只需要去調(diào)用它的API就好了姚建。

原型:對象.__proto__===其構(gòu)造函數(shù).prototype
推出vm.__proto__===Vue.prototype

函數(shù)也是對象，所以Vue函數(shù)對象的內(nèi)存圖如上吱殉。
函數(shù).__proto__===Function.prototype推出Vue.__proto__===Function.prototype

問題一: 初始化時可以寫些什么對象進(jìn)去(options)掸冤？
問題二: vm自己有哪些屬性？
問題三: Vue函數(shù)本身有哪些屬性?
問題四: 每個函數(shù)都有個屬性叫prototype友雳，同時每個對象都有個屬性叫__proto__稿湿。假設(shè)Vue.prototype對應(yīng)的對象的地址是#419，那請問這個#419里面有哪些屬性呢押赊？
問題五:Vue.prototype.__proto__= ?

Vue實(shí)例的作用

[圖片上傳失敗...(image-253893-1648655325202)]
vm對象封裝了對視圖的所有操作但不包括ajax,因?yàn)閍jax是網(wǎng)絡(luò)層的饺藤。

按照ES6的說法，構(gòu)造函數(shù)也可以說是類，所以vm所屬的類是Vue策精。
new Vue(options)options是new Vue的參數(shù)舰始，一般稱之為選項(xiàng)或構(gòu)造選項(xiàng)。

一.options里面有什么咽袜？

V2 options文檔
options的五類屬性
[圖片上傳失敗...(image-3250bf-1648655325202)]

第1類屬性 Data:

data 數(shù)據(jù) 
props 屬性
computed 計(jì)算屬性 //被計(jì)算出來的
methods 方法丸卷，用來定義方法的
watch 觀察 //當(dāng)data變化時做某些事情就用watch
propsData //很少用,單元測試會用

方法和函數(shù)的區(qū)別？
1.概念:方法是屬于面向?qū)ο蟾拍钛玻瘮?shù)屬于數(shù)學(xué)概念谜嫉。
在面向?qū)ο罄锝蟹椒?有對象才有方法，方法依附于對象即對象.方法凹联，比如說obj.sayhi()sayhi就叫方法也是函數(shù)沐兰，一般叫方法。
如果sayhi()這樣寫就叫函數(shù)
在數(shù)學(xué)里叫函數(shù)蔽挠。
2.都指同一個東西

function(p1,p2){
  return 
}

第2類屬性 DOM:

el 掛載點(diǎn) //你要用你的模版替換頁面上的哪一塊住闯，你的掛載點(diǎn)
template //你的HTML內(nèi)容。著重講語法v-if澳淑、v-for
render  渲染 //??注意template和render只能二選一比原！
//template是給完整版用的，render是給非完整版用的杠巡。一起用必然有一個會失效量窘！
renderError //很少用

第3類屬性 生命周期鉤子:
生命周期:Vue組件在頁面中插入一個<div>監(jiān)聽它的事件，然后用戶點(diǎn)擊按鈕時變化氢拥“鐾可以切入的點(diǎn)叫做鉤子。
[圖片上傳失敗...(image-90f24d-1648655325202)]

beforeCreate  創(chuàng)建之前
created  創(chuàng)建之后
beforeMount
mounted 掛在之后
beforeUpdate
updated 更新之后
activated
deactivated
beforeDestroy
destroyed 失敗之后
errorCaptured //很少用

第4類屬性 資源

directives 指令
filters 過濾器 //盡量不去用嫩海，用methods代替
components 組件 
//如果要在一個文件引用另一個Vue的文件就用組建冬殃。Demo.vue就叫組件,英文名叫components。

第5類屬性 組合:

parent //很少用
mixins 混入
extends 擴(kuò)展
provide 提供
inject 注入

入門屬性

1.el 掛載點(diǎn)

可以用$mount代替

你要用你的模版替換頁面上的哪一塊,可以用$mount代替出革。組件或者實(shí)例的掛載點(diǎn)造壮。

index.html
<div id="app"> {{n}} </div>

main.js
new Vue({ 
  el: '#app',
  render(h) {
    return h(Demo)
  }
})
可以用$mount替代:
new Vue({ 
  render: h => h(Demo)
}).$mount('#app')

//const vm = new Vue({
//  render: h => h(Demo)
//})
//vm.$mount('#app')

總結(jié)
特點(diǎn)1.名字要保持一致
特點(diǎn)2.如果在<div>內(nèi)加內(nèi)容，那么多半用戶是看不見的骂束。js加載完后會把hello干掉耳璧。
特點(diǎn)3.可以用$mount替代。掛載基本等同于replace或append

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

組件的定義只接受函數(shù)展箱。

用vue完整版來示例

main.js
console.log(window.Vue)
// import Vue from 'vue' 刪掉,這次不從npm引入,直接使用全局的Vue
const Vue = window.Vue
Vue.config.productionTip = false

new Vue({ //實(shí)例
  data: { //內(nèi)部數(shù)據(jù)旨枯，只支持函數(shù)
    n: 0
  },
  template: `
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
  `,
  methods: {
    add() { //add要先定義好，不然會報(bào)錯
      this.n += 1
    }
  }
}).$mount('#app')

Bug: Vue的data有bug混驰，后面講"數(shù)據(jù)響應(yīng)式"時會說攀隔。

為什么data必須是函數(shù)皂贩？
如果你是個組件，比如Demo組件昆汹，引入Demo組件import Demo from './Demo.vue'Vue文檔說如果你的data是寫在.vue文件中的(也可以認(rèn)為是Vue組件)

Demo.vue
export default {
    data(){ //vue-loader寫文件時明刷，data必須是函數(shù)
      return {
        n:0
      }
    },
}

Demo實(shí)際上是對象，Vue會自動把Demo傳給new Vue(Demo)
假設(shè)如果有兩個組件共用內(nèi)部數(shù)據(jù)data满粗，當(dāng)其中一個改變時另一個也會變辈末，因?yàn)樗鼈円玫氖峭粋€data。函數(shù)會阻止兩個組件共用data的問題映皆。

main.js
render:h=>h(x,[h(Demo),h(Demo)])

3.methods 方法

事件處理函數(shù)或者是普通函數(shù)

add必須寫在methods里面挤聘，如果寫到外面會報(bào)錯。
[圖片上傳失敗...(image-e8eedc-1648655325202)]

main.js
//new Vue({  錯誤
//  add() { this.n += 1 },
//  methods: {
//  }
//})

事件處理函數(shù): 寫到一個@click或keypress或者任何事件作為它的處理函數(shù)
普通函數(shù)method代替filter捅彻。

main.js
new Vue({ //實(shí)例
  data: {
    n: 0,
    array:[1,2,3,4,5,6,7,8,9]
  },
  template: `
    <div class="red">
      {{n}}
      <button @click="add">+1</button>
      <hr>
      {{filter(array)}} //2'filter()
    </div>
   `,
   methods: {
    add() {
      this.n += 1
    },
  filter(array) {
    return array.filter(i => i % 2 === 0)
    }
//filter() {
  //return this.array.filter(i => i % 2 === 0)
  //}
}).$mount('#app')

[圖片上傳失敗...(image-1a8148-1648655325202)]

bug： methods第2種用法组去，用來主動在模版里調(diào)用。這種調(diào)用特點(diǎn)是每次渲染都會重新調(diào)用步淹。就算毫無意義跟之前是相同的結(jié)果它也會執(zhí)行从隆。

4.components 組件

使用Vue組件，注意大小寫

如果要在一個文件引用另一個Vue的文件就用組件贤旷。Demo.vue就叫組件(components)广料。
const vm=new Vue({...})vm是Vue實(shí)例或Vue對象
這個不能叫做組件，它使用"其它的Vue實(shí)例"的時候幼驶，"其它的Vue實(shí)例"才是組件。

如何使用組件韧衣？

首先要創(chuàng)建組件盅藻，組件的3種引入形式
1' 創(chuàng)建一個.vue文件(推薦)。
這個文件就是Vue組件畅铭，比如Demo.vue氏淑，然后引入該文件。
使用組件
說明要用的組件是frank硕噩，然后就可以在template里面寫frank假残。

main.js
import Demo from './Demo.vue' //引入Demo文件

new Vue({ //實(shí)例
  components: { //說明要用的組件是frank
    frank: Demo //名字:值,Demo組件
  //Demo:  Demo //es6語法可以簡寫為Demo
  },
  template: `
  <div class="red">
    <frank/>
  </div>
  `,
}).$mount('#app')  

Demo.vue
<template>
    <div class="red">
       fuck
    </div>
</template>
...

[圖片上傳失敗...(image-efd106-1648655325202)]

優(yōu)先使用第1種，其它2種不夠模塊化炉擅。

2' 用js的方式
不要components辉懒，直接聲明全局的Demo2。

main.js
Vue.component('Demo2', {
  template: `
    <div> demo2 </div>
  `
})
new Vue({ 
template: `
  <div class="red">
    <Demo2/>
  </div>
  `,
}).$mount('#app')

[圖片上傳失敗...(image-d87c1-1648655325202)]

你是入口就是實(shí)例谍失，被別人用的就是組件眶俩。

3' 前2種的結(jié)合
保留js對象，又保留components

main.js
Vue.component('Demo2', {
  template: `
    <div> demo2 </div>
  `
})
new Vue({ 
  components: {
    fuck: {
      template: `
      <div> demo3 </div>
    `
    }
  },
 template: `
  <div class="red">
     <fuck/>
  </div>
  `,

[圖片上傳失敗...(image-b2e868-1648655325203)]

fuck也可以有data

  fuck: {
      data() { //組件data必須用函數(shù)
        return { n: 0 }
      },
      template: `
      <div> fuck's n:{{n}} </div>
    `
    }

fuck對象里面的寫法,跟外面的options是完全一樣的快鱼。
[圖片上傳失敗...(image-cd1de2-1648655325203)]

什么是組件颠印？
組件:可以組合的物件就叫組件纲岭。比如手臂、腿就是人的組件
組件可以認(rèn)為是實(shí)例中的實(shí)例线罕。

注意大小寫
1.文件名最好全小寫止潮，因?yàn)橛行┕爬系牟僮飨到y(tǒng)，比如window10可能不能識別大小寫钞楼，防止2個大小寫文件重名喇闸。
2.組件首字母最好大寫。
[圖片上傳失敗...(image-214da0-1648655325203)]

5.四個鉤子

1.created 實(shí)例出現(xiàn)在內(nèi)存中
2.mounted 實(shí)例出現(xiàn)在頁面中
3.updated 實(shí)例更新了
4.destroyed 實(shí)例消亡了

1.2.3.created窿凤、mounted仅偎、updated

new Vue({ //實(shí)例
  created() {
    //debugger
    console.log("這玩意出現(xiàn)在內(nèi)存中")
  },
  mounted() {
    //debugger
    console.log("這玩意出現(xiàn)在頁面中")
  },
   updated() {
    console.log("更新了") //點(diǎn)擊+1按鈕后顯示更新了
    console.log(this.n) //每次拿到的n都是最新的
  },
}).$mount('#app')

可以通過debugger驗(yàn)證實(shí)例是否出現(xiàn)在頁面:n和button沒加載出來說明出現(xiàn)在內(nèi)存，加載出來證明出現(xiàn)在頁面雳殊。
[圖片上傳失敗...(image-6fc2df-1648655325203)]
[圖片上傳失敗...(image-2b18c4-1648655325203)]

[圖片上傳失敗...(image-e6efc-1648655325203)]

4.destroyed 實(shí)例消亡了
步驟
邏輯:讓一個組件出現(xiàn)又消失
1.src新建文件demo2.vue橘沥。
把目前的實(shí)例變組件: 把main.js中new Vue({ //實(shí)例 })的實(shí)例剪切到demo2.vue的<script>里。別忘了把template內(nèi)容也移到<template>里夯秃。
2.創(chuàng)建實(shí)例

main.js
import Demo from './demo2.vue'

new Vue({ //實(shí)例
  components: { Demo },
  data: { //自己new Vue就不是組件座咆，所以data可以是對象
    visible: true
  },
  template: `
    <div>
      <button @click="toggle">toggle</button>
      <hr>
      <Demo v-if="visible===true"/>
    </div>
  `,
  methods: {
    toggle() {
      this.visible = !this.visible //把visible變?yōu)榉粗担瑢?shí)現(xiàn)按鈕的切換
    }
  }
}).$mount('#app')

3.監(jiān)聽destroyed

  destroyed(){
    console.log("已經(jīng)消亡了")
  }

每次toggle后n將重新初始化為0仓洼。
[圖片上傳失敗...(image-cf8495-1648655325203)]

知識點(diǎn)
1.渲染頁面

render: h => h(Demo) //更簡單
//等價于
components: { Demo },
  template: `
    <Demo/>
  `,

2.v-if什么時候出現(xiàn)

new Vue({ 
  components: { Demo },
  data: { //自己new Vue就不是組件介陶，所有data可以是對象
    visible: true
  },
  template: `
      <Demo v-if="visible===true"/>
  `
}).$mount('#app')

3.實(shí)例 VS 組件
實(shí)例就是main.js,代碼特征new Vue({ }),data可以是對象、函數(shù)色建。 實(shí)例需要導(dǎo)入組件demo.vue實(shí)例包含組件哺呜，如果實(shí)例是爸爸，那組件就是流落在外的兒子箕戳。

main.js
import Demo from './demo.vue' //導(dǎo)入組件`demo.vue`

new Vue({ 
  data: { //data可以是對象
    visible: true
  },
}).$mount('#app')

組件就是新建的demo.vue,代碼特征3個標(biāo)簽<template>某残、<script>、<style scoped>,data必須是函數(shù)陵吸。 可以認(rèn)為是實(shí)例中的實(shí)例玻墅。

demo.vue
//組件
<template> //html
</template>

<script> //js
export default {
 data(){ //vue-loader寫文件時，data必須是函數(shù) }
    }
</script>

<style scoped> //css
</style>

4.函數(shù)和方法的區(qū)別壮虫？
函數(shù)（function） 是可以執(zhí)行的javascript代碼塊澳厢，由javascript程序定義或javascript實(shí)現(xiàn)預(yù)定義。函數(shù)可以帶有實(shí)際參數(shù)或者形式參數(shù)囚似，用于指定這個函數(shù)執(zhí)行計(jì)算要使用的一個或多個值剩拢，而且還可以返回值，以表示計(jì)算的結(jié)果谆构。
方法（method） 是通過對象調(diào)用的javascript函數(shù)裸扶。也就是說，方法也是函數(shù)搬素，只是比較特殊的函數(shù)呵晨。假設(shè)有一個函數(shù)是fn魏保，一個對象是obj，那么就可以定義一個method摸屠。方法和對象相關(guān)谓罗，函數(shù)和對象無關(guān)。
方法和函數(shù)大致上是相同的季二，但有兩個主要的不同之處：
(1)方法中的數(shù)據(jù)是隱式傳遞的檩咱。
(2)方法可以操作類內(nèi)部的數(shù)據(jù)（請記住，對象是類的實(shí)例化–類定義了一個數(shù)據(jù)類型胯舷，而對象是該數(shù)據(jù)類型的一個實(shí)例化）

6.props 外部數(shù)據(jù)

外部數(shù)據(jù)是由外部來傳值的(值是字符串)刻蚯，也叫外部屬性
1' 傳字符串message="n"
2' 傳變量:message="n" 傳入this.n數(shù)據(jù)
3' 傳函數(shù):fn="add" 傳入this.add函數(shù)

1' 傳字符串message="n"

步驟
(1)新建文件demo3.vue
props從外部接收message,這個message會自動綁到this上。Vue允許省掉this桑嘶。

demo3.vue
<template>
    <div class="red">
        這里是demo3的內(nèi)部
        {{message}} //{{this.message}}this可省
    </div>
</template>

<script>
  export default {
   //聲明:props:[屬性名]
     props:['message'] //從外部接收message,這個message會自動綁到this上
  }
</script>
<style scoped>
  .red{ color: red; }
</style>

(2)使用props外部數(shù)據(jù)

main.js
import Demo from './demo3.vue'

new Vue({ //實(shí)例
components: { Demo },
 template: `
    <div>
      <Demo message="你好 props"/> //傳值:在組件后加key value
    </div>
  `,
}).$mount('#app')

message="字符串"
[圖片上傳失敗...(image-9468c0-1648655325203)]

2' 傳變量:message="n" 傳入this.n數(shù)據(jù)

加空格和冒號" :", 注意Demo后有空格炊汹！

main.js
import Demo from './demo3.vue'

new Vue({ //實(shí)例
 components: { Demo },
  data: {
    n:0
  },
   template: `
    <div>
      <Demo :message="n"/> <!--傳變量(數(shù)據(jù)) -->
    </div>
  `,
}).$mount('#app')

空格:message="JS(變量)"
[圖片上傳失敗...(image-b04efd-1648655325203)]

3' 傳方法(函數(shù)):fn="add" 傳入this.add函數(shù)

1.添加第2個參數(shù)fn

demo3.vue
<template>
    <div class="red">
        這里是demo3的內(nèi)部
        {{message}}  
        <button @click="fn">call fn</button>
    </div>
</template>
<script>
export default {
    props:['message','fn']
  //從外部接收message、fn,會自動綁到this上
}
</script>

<style scoped>
.red{ color: red; }
</style>

2.接收方法

main.js
import Demo from './demo3.vue'

new Vue({ //實(shí)例
  components: { Demo },
  data: { //實(shí)例的data可以是對象
    visible: true,
    n: 0
  },
   template: `
    <div>
      {{n}}
      <Demo :fn="add"/> <!--傳JS變量(數(shù)據(jù)) --> 
    </div>
  `, 
  methods: {
    add() {
      this.n += 1
       }, 
  }
}).$mount('#app') 

空格:message="JS(方法)"
[圖片上傳失敗...(image-1b976c-1648655325203)]

把n回傳給里面的兒子逃顶，得到的是最新的n讨便。

main.js
template: `
  <div>
    {{n}}
    <Demo :message="n" :fn="add"/>
  </div> 
`,

[圖片上傳失敗...(image-2a63ff-1648655325203)]