Vue基本使用之對象提供的屬性功能

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:57:46

Vue基本使用之對象提供的屬性功能

Vue基本使用之對象提供的屬性功能:一過濾器過濾器就是vue允許開發(fā)者自定義的文本格式化函數(shù)，可以使用在兩個地方：輸出內(nèi)容和操作數(shù)據(jù)中。 1.1 定義過濾器的兩種方式 1.1.1 使用Vue.filter()進行全局定義 Vue.filter(RMB1, function(v){ //就是來格式化(處理)v這個數(shù)據(jù)的

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue基本使用之對象提供的屬性功能:一過濾器過濾器就是vue允許開發(fā)者自定義的文本格式化函數(shù)，可以使用在兩個地方：輸出內(nèi)容和操作數(shù)據(jù)中。 1.1 定義過濾器的兩種方式 1.1.1 使用Vue.filter()進行全局定義 Vue.filter(RMB1, function(v){ //就是來格式化(處理)v這個數(shù)據(jù)的

一過濾器

過濾器就是vue允許開發(fā)者自定義的文本格式化函數(shù)，

可以使用在兩個地方：輸出內(nèi)容和操作數(shù)據(jù)中。

1.1 定義過濾器的兩種方式

1.1.1 使用Vue.filter()進行全局定義

Vue.filter("RMB1", function(v){
 //就是來格式化(處理)v這個數(shù)據(jù)的
 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 計算和監(jiān)聽屬性

監(jiān)聽屬性，可以幫助我們偵聽data中某個數(shù)據(jù)的變化，從而做相應的自定義操作。

監(jiān)聽屬性時一個對象，它的鍵時要監(jiān)聽的對象或者變量，值是一個函數(shù)，當監(jiān)聽的data數(shù)據(jù)發(fā)送變化時，會自定義執(zhí)行對應的函數(shù)，這個函數(shù)在被調(diào)用時，vue會傳入兩個形參，第一個是變化前的數(shù)據(jù)值，第二個是變化后的數(shù)據(jù)值。

<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發(fā)生變化的時候，要執(zhí)行的代碼,num必須是data中的鍵
 num: function (newval, oldval) {
 console.log("num已經(jīng)發(fā)生變化了！", this.num)
 },
 }
 })
</script>
</body>
</html>

二 Vue 對象的生命周期

每個vue 對象在創(chuàng)建時都要經(jīng)過一系列的初始化過程。在這個過程中vue.js會自動運行一些叫做生命周期的鉤子函數(shù)，我們可以使用這些函數(shù)，在對象創(chuàng)建的不同階段加上我們需要的代碼，實現(xiàn)特定的功能。

2.1 了解數(shù)據(jù)生成、加載、更新的過程

<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對象尚未創(chuàng)建,num=" + this.num);
 this.name = "zhangsan"; //此時沒有this對象，設置name是無效的
 },
 created: function () {
 console.log("created,vm對象創(chuàng)建完成,設置好了要控制的元素范圍,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數(shù)據(jù)顯示到頁面中，num=" + this.num);
 },
 mounted: function () {
 console.log(this.$el.innerHTML);
 console.log("mounted,vm對象已經(jīng)把data數(shù)據(jù)顯示到頁面中，num=" + this.num);
 },
 beforeUpdate: function () {
 console.log(this.$el.innerHTML);
 console.log("beforeUpdate,vm對象尚未把更新后的data數(shù)據(jù)顯示到頁面中，num=" + this.num);
 },
 updated: function () {
 console.log(this.$el.innerHTML);
 console.log("updated,vm對象已經(jīng)把更新后的data數(shù)據(jù)顯示到頁面中，num=" + this.num);
 },
 })
</script>
</body>
</html>

效果如下：

點擊按鈕使數(shù)據(jù)更新后

2.2 總結(jié)

在vue使用的過程中，如果要初始化操作，把初始化操作的代碼放在 mounted 中執(zhí)行。
mounted階段就是在vm對象已經(jīng)把data數(shù)據(jù)實現(xiàn)到頁面以后。

一般頁面初始化使用。例如，用戶訪問頁面加載成功以后，就要執(zhí)行的ajax請求。

另一個就是created，這個階段就是在 vue對象創(chuàng)建以后，把ajax請求后端數(shù)據(jù)的代碼放進 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("頁面不刷新時執(zhí)行點擊提交的函數(shù)")
 },
 }
 })
</script>
</body>
</html>