Vue基礎系列（二）——Vue中的methods屬性

時間 2019-11-07

標籤 vue 基礎系列 methods 屬性简体版

原文原文鏈接

寫在前面的話：javascript

文章是我的學習過程當中的總結，爲方便之後回頭在學習。html

文章中會參考官方文檔和其餘的一些文章，示例均爲親自編寫和實踐，如有寫的不對的地方歡迎你們指出。前端

做者簡介：vue

一個不知名的前端開發，正在爲能走向更高更遠的地方而努力。java

VUE基礎系列目錄

《VUE基礎系列（一）——VUE入坑第一篇》npm

《VUE基礎系列（二）——VUE中的methods屬性》函數

一.前言

　　上一篇《VUE基礎系列（一）——VUE入坑第一篇》咱們學習並實踐了下面的幾個點：學習

建立了一個vue實例this

　　　將實例掛載到了div#box這個DOM節點上spa

　　　　在html使用雙花括號插值法引用顯示了data中的數據

那麼這篇呢，主要是學習總結給如何給在VUE構造函數中添加一些方法。

二.在VUE構造函數中添加methods屬性

#建立項目目錄

#基本語法

var vm = new Vue({

    methods:{
    //在此處定義方法
    方法名：function(){
      
    }
  }
});

備註：在構造函數外部定義方法，直接使用vm.方法名 = function(){}；一樣，若想在構造函數外部調用methods中定義的方法，直接使用 vm.方法名便可

#示例

　　在這個示例以前須要補充一個知識點：如在methods方法中訪問data的數據 。

　　前一篇文章咱們介紹了在Vue構造函數外部使用vm.$data.屬性名去訪問data中的數據。而在methods方法中，咱們能夠直接使用this.屬性名去訪問data中的數據，其中this表示的就是vue實例對象。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>給vue添加methods屬性</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, }, methods:{ add: function(){ //在methods內部訪問data中的數據：this.屬性名
 console.log(this.name); // 'todo'
                    return this; } } }); // 構造函數外部調用add方法
        var obj = vm.add(); //驗證methods中的this對象是不是vue的實例
 console.log(obj == vm); //true
    </script>
</body>
</html>