Vue中的方法&生命週期&路由

一、v-bind指令

作用

將原生HTML屬性變成動態屬性，值是一個變量，實現數據控制原生屬性

寫法

<h1 v-bind:title="變量"></h1>

縮寫

<h1 :title="變量"></h1>

樣式

<h1 :class="[變量1, 變量2, 變量n]"></h1>

二、過濾器 filters

1. 什麼是過濾器？

   過濾器是指在不改變原數據的情況下，過濾以後再輸出

2. 使用過濾器

   ①聲明過濾器

   	filters:{
   		過濾器函數(v){
   			return 值;
   		}
   	}
   

   ②過濾器使用

   {{變量 | 過濾器函數}}

三、監聽器 watch

1. 什麼是監聽器？

   監聽器可以監控某個變量，當變量改變時就會觸發

2. 監聽器聲明

   	watch:{
   		要監控的屬性名(新的值, 舊的值){
   			...
   		}
   	}
   

四、生命週期

• 什麼是生命週期？

  Vue的生命週期是指 組件 或 實例 從創建到銷燬的整個過程

• 學習生命週期的目的

  ①理清組件或實例的執行過程
  ②理清有哪些生命週期鉤子函數可以使用，並且在什麼情況下使用

• 什麼是生命週期函數（鉤子函數）？

  生命週期函數也稱爲鉤子函數
  在組件或實例從創建到銷燬的過程中，在固定的幾個節點處，可以允許用戶添加自己的代碼

• 生命週期的階段

1. 創建對象

   beforeCreate
   created 【常用】
   對象創建完成後，立即發起ajax請求，獲取數據渲染到頁面上

2. 頁面渲染

   beforeMount
   mounted 【常用】
   也有很多程序員喜歡在渲染完頁面以後再發起請求

3. 運行階段

   beforeUpdate
   updated

4. 銷燬階段

   beforeDestroy
   destroyed

五、vue-router路由

• 安裝路由插件

  使用vue-cli腳手架創建項目時，選擇 Router路由插件，即可自動安裝並配置

  創建項目
  vue create 項目名稱
  安裝選項
  自行安裝插件 -> Router
  一直enter鍵

• 配置路由

  路由配置文件
  src/router/index.js

  	export default new VueRouter({
  		routes: [
  			{path: '路徑', component: 組件},
  			//懶加載，訪問路徑時，才加載對應的組件
  			{path: '/about', component: () =>import('../views/About.vue')}
  		],
  	})
  

• 創建一個新頁面（一級路由）

  需求：創建一個新聞頁面
  ①創建一個新聞頁面組件
  src/views/news.vue
  ②在路由配置文件index.js中添加路由線路
  {path: '/news', component: () =>import('../views/News.vue')}
  ③在 App.vue添加連接
  <router-link to="/news">新聞中心</router-link>

• 二級路由

  需求：在公司介紹一級路由下，製作：關於我們、企業文化、發展歷程二級路由
  ①創建二級路由頁面組件
  src/views/About/***.vue
  ②編寫二級路由線路
  在一級路由後面添加一個 children屬性

  {path:'/about', component:組件, children:[
  	{path:'/about/history', component:二級路由組件},
  	...
  ]}
  

  ③在一級路由添加路由容器和路由連接

  <router-link to="/about/history">發展歷程</router-link>
  <router-view/>
  

• 全局的路由

  • this.$route.path

    獲取當前頁面的路由線路

  • this.$router.push()

    跳轉頁面，頁面記錄追
    加到記錄棧，可以倒退

  • this.$router.replace()

    跳轉頁面，不追加到記錄棧，不可以倒退