vue day1

  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>