超簡單的VUE入門2~VUE實例

在上一篇主要說些Vue中的常用指令，主要編寫在HTML頁面中，但是VUE實例中也有許多的屬性和方法，這裏總結下，首先說vue實例，如果需要讓HTML代碼頁面與VUE結合在一起，必須創建一個對應的VUE實例，創建語法如下：

var vm = new Vue({
	//屬性
})

主要屬性都有

1、el 通過ID綁定對應的HTML元素
例子：
var vm = new Vue({
el:"#id" // HTML ：

})

2、data 綁定數據，可以HTML動態綁定數據

HTML:
<div id="id">{{data}}</div>

JS:
var vm = new Vue({
	el:"#id",
	data:{
		da:"數據",
		das:[
			"數組"
		]
	}
})

3、生命週期鉤子，組成生命週期函數，在頁面在使用期間默認調用的幾個函數，直接上例子

beforeCreate() {
	console.log("beforeCreate，實例創建之前")
},
created() {
	console.log("created，實例創建")
},
beforeMount(){
	console.log("beforeMount，掛在DOM節點前，數據data在模板中佔據位置")
},
mounted() {
	console.log("mounted，掛在DOM節點，HTML代碼中數據顯示")
},

beforeUpdate(){
	console.log("beforeUpdate，data數據發生變化，重新渲染DOM之前")
},
updated() {
	console.log("updated，重新渲染頁面")
},

beforeDestroy(){
	console.log("beforeDestroy，銷燬之前，實例仍然可用")
},
destroyed(){
	console.log("destroyed，銷燬所有實例")
}

4、computed，計算屬性，聲明一個帶有返回值的函數，可以在HTML頁面和函數進行綁定

HTML：
<div id="d1">
	{{getNum}}
	{{getNum2}}
</div>

JS:
<script>
	var vm = new Vue({
		el:"#d1",
		computed: {
			getNum() {
				return 10*20 
			},
			getNum2: function(){
				return 10*20 
			}
		},
	})

計算屬性在使用上比較類似於方法，兩者的區別在於緩存，計算屬性會把結果進行緩存處理，只要所依賴的數據不發生變化就不會重複執行，而方法是每次調用都會執行一次，如果是複雜運算會增加資源損耗，案例如下：

HTML：
<div id="d1">
	{{getNum}}<br>
	{{getNum}}<br>
	{{getNum}}<br>
	{{getNum}}<br>
	<br>
	{{getNum3()}}<br>
	{{getNum3()}}<br>
	{{getNum3()}}<br>
	{{getNum3()}}<br>
</div>

JS：
var vm = new Vue({
	el:"#d1",
	computed: {
		getNum() {
			console.log("計算屬性");
			return Date.now() 
		}
	},
	methods:{
		getNum3(){
			console.log("普通方法")
			return Date.now() 
		}
	}
})
效果：
1565486842912
1565486842912
1565486842912
1565486842912

1565486842915
1565486842915
1565486842916
1565486842916

計算屬性的set方法，計算屬性默認只有get（取值時調用）方法，除此之外還可以定義set（設置值時調用）方法。

HTML：
{{getName}}
<button @click="getName='張三'">點擊</button><!--也可以在控制檯直接設置-->

JS：
var vm = new Vue({
	el:"#d1",
	data:{
		name:"灑家"
	},
	computed: {
		getName:{
			get(){
				return this.name
			},
			set(newValue){
				// set方法在屬性傳值的時候增加額外處理
				console.log("set"+newValue)
				this.name = newValue+"~李"
			}
		}
	}
})

5、watch偵聽器，在值發生變化後，進行調用

HTML：
<div id="d1">
	<h1>{{question}}</h1>
</div>	

JS：
var vm = new Vue({
	el:"#d1",
	data:{
		question:"1",
	},
	watch:{
		question:function(newValue,oldValue){
			console.log(newValue);
			console.log(oldValue);
			console.log("偵聽器")
		}
	}
})