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

更新時間：2019年04月30日 16:39:40 作者：Sunzz

這篇文章主要介紹了Vue基本使用之對象提供的屬性功能實例詳解，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下

一過濾器

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

可以使用在兩個地方：輸出內容和操作數(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ù)在被調用時，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 總結

在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>