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>
