methods_created_mounted_watch_computed在vue里是最基礎的方法，它在vue里有著自己 的作用，例如頁面渲染前，渲染后，變數發生變化后，計算屬性值等等，
<template>
<div>
<Input type="text" v-model="message" clearable placeholder="請輸入用戶名" style="width: 200px" />
{{full}}
<br />len:
<Input type="text" v-model="len" />width:
<Input type="text" v-model="width" />
<input v-model="areas" type="text" />
</div>
</template>
<script>
export default {
name: "test-manage",
props: {
//接收父組件傳遞過來的引數
},
data() {
// 定義變數
return {
message: "hello",
full: "",
len: 0,
width: 0
};
},
methods: {
//事件方法執行
init() {
message = "hello world!";
}
},
created() {
//html加載完成之前執行,執行順序：父組件-子組件
},
mounted() {
//加載完成后執行,執行順序：子組件-父組件
},
watch: {
//監聽一個值的變化，然后執行相對應的函式
message: function(val) {
this.full = "名稱:" + val;
}
},
computed: {
//計算屬性，也就是依賴其它的屬性計算所得出最后的值
areas: function() {
console.log("呼叫computed");
return this.len * this.width;
}
}
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/58577.html
標籤：JavaScript
上一篇：小程式相冊授權后保存圖片到相冊