1 DOCTYPE html>
2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="UTF-8">
5 <title>Titletitle>
6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
7 head>
8 <style>
9 .class1{
10 /*background-color: green;*/
11 background: red;
12 color: yellow;
13 }
14 style>
15 <body>
16 <div id="app">
17 <p>{{message}}p>
18 <p v-if="seen">现在你看到我了p>
19 <p v-show="ok">Hello!p>
20 <a v-bind:href="url">百度一下a>
21 <a :href="url">百度一下v-bind缩写a>
22 <br>
23 <input v-model="message1">
24 <br>
25 <button v-on:click="reverseMessage">反转字符串button>
26 <button @click="reverseMessage">反转字符串v-on缩写button>
27 <br>{{message|capitalize}}
28
29 <br><h1>v-if条件语句h1>
30 <div v-if="Math.random()>0.5">
31 Sorry
32 div>
33 <div v-else>
34 Not Sorry
35 div>
36
37 <div v-if="type == 'A'">Adiv>
38 <div v-else-if="type == 'B'">Bdiv>
39 <div v-else-if="type == 'C'">Cdiv>
40 <div v-else>Not A/B/Cdiv>
41
42 div>
43
44 <hr>
45 <div id="vue_det">
46 <h1>site:{{site}}h1>
47 <h1>url:{{url}}h1>
48 <h1>{{details()}}h1>
49 div>
50
51 <hr>
52 <div id="app1">
53 <div v-html="message">div>
54 div>
55
56 <hr>
57 <div id="app2">
58 <label for="r1">修改颜色label>
59 <input type="checkbox" v-model="use" id="r1"><br>
60 <div v-bind:class="{'class1':use}">
61 v-bind:class改变颜色
62 div>
63 div>
64
65 <hr>
66 <div id="app3">
67 {{5+5}}<br>
68 {{ok? 'Yes' : 'No'}}<br>
69 {{message.split('').reverse().join('')}}
70 <div v-bind:id="'list-'+id">百度一下div>
71 div>
72
73 <hr><h1>v-for循环语句h1>
74 <div id="app4">
75 <ol>
76 <li v-for="site in sites">
77 {{site.name}}
78 li>
79 ol>
80 <ul>
81 <template v-for="site in sites">
82 <li>{{site.name}}li>
83 template>
84 ul>
85 <ul>
86 <li v-for="value,key,index in object">
87 {{index}}:{{key}}---{{value}}
88 li>
89 <li v-for="n in 10">{{n}}li>
90 ul>
91 div>
92
93 <hr><h1>computed计算属性h1>
94 <div id="app5">
95 <p>原始字符串：{{message}}p>
96 <p>计算后的反转字符串：{{reversedMessage}}p>
97 div>
98
99 <hr><h1>监听属性h1>
100 <div id="app6">
101 <p style="font-size: 25px;">计数器：{{counter}}p>
102 <button @click="counter++" style="font-size: 25px;">点击计数button><br>
103 千米：<input type="text" v-model="kilometers">
104 米：<input type="text" v-model="meters">
105 <p id="info">p>
106 div>
107
108 <hr><h1>样式绑定h1>
109 <div id="app7">
110 <div v-bind:style="styleObject">字体样式改变div>
111 <div v-bind:style="[styleObject, backStyle]">字体多种样式改变div>
112 div>
113
114 <hr><h1>事件处理器v-onh1>
115 <div id="app8">
116 <button @click="counter+=1">增加1button>
117 <p>这个按钮被点击了{{counter}}次p>
118 <button @click="say('hi')">Say hibutton>
119 <button @click="say('what')">Say whatbutton>
120 div>
121 <hr><h1>表单，用 v-model 指令在表单控件元素上创建双向数据绑定h1>
122
123
124 <div id="app9">
125 <input v-model="message" placeholder="编辑内容显示。。。">
126 <textarea v-model="message1" placeholder="多行文本输入">textarea>
127
128 <p>单个复选框：p>
129 <input type="checkbox" id="checkbox" v-model="checked">
130 <label for="checkbox">{{checked}}label>
131 <p>多个复选框：p>
132 <input type="checkbox" id="taobao1" value="taobao" v-model="checkedNames">
133 <label for="taobao1">taobaolabel>
134 <input type="checkbox" id="google1" value="google" v-model="checkedNames">
135 <label for="google1">googlelabel>
136 <input type="checkbox" id="facebook1" value="facebook" v-model="checkedNames">
137 <label for="facebook1">facebooklabel>
138 <br>
139 <span>选择的值为：{{checkedNames}}span>
140
141 <p>单选框：p>
142 <input type="radio" id="facebook2" value="facebook" v-model="picked">
143 <label for="facebook2">facebooklabel>
144 <br>
145 <input type="radio" id="google2" value="google" v-model="picked">
146 <label for="google2">googlelabel>
147 <br>
148 <span>选择的值为：{{picked}}span>
149
150 <p>下拉列表--select 列表p>
151 <select v-model="selected" name="好像没用上">
152 <option value="">选择一个网站option>
153 <option value="www.baidu.com">百度option>
154 <option value="www.taobao.com">淘宝option>
155 select>
156 <div id="output">选择的网站是：{{selected}}div>
157
158 div>
159
160 <hr><h1>组件Componenth1>
161 <div id="app10">
162 <chunfang>chunfang>
163 <chunfang1>chunfang1>
164 <child message="Hello!">child>
165 div>
166 <div id="app11">
167 <input v-model="parentMsg"><br>
168 <child2 v-bind:message2="parentMsg">child2>
169 div>
170 <hr><h1>组件Component--自定义事件h1>
171 <div id="app12">
172 <div id="counter-event-example">
173 <p>{{total}}p>
174 <button-counter v-on:increment="incrementTotal">button-counter>
175 <button-counter v-on:increment="incrementTotal">button-counter>
176 div>
177 div>
178
179 <hr><h1>自定义指令h1>
180 <div id="app13">
181 <p>页面载入时，input元素自动获取焦点p>
182 <input v-focus>
183 div>
184
185 <script>
186 new Vue({
187 el:'#app',
188 data:{
189 message:'baidu!',
190 message1:'百度一下，输入框填入的',
191 seen:true,
192 ok:true,
193 url:'https://www.baidu.com',
194 type:'C'
195 },
196 methods: {
197 reverseMessage:function () {
198 this.message1 = this.message1.split('').reverse().join('')
199 }
200 },
201 filters:{
202 capitalize:function (value) {
203 if(!value) return '';
204 value = value.toString();
205 return value.charAt(0).toUpperCase()+value.slice(1)
206 }
207 }
208 });
209
210 var vm = new Vue({// Vue 构造器
211 el:'#vue_det',//el 参数，它是 DOM 元素中的 id
212 data:{//data 用于定义属性
213 site:"第一个正式的测试VUE",
214 url:"www.baidu.com",
215 alexa:"10000"
216 },
217 methods:{//methods 用于定义的函数，可以通过 return 来返回函数值
218 details:function () {
219 return this.site + "-这是一个连接到百度的网址";
220 }
221 }
222 });
223
224 new Vue({
225 el:'#app1',
226 data:{
227 message: '百度一下
'
228 }
229 });
230
231 new Vue({
232 el:'#app2',
233 data:{
234 use:false//判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类
235 }
236 });
237
238 new Vue({
239 el:'#app3',
240 data:{
241 ok:true,
242 message:'baidu',
243 id:1
244 }
245 });
246
247 new Vue({
248 el:'#app4',
249 data:{
250 sites:[
251 {name:'baidu'},
252 {name:'360'},
253 {name:'雅虎'},
254 ],
255 object:{
256 name:'百度一下',
257 url: 'http://www.baidu.com',
258 slogan:'世界因我而改变！',
259 },
260 },
261 });
262
263 var vm = new Vue({
264 el:'#app5',
265 data:{message:'反转字符串'},
266 computed:{
267 reversedMessage:function () {//声明了一个计算属性 reversedMessage
268 return this.message.split('').reverse().join('')//// `this` 指向 vm 实例
269 }
270 },
271 });
272
273 var vm = new Vue({//实例进行千米与米之间的换算
274 el:'#app6',
275 data:{
276 counter:1,
277 kilometers:0,
278 meters:0,
279 },
280 methods:{},
281 watch:{
282 kilometers: function (val) {
283 this.kilometers = val;
284 this.meters =this.kilometers *1000;
285 },
286 meters:function (val) {
287 this.kilometers = val/1000;
288 this.meters = val;
289 },
290 },
291 });
292 vm.$watch('kilometers',function (newValue,oldValue) {//通过 watch 来响应数据的变化
293 document.getElementById("info").innerHTML ="修改前的值为："+oldValue+"，修改后的值为："+newValue;
294 });
295
296 new Vue({
297 el:'#app7',
298 data:{
299 styleObject:{
300 color:'green',
301 fontSize:'30px',
302 width:'500px',
303 },
304 backStyle:{
305 background:'red',
306 'font-weight':'bold',
307 },
308
309 },
310 });
311
312 new Vue({
313 el:'#app8',
314 data:{counter: 0},
315 methods:{//直接绑定到一个方法
316 say:function (message) {
317 alert(message);
318 }
319 },
320 });
321
322 new Vue({
323 el:'#app9',
324 data:{
325 message:'xian显示在框中',
326 message1:'多行文本显示框中\r\n并换行',
327 checked:false,
328 checkedNames:[],
329 picked:'facebook',
330 selected:'',
331 },
332 });
333
334 Vue.component('chunfang',{//// 注册
335 template:'自定义的全局组件
'
336 });
337 new Vue({//// 创建根实例
338 el:'#app10',
339 });
340
341 var Child={template: '这是自定义的局部组件
'};
342 new Vue({//// 创建根实例
343 el:'#app10',
344 components:{//// 将只在父模板可用
345 'chunfang1':Child,
346 },
347 });
348
349 Vue.component('child',{// 注册
350 props:['message'],// 声明 props
351 template:'{{message}}',// 同样也可以在 vm 实例中像 “this.message” 这样使用
352 });
353 new Vue({// 创建根实例
354 el:'#app10',
355 });
356
357 Vue.component('child2',{// 注册
358 props:['message2'],// 声明 props、、动态 Prop
359 template:'{{message2}}',// 同样也可以在 vm 实例中像 “this.message” 这样使用
360 });
361 new Vue({// 创建根实例
362 el:'#app11',
363 data:{
364 parentMsg:'父组件的内容'
365 },
366 });
367
368 Vue.component('button-counter',{
369 template:'',
370 data:function () {//// data 选项是一个函数，组件不相互影响
371 return {counter:0}
372 },
373 methods:{
374 incrementHandler:function () {
375 this.counter+=1;
376 this.$emit('increment');//使用 $emit(eventName) 触发事件
377 },
378 },
379 });
380 new Vue({
381 el:'#app12',
382 data:{total:0},
383 methods:{
384 incrementTotal:function () {
385 this.total +=1;
386 },
387 },
388 });
389
390 Vue.directive('focus',{// 注册一个全局自定义指令 v-focus
391 inserted:function (el) {// 当绑定元素插入到 DOM 中。
392 el.focus();// 聚焦元素
393 },
394 });
395 new Vue({// 创建根实例
396 el:'#app13',
397 });
398
399 script>
400
401 body>
402 html>