本篇僅示範在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] } 」。
沒有留言:
張貼留言