網頁

▼

2019/2/4

Vue 在Mustache符號中插入Vue methods

本篇僅示範在html中使用Vue的Mustache tag{{}}（又稱模板語法(template syntax)）插入Vue實例的methods的回傳值。

閱讀本篇前建議先看Vue 我的第一支Vue.js

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue.js-->
</head>
<body>
    <div id="app">
        <!--Vue的Mustache符號{{}}，greeting為下面Vue實例的methods的greeting。-->
        <h1>{{greeting()}}</h1> <!--印出 hello john -->
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app", // 與id="app"的DOM元素綁定
        data: {
            name: "john",
            message: "hello"
        },
        methods: {
            greeting: function () {
                return this.message + " " + this.name;
            }
        }

    });
</script>
</html>

定義Vue實例中的Options(e.g. data, methods)時，不要使用JavaScript ES6的箭頭函式(arrow function)語法，否則會取不到this（也就是無法用this取得Vue的實例本身），因為箭頭函式的this是parent context而非Vue的實例，所以會導致錯誤Uncaught TypeError: Cannot read property of undefined。

在Vue的Mustache符號{{}}呼叫Vue實例的方法(methods)時記得後面要加上括號，例如應該是{{greeting()}}而不是{{greeting}}，否則僅會印出「function () { [native code] } 」。

沒有留言:

張貼留言