1 <!doctype <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Page Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 9 <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script> 10 </head> 11 <body> 12 <div id="app"> 13 {{ message }} 14 </div> 15 <div id="app-2"> 16 <span v-bind:title="message"> 17 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 18 </span> 19 </div> 20 <div id="app-3"> 21 <p v-if="seen">现在你看到我了</p> 22 </div> 23 <div id="app-4"> 24 <ol> 25 <li v-for="todo in todos"> 26 {{ todo.text }} 27 </li> 28 </ol> 29 </div> 30 <div id="app-5"> 31 <p>{{ message }}</p> 32 <button v-on:click="reverseMessage">逆转消息</button> 33 </div> 34 <div id="app-6"> 35 <p>{{ message }}</p> 36 <input v-model="message"> 37 </div> 38 39 <div id="app-7"> 40 <ol> 41 <!-- 42 现在我们为每个 todo-item 提供 todo 对象 43 todo 对象是变量，即其内容可以是动态的。 44 我们也需要为每个组件提供一个“key”，稍后再 45 作详细解释。 46 --> 47 <todo-item 48 v-for="item in groceryList" 49 v-bind:todo="item" 50 v-bind:key="item.id"> 51 </todo-item> 52 </ol> 53 </div> 54 55 <script type="text/javascript"> 56 var app = new Vue({ 57 el: '#app', 58 data: { 59 message: 'Hello Vue!' 60 } 61 }); 62 //js app.message='sdf' 63 var app2 = new Vue({ 64 el: '#app-2', 65 data: { 66 message: '页面加载于 ' + new Date().toLocaleString() 67 } 68 }); 69 //js 提示 app2.message = '新消息' 70 var app3 = new Vue({ 71 el: '#app-3', 72 data: { 73 seen: true 74 } 75 }); 76 //js app3.seen = false 77 var app4 = new Vue({ 78 el: '#app-4', 79 data: { 80 todos: [ 81 { text: '学习 JavaScript' }, 82 { text: '学习 Vue' }, 83 { text: '整个牛项目' } 84 ] 85 } 86 }); 87 //js app4.todos.push({ text: '新项目' }) 88 var app5 = new Vue({ 89 el: '#app-5', 90 data: { 91 message: 'Hello Vue.js!' 92 }, 93 methods: { 94 reverseMessage: function () { 95 this.message = this.message.split('').reverse().join('') 96 } 97 } 98 }); 99 var app6 = new Vue({ 100 el: '#app-6', 101 data: { 102 message: 'Hello Vue!' 103 } 104 }); 105 106 Vue.component('todo-item', { 107 props: ['todo'], 108 template: '<li>{{ todo.text }}</li>' 109 }) 110 111 var app7 = new Vue({ 112 el: '#app-7', 113 data: { 114 groceryList: [ 115 { id: 0, text: '蔬菜' }, 116 { id: 1, text: '奶酪' }, 117 { id: 2, text: '随便其它什么人吃的东西' } 118 ] 119 } 120 }) 121 </script> 122 123 </body> 124 </html>