1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 </head> 10 <body> 11 <div id="app">{{ message }}</div> 12 <div id="app2" v-if='true> 13 <span :title='message'> 14 鼠標懸停幾秒鍾查看此處動態綁定的提示信息！！！！！ 15 </span><br /> 16 <span v-bind:title="message"> 17 鼠標懸停幾秒鍾查看此處動態綁定的提示信息！ 18 </span> 19 </div> 20 <div id='app3'> 21 <ol> 22 <li v-for='todo in todos'>{{todo.text}}</li> 23 </ol> 24 </div> 25 <div id="app4"> 26 <p>{{ message }}</p> 27 <button v-on:click="reverseMessage">反轉消息</button><br /> 28 <button @click='reverseMessage2'>反轉消息</button> 29 </div> 30 <div id="app5"> 31 <p>{{ message }}</p> 32 <input v-model="message"> 33 </div> 34 <script> 35 let app = new Vue({ 36 el: '#app', 37 data: { 38 message: '哈哈哈' 39 } 40 }) 41 let app2 = new Vue({ 42 el: '#app2', 43 data: { 44 message: '頁面加載於 ' + new Date().toLocaleString() 45 } 46 }) 47 let app3 = new Vue({ 48 el: '#app3', 49 data: { 50 todos:[ 51 { text: '學習 JavaScript' }, 52 { text: '學習 Vue' }, 53 { text: '整個牛項目' } 54 ] 55 } 56 }) 57 let app4 = new Vue({ 58 el: '#app4', 59 data: { 60 message: 'Hello Vue.js!' 61 }, 62 methods: { 63 reverseMessage: function() { 64 this.message = this.message.split('').reverse().join('') 65 }, 66 reverseMessage2(){ 67 this.message = this.message.split('').reverse().join('') 68 } 69 } 70 }) 71 // 表單v-model雙向綁定 72 let app5 = new Vue({ 73 el: '#app5', 74 data: { 75 message: '你還好嗎？' 76 } 77 }) 78 </script> 79 <script> 80 /* 81 總結：v-bind,v-if,v-for,v-on,{{}},v-model 82 ①綁定數據：標簽屬性v-bind:title='xxx',簡寫:title='xxx', 標簽內容{{xxx}} 83 <span :title='message'>{{message}}</span> 84 ②綁定事件：<span v-on:click='clickMe'>點我</span> 或簡寫 <span @click='clickMe'>點我</span> 85 ③顯示和隱藏：<span v-if='xxx'>顯示和隱藏</span> ,注，xxx可以為表達式或者是Boolean后為true或false的其他值 86 v-if='undefined == null',v-if='-1'都為true。 v-if='null',v-if='undefined',v-if='0'都為false 87 ④遍歷：<span v-for='item in array'>{{item}}</span> 或 <span v-for='(item,index) in array'>{{index}}</span> 88 ⑤表單雙向綁定：<input v-model='message'></input><p>{{message}}</p> 89 ⑥創建vue實例語法 90 引入vue庫 91 let app = new Vue({ 92 el: '#id', 93 data: { 94 message: '你還好嗎？' 95 }, 96 methods: { 97 //this指app實例，可通過控制台app.message = '好久不見', 直接修改頁面內容 98 clickMe:function(e){ 99 this.message = this.message.split('').reverse().join('') 100 } 101 } 102 }) 103 */ 104 </script> 105 </body> 106 </html>