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

時間 2019-12-13

標籤 vue 基本使用對象提供屬性功能简体版

原文原文鏈接

一過濾器

過濾器就是vue容許開發者自定義的文本格式化函數，html

可使用在兩個地方：輸出內容和操做數據中。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中某個數據的變化，從而作相應的自定義操做。ajax

監聽屬性時一個對象，它的鍵時要監聽的對象或者變量，值是一個函數，當監聽的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會自動運行一些叫作生命週期的鉤子函數，咱們可使用這些函數，在對象建立的不一樣階段加上咱們須要的代碼，實現特定的功能。app

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>

效果以下：函數

點擊按鈕使數據更新後this

2.2 總結

在vue使用的過程當中，若是要初始化操做，把初始化操做的代碼放在 mounted 中執行。
mounted階段就是在vm對象已經把data數據實現到頁面之後。spa

通常頁面初始化使用。例如，用戶訪問頁面加載成功之後，就要執行的ajax請求。3d

另外一個就是created，這個階段就是在 vue對象建立之後，把ajax請求後端數據的代碼放進 createdcode

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

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>