java web 課上實驗
阿新 • • 發佈：2021-06-10
雙大括號，強制資料繫結，繫結事件監聽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <p>使用者名稱: {{username}}</p><!--雙大括號--> <img v-bind:src="imgUrl" alt="logo1"><!--強制資料繫結--> <img :src="imgUrl" alt="logo2"><!--簡寫形式--> <button v-on:click="sayHello">打招呼</button><!--繫結事件監聽--> <button @click="sayHello">打招呼</button><!--簡寫形式--> </div> <script> // 建立vue例項 const vm = new Vue({// 配置物件 el: '#app',//選擇器 data: {//資料：model username: 'vue', imgUrl: 'https://cn.vuejs.org/images/logo.svg' }, methods: { sayHello(){ alert('hello') } } }) </script> </body> </html>