Vue基礎(chǔ)知識(shí)

Vue單文件組件：以任意方式組成一個(gè)對(duì)象，最后用loader還原成對(duì)象

單頁面：是指沒有路由跳轉(zhuǎn)的頁面（這里的路由指的是后端路由），整個(gè)頁面是一個(gè)編譯后是一個(gè)整體，包括通過router切換的頁面，router切換說白了就是將要顯示部分顯示，其余部分不顯示，類似于a標(biāo)簽點(diǎn)擊顯示某一部分，vue寫的頁面都是單頁面

組件的定義：文件使用其他的.Vue文件，這個(gè).Vue文件就是組件

Vue實(shí)例

const vm = new Vue(options)

new Vue會(huì)構(gòu)造一個(gè)實(shí)例，這個(gè)Vue實(shí)例會(huì)根據(jù)options得出一個(gè)對(duì)象，命名為vm（沿用尤雨溪命名習(xí)慣）。這個(gè)vm對(duì)象封裝了對(duì)視圖的所有操作，包括數(shù)據(jù)讀寫，事件綁定，Dom更新。
options是new Vue的參數(shù)，一般稱之為選項(xiàng)或構(gòu)造選項(xiàng)。

options其中五類屬性：數(shù)據(jù)、DOM、生命周期鉤子、資源、組合

1、方法和函數(shù)的區(qū)別

方法：面向?qū)ο蟮母拍?，依附于一個(gè)對(duì)象

obj.sayHi()

函數(shù)：數(shù)學(xué)概念

sayHi()

2、data

內(nèi)部屬性，由內(nèi)部傳值

注意：data如果寫在.Vue(組件)文件中，data必須使用函數(shù)，防止兩個(gè)組件共用一個(gè)data（其中一個(gè)data改了另一個(gè)也會(huì)改變），使用自己的組件（Vue實(shí)例）也可寫成對(duì)象的形式

 data() {return}
 data: {}

3、methods方法，處理函數(shù)和普通函數(shù)

<div class="red">
    {{ n }}
    <button @click="add">+1</button> //add方法、@click點(diǎn)擊事件
</div>

<script>
export default {
  methods: {
    add() {  //事件處理函數(shù)
      this.n += 1;
    },
    filter() {  //普通函數(shù)
      console.log("執(zhí)行了filter");
      // return array.filter((item) => item % 2 === 0)
      return this.array.filter((item) => item % 2 === 0)
    }
  }
}
</script>

注意：改變n的值filter也會(huì)執(zhí)行，原因：methods每次渲染都會(huì)執(zhí)行，即使只改變其中一個(gè)方法，其他方法依然會(huì)執(zhí)行

4、定義一個(gè)組件

注意：命名規(guī)則，文件名最好小寫，組件名首字母最好大寫

Vue.component('Demo', {  //定義組件，組件名Demo
  el: '#app',
  template: `
    <div>
    </div>
  `
})
const vm = new Vue({  
   components: { Demo }, //引用這個(gè)組件
   template: `
     <div>
     <Demo :message='b' :fn='add'/> //使用這個(gè)組件
    //加:號(hào)傳變量，不加傳字符串b
     </div>
   `
}）

5、引用一個(gè)組件

import Demo from './demo'  //引用
new Vue({
    components:{Demo}  //{Demo:Demo}組件命名使用
    template: `
     <div> <Demo/> </div>  
   `
})

6、生命周期鉤子

生命周期鉤子：生命周期以人的生老病死類比，鉤子：切入點(diǎn)

created() {
    console.log("實(shí)例出現(xiàn)在內(nèi)存中");
  },
  mounted() {
    console.log("實(shí)例出現(xiàn)在頁面中");
  },
  updated() {
    console.log("實(shí)例更新了");
  },
  destroyed() {
    console.log(this.n);
    console.log("實(shí)例消失（亡）了");
  }

destroyed()消亡之后，新創(chuàng)建的是全新的實(shí)例

7、props

外部屬性，由外部傳值?？蓚髯兞?、方法、常量

Vue.component('Demo', {
  el: '#app',
  template: `
    <div>
    {{message}}
    <button @click='fn'>click1</button>
    </div>
  `,
  props: ['message', 'fn']
})

const vm = new Vue({
  components: { Demo },
  data: {
    visible: true,
    b: 1
  },
  el: '#app',
  template: `
    <div>
    <Demo :message='b' :fn='add'/> //加:號(hào)傳變量，不加傳字符串b
    </div>
  `
})