溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在Vue中使用對象提供的屬性？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1.1 定義過濾器的兩種方式
1.1.1 使用Vue.filter()進行全局定義
Vue.filter("RMB1", function(v){
//就是來格式化(處理)v這個數據的
if(v==0){
return v
}
return v+"元"
})1.1.2 在Vue對象中通過filters屬性類定義
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});1.2 計算和監聽屬性
監聽屬性，可以幫助我們偵聽data中某個數據的變化，從而做相應的自定義操作。
監聽屬性時一個對象，它的鍵時要監聽的對象或者變量，值是一個函數，當監聽的data數據發送變化時，會自定義執行對應的函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化前的數據值，第二個是變化后的數據值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++">按鈕</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {num: 23,},
watch: {
//num發生變化的時候，要執行的代碼,num必須是data中的鍵
num: function (newval, oldval) {
console.log("num已經發生變化了！", this.num)
},
}
})
</script>
</body>
</html>
二 Vue 對象的生命周期
每個vue 對象在創建時都要經過一系列的初始化過程。在這個過程中vue.js會自動運行一些叫做生命周期的鉤子函數，我們可以使用這些函數，在對象創建的不同階段加上我們需要的代碼，實現特定的功能。
2.1 了解數據生成、加載、更新的過程
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++"> 按鈕</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {num: 0},
beforeCreate: function () {
console.log("beforeCreate,vm對象尚未創建,num=" + this.num);
this.name = "zhangsan"; //此時沒有this對象，設置name是無效的
},
created: function () {
console.log("created,vm對象創建完成,設置好了要控制的元素范圍,num=" + this.num); // 0
this.num = 20;
},
beforeMount: function () {
// this.$el 就是我們上面的el屬性了，$el表示當前vue.js所控制的元素#app
console.log(this.$el.innerHTML);
console.log("beforeMount,vm 對象尚未把data數據顯示到頁面中，num=" + this.num);
},
mounted: function () {
console.log(this.$el.innerHTML);
console.log("mounted,vm對象已經把data數據顯示到頁面中，num=" + this.num);
},
beforeUpdate: function () {
console.log(this.$el.innerHTML);
console.log("beforeUpdate,vm對象尚未把更新后的data數據顯示到頁面中，num=" + this.num);
},
updated: function () {
console.log(this.$el.innerHTML);
console.log("updated,vm對象已經把更新后的data數據顯示到頁面中，num=" + this.num);
},
})
</script>
</body>
</html>效果如下：
點擊按鈕使數據更新后
2.2 總結
在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執行。
mounted階段就是在vm對象已經把data數據實現到頁面以后。
一般頁面初始化使用。例如，用戶訪問頁面加載成功以后，就要執行的ajax請求。
另一個就是created，這個階段就是在 vue對象創建以后，把ajax請求后端數據的代碼放進 created
三 阻止事件冒泡和刷新頁面
3.1 阻止事件冒泡
通過 設置@click.stop來阻止事件冒泡
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1 {
width: 200px;
height: 200px;
background: #ccc;
}
.box2 {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="box1" @click="func1">
<!-- @click.stop來阻止事件冒泡 -->
<div class="box2" @click.stop.prevent="func2"></div>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
func1: function () {
console.log("box1")
},
func2: function () {
console.log("box2")
}
}
})
</script>
</body>
</html>
3.2 阻止表單提交和頁面刷新
通過設置 @click.prevent來阻止表單提交
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
<input type="text">
<input type="submit">
<!-- @click.prevent來阻止表單提交 -->
<input type="submit" value="提交02" @click.prevent="func3">
</form>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {
func3: function () {
console.log("頁面不刷新時執行點擊提交的函數")
},
}
})
</script>
</body>
</html>
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
看完上述內容，你們掌握如何在Vue中使用對象提供的屬性的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
