-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (173 loc) · 5.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础用法</title>
<style>
.danger {
color: #f00
}
.success {
color: #0f0
}
.bold {
font-weight: 900;
}
.underline {
text-decoration: underline
}
</style>
</head>
<body style="background: #f6f6d5">
<div id="basis">
<h2>{{title}} <sub><a style="text-decoration: none" href="../index.html">返回导航</a></sub></h2>
<p :title="message">鼠标放在此处查看当前时间</p>
<hr>
<!-- if/esle元素需要紧挨着 -->
<p v-if="Math.random() >= 0.8">随机给分优秀</p>
<p v-else-if="Math.random() >= 0.6">随机给分及格</p>
<p v-else>随机给分不及格</p>
<hr>
<p>下面是我的车:</p>
<ul v-for="car in cars">
<li>{{car.name}}</li>
</ul>
<hr>
<button @click="reverseStr">反转下方文本</button>
<p>{{hello}}</p>
<hr>
<p>双向绑定:<input type="text" v-model="info" @change="inputChange" /></p>
<hr>
<p>父组件遍历,向子组件传值:</p>
<ol>
<todo-item v-for="item in itemList" :todo="item" :key="item.id"></todo-item>
</ol>
<hr>
<p v-once>只插值一次:{{onceText}} <button @click="changeOnceText">点我也不变</button></p>
<hr>
<p>直接渲染:<span>{{htmlStr}}</span></p>
<p>添加v-html指令渲染:<span v-html="htmlStr"></span></p>
<hr>
<form action="http://www.baidu.com" @submit.prevent="formSubmit">
阻止表单默认提交:<input type="submit" />
</form>
<hr>
<p style="color: #00f">建议:用计算属性替换复杂的插值表达式</p>
<p>hello world反转:<span>{{reversedHello}}</span></p>
<hr>
<p>watch的使用:<input type="text" v-model="watchedStr" /></p>
<p v-html="answerStr"></p>
<hr>
<p>利用计算属性绑定class:<span :class="classObject">isSuccess == true</span></p>
<p>利用数组绑定class:<span :class="[{success: isSuccess}, 'bold']">[{success: isSuccess}, 'bold']</span></p>
<hr>
<p>在子组件上绑定class,原有class不会被覆盖掉</p>
<child-style class="danger" :style="styleObject"></child-style>
<hr>
<div :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}">样式绑定也可以绑定对象、数组</div>
<hr>
<p>v-show和v-if的区别:</p>
<p v-show="showMessage">v-show操作display属性,会正常渲染保留在DOM中。初次渲染开销大,频繁切换开销小。</p>
<p v-if="showMessage">v-if控制元素是否进入DOM渲染,初次渲染开销小,频繁切换开销大</p>
<p>注:v-if和v-for一起使用时,v-for具有更高优先级</p>
<hr>
<p>v-for细节</p>
<p>(item, index) in/of Array</p>
<p>(value, key, index) in Object</p>
<table border="1" style="border-collapse: collapse">
<tr v-for="(value, key, index) in vForObject" key="index"><!-- 建议v-for绑定key以便Vue追踪 -->
<td>{{index}}</td>
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
<hr>
<h3>通过以下方式修改数组,不触发Vue检测</h3>
<ul><li v-for="car of cars">{{car.name}}</li></ul>
<button @click="pushCar">通过 array[array.length]] = newItem 加车</button><br>
<button @click="popCar">通过 array.length-- 减车</button>
<hr>
<p>v-for="i in 10"</p>
<p>i:<span v-for="i in 10">{{i}} </span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
Vue.component('child-style', {
template: '<span class="underline">用来看子组件样式绑定效果</span>'
})
const basis = new Vue({
el: '#basis',
data: {
title: 'Vue基础',
message: new Date().toLocaleTimeString(),
cars: [{name: 'BMW'}, {name: 'Ferria'}, {name: 'Bugatti'}],
hello: 'hello world',
info: 'hahaha',
itemList: [{id: 1, text: 'child1'}, {id: 2, text: 'child2'}, {id: 3, text: 'child3'}],
onceText: '我就是我',
htmlStr: '<span style="color: red">Hello World</span>',
watchedStr: '',
answerStr: '',
isSuccess: true,
isDanger: false,
showMessage: true,
vForObject: {name: 'jinben', age: 23, car: 'Bugatti'}
},
computed: { // 计算属性与methods类似,区别是data中数据有变化才进行缓存(监听),而不是每次都执行计算
reversedHello: function() {
return this.hello.split('').reverse().join('')
},
classObject: function() {
return {
'success': this.isSuccess,
'danger': this.isDanger
}
},
styleObject: function() {
return {
fontFamily: 'STXingkai',
fontSize: '18px'
}
}
},
methods: {
reverseStr: function() {
this.hello = this.hello.split('').reverse().join('')
},
inputChange: function() {
alert('你输入了' + this.info)
},
changeOnceText: function() {
this.onceText = '我居然改变了'
},
formSubmit: function() {
alert('表单默认事件被我拦截了,现在用自定义事件提交')
},
pushCar: function() {
this.cars[this.cars.length] = {name: 'pushed car'}
},
popCar: function() {
this.cars.length--
}
},
watch: {
watchedStr: function(newVal, oldVal) {
this.answerStr = 'oldVal: <b>' + oldVal + '</b> newVal: <b>' + newVal + '</b>'
}
},
created: function() {
this.cars.splice(0, 1, {name: 'BMW X7'})
},
mounted: function() {
console.log('vue is mounted, here to call AJAX')
}
})
</script>
</body>
</html>