vue組件基本結構
一、總結
一句話總結：
一個vue組件主要包括3個部分：界面展示代碼template、業務實現代碼script、界面布局代碼style
<template> <div class="class_1"> <h2>{{msg}}</h2> 這是一個fry VueComponentTest </div> </template> <script> export default { name: 'FryTest', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> .class_1{ color: red; } </style>
1、組件中的script標簽中如何寫vue中的methods、watch、各種生命周期函數等等？
直接寫在export default 出去的對象里面即可
<script> export default { name: "App", data() {//數據定義 函數方法，返回數據的方式 return {}; }, methods: { // 組件的方法 }, watch: { // watch監聽方法，擅長處理的場景：一個數據影響多個數據 watch是去監聽一個值的變化，然后執行相對應的函數。 }, computed: { // computed擅長處理的場景：一個數據受多個數據影響 computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值 }, beforeCreate () { // 在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。 }, created () { // （在實例創建完成后被立即調用。實例已經創建完成之后被調用。 在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始， $el 屬性目前不可見。初始化數據請求寫這里 }, beforeMount () { // 在掛載開始之前被調用：相關的 render 函數首次被調用。 }, mounted () {//頁面初始化方法 // 編譯好的HTML掛載到頁面完成后執行的事件鈎子 初始化數據除非有依賴dom的放在mounted()里面，加個nextTick // el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。 // 此鈎子函數中一般會做一些ajax請求獲取數據進行數據初始化 console.log("Home done"); }, beforeUpdate () { // 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。 // 只有更新和模板發生關聯的數據才會觸發這個鈎子 // 和模板綁定的數據更新之前 }, updated () { // 由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。 // 當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。 然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。 // 該鈎子在服務器端渲染期間不被調用。 }, beforeDestroy () { // 實例銷毀之前調用。在這一步，實例仍然完全可用。一般用於清除定時器 //$once來監聽定時器，在beforeDestroy鈎子可以被清除。 this.$once('hook:beforeDestroy', () => { clearInterval(timer); }) }, destroyed () { // Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定， 所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鈎子在服務器端渲染期間不被調用。 } }; </script>
二、vue組件基本結構
博客對應課程的視頻位置：
一個vue組件主要包括3個部分：界面展示代碼template、業務實現代碼script、界面布局代碼style
vue組件基本結構：FryTest.vue
1 <template> 2 <div class="class_1"> 3 <h2>{{msg}}</h2> 4 這是一個fry VueComponentTest 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'FryTest', 11 data () { 12 return { 13 msg: 'Welcome to Your Vue.js App' 14 } 15 } 16 } 17 </script> 18 19 <style scoped> 20 .class_1{ 21 color: red; 22 } 23 </style>
script基本結構
1 <script> 2 3 export default { 4 5 name: "App", 6 7 data() {//數據定義 函數方法，返回數據的方式 8 9 return {}; 10 11 }, 12 13 methods: { 14 15 // 組件的方法 16 17 }, 18 19 watch: { 20 21 // watch監聽方法，擅長處理的場景：一個數據影響多個數據 22 watch是去監聽一個值的變化，然后執行相對應的函數。 23 24 }, 25 26 computed: { 27 28 // computed擅長處理的場景：一個數據受多個數據影響 29 computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值 30 31 }, 32 33 beforeCreate () { 34 35 // 在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。 36 37 }, 38 39 created () { 40 41 // （在實例創建完成后被立即調用。實例已經創建完成之后被調用。 42 在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， 43 watch/event 事件回調。然而，掛載階段還沒開始， 44 $el 屬性目前不可見。初始化數據請求寫這里 45 46 }, 47 48 beforeMount () { 49 50 // 在掛載開始之前被調用：相關的 render 函數首次被調用。 51 52 }, 53 54 mounted () {//頁面初始化方法 55 56 // 編譯好的HTML掛載到頁面完成后執行的事件鈎子 57 初始化數據除非有依賴dom的放在mounted()里面，加個nextTick 58 59 // el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。 60 61 // 此鈎子函數中一般會做一些ajax請求獲取數據進行數據初始化 62 63 console.log("Home done"); 64 65 }, 66 67 beforeUpdate () { 68 69 // 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 70 你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。 71 // 只有更新和模板發生關聯的數據才會觸發這個鈎子 72 // 和模板綁定的數據更新之前 73 74 }, 75 76 updated () { 77 78 // 由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。 79 80 // 當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。 81 然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。 82 83 // 該鈎子在服務器端渲染期間不被調用。 84 85 }, 86 87 beforeDestroy () { 88 89 // 實例銷毀之前調用。在這一步，實例仍然完全可用。一般用於清除定時器 90 //$once來監聽定時器，在beforeDestroy鈎子可以被清除。 91 this.$once('hook:beforeDestroy', () => { 92 clearInterval(timer); }) 93 94 }, 95 96 destroyed () { 97 98 // Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定， 99 所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鈎子在服務器端渲染期間不被調用。 100 101 } 102 103 }; 104 105 </script>