如何在Vue中使用對(duì)象提供的屬性

發(fā)布時(shí)間：2021-05-22 17:32:54 來源：億速云閱讀：191 作者：Leah 欄目：web開發(fā)

如何在Vue中使用對(duì)象提供的屬性？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

1.1 定義過濾器的兩種方式

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

Vue.filter("RMB1", function(v){
  //就是來格式化(處理)v這個(gè)數(shù)據(jù)的
  if(v==0){
   return v
  }
  return v+"元"
})

1.1.2 在Vue對(duì)象中通過filters屬性類定義

var vm = new Vue({
 el:"#app",
 data:{},
 filters:{
 RMB2:function(value){
  if(value==''){
  return;
  }else{
   return '&yen; '+value;
  }
 }
 }
});

1.2 計(jì)算和監(jiān)聽屬性

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

監(jiān)聽屬性時(shí)一個(gè)對(duì)象，它的鍵時(shí)要監(jiān)聽的對(duì)象或者變量，值是一個(gè)函數(shù)，當(dāng)監(jiān)聽的data數(shù)據(jù)發(fā)送變化時(shí)，會(huì)自定義執(zhí)行對(duì)應(yīng)的函數(shù)，這個(gè)函數(shù)在被調(diào)用時(shí)，vue會(huì)傳入兩個(gè)形參，第一個(gè)是變化前的數(shù)據(jù)值，第二個(gè)是變化后的數(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ā)生變化的時(shí)候，要執(zhí)行的代碼,num必須是data中的鍵
   num: function (newval, oldval) {
    console.log("num已經(jīng)發(fā)生變化了！", this.num)
   },
  }
 })
</script>
</body>
</html>

如何在Vue中使用對(duì)象提供的屬性

二 Vue 對(duì)象的生命周期

每個(gè)vue 對(duì)象在創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程。在這個(gè)過程中vue.js會(huì)自動(dòng)運(yùn)行一些叫做生命周期的鉤子函數(shù)，我們可以使用這些函數(shù)，在對(duì)象創(chuàng)建的不同階段加上我們需要的代碼，實(shí)現(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對(duì)象尚未創(chuàng)建,num=" + this.num);
   this.name = "zhangsan"; //此時(shí)沒有this對(duì)象，設(shè)置name是無效的
  },
  created: function () {
   console.log("created,vm對(duì)象創(chuàng)建完成,設(shè)置好了要控制的元素范圍,num=" + this.num); // 0
   this.num = 20;
  },
  beforeMount: function () {
   // this.$el 就是我們上面的el屬性了，$el表示當(dāng)前vue.js所控制的元素#app
   console.log(this.$el.innerHTML);
   console.log("beforeMount,vm 對(duì)象尚未把data數(shù)據(jù)顯示到頁面中，num=" + this.num);
  },
  mounted: function () {
   console.log(this.$el.innerHTML);
   console.log("mounted,vm對(duì)象已經(jīng)把data數(shù)據(jù)顯示到頁面中，num=" + this.num);
  },
  beforeUpdate: function () {
   console.log(this.$el.innerHTML);
   console.log("beforeUpdate,vm對(duì)象尚未把更新后的data數(shù)據(jù)顯示到頁面中，num=" + this.num);
  },
  updated: function () {
   console.log(this.$el.innerHTML);
   console.log("updated,vm對(duì)象已經(jīng)把更新后的data數(shù)據(jù)顯示到頁面中，num=" + this.num);
  },
 })
</script>
</body>
</html>

效果如下：

如何在Vue中使用對(duì)象提供的屬性

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

如何在Vue中使用對(duì)象提供的屬性

2.2 總結(jié)

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

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

另一個(gè)就是created，這個(gè)階段就是在 vue對(duì)象創(chuàng)建以后，把a(bǔ)jax請(qǐng)求后端數(shù)據(jù)的代碼放進(jìn) created

三阻止事件冒泡和刷新頁面

3.1 阻止事件冒泡

通過設(shè)置@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>

如何在Vue中使用對(duì)象提供的屬性

3.2 阻止表單提交和頁面刷新

通過設(shè)置 @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("頁面不刷新時(shí)執(zhí)行點(diǎn)擊提交的函數(shù)")
   },
  }
 })
</script>
</body>
</html>

如何在Vue中使用對(duì)象提供的屬性

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

看完上述內(nèi)容，你們掌握如何在Vue中使用對(duì)象提供的屬性的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

如何在Vue中使用對(duì)象提供的屬性

vue是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽