码迷,mamicode.com
首页 > 其他好文 > 详细

Vue的学习(二)

时间:2019-12-31 01:40:39      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:基本点   inpu   刷新   自己   ast   数值   for   变异   NPU   

11、v-for 操作对象与数值:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>v-for操作对象与数值</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <!--item:表示值、key:表示键、index:表示下标-->
13     <li v-for="(item, key, index) in user">
14         {{index}} - {{key}} - {{item}}
15     </li>
16     <table border="1" width="50%">
17         <tr v-for="v in 20">
18             <td>{{v}}</td>
19         </tr>
20     </table>
21 </div>
22 </body>
23 <script>
24     var vm = new Vue({
25         el: #app,
26         data: {
27             user: {
28                 name: 向军,
29                 age: 22,
30                 sex: boy
31             }
32         }
33     });
34 </script>
35 </html>

12、v-for与computed结合功能实例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>v-for与computed结合功能实例</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <li v-for="v in stus">
13         {{v.name}} - {{v.sex}}
14         <input type="radio" v-model="type" value="all" /> 全部
15         <input type="radio" v-model="type" value="girl"/> 女孩
16         <input type="radio" v-model="type" value="boy"/> 男孩
17     </li>
18 </div>
19 </body>
20 <script>
21     var vm = new Vue({
22         el: #app,
23         computed: {
24             stus () {
25                 if (this.type == all) {
26                     return this.user
27                 } else {
28                     return this.user.filter((v) => {
29                         return v.sex == this.type
30                     })
31                 }
32             }
33         },
34         data: {
35             type: all,
36             user: [
37                 {name: 小明, sex: boy},
38                 {name: 小丽, sex: girl},
39                 {name: 小强, sex: boy},
40                 {name: 小花, sex: girl}
41             ]
42         }
43     })
44 </script>
45 </html>

13、变异方法push的留言版实例的实现:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变异方法push的留言版实例讲解</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <div v-for="v in comments">
13         <span>{{v.content}}</span>
14     </div>
15     <textarea v-model="current_content" cols="30" rows="10"></textarea>
16     <button v-on:click="push">发表</button>
17 </div>
18 </body>
19 <script>
20     var vm = new Vue({
21         el: #app,
22         data: {
23             //当前用户输入内容
24             current_content:‘‘,
25             comments: [
26                 {content: 你好世界!},
27                 {content: 我来了!你呢?}
28             ]
29         },
30         methods: {
31             push() {
32                 var content = {content:this.current_content};
33                 this.comments.push(content);
34                 this.current_content = ‘‘
35             }
36         }
37     })
38 </script>
39 </html>

14、变异方法unshit&pop&shift的实例应用:

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变异方法push的留言版实例讲解</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <li v-for="v in comments">
13         {{v.content}}
14     </li>
15     <textarea v-model="current_content" cols="30" rows="10"></textarea> <br />
16     <button v-on:click="push(‘end‘)">发表到后面</button>
17     <button v-on:click="push(‘pre‘)">发表到前面</button>
18     <br />
19     <button v-on:click="del(‘last‘)">删除最后一条</button>
20     <button v-on:click="del(‘first‘)">删除第一条</button>
21 </div>
22 </body>
23 <script>
24     var vm = new Vue({
25         el: #app,
26         data: {
27             //当前用户输入内容
28             current_content:‘‘,
29             comments: [
30                 {content: 你好世界!},
31                 {content: 我来了!你呢?}
32             ]
33         },
34         methods: {
35             push(type) {
36                 var content = {content:this.current_content};
37                 switch (type) {
38                     case end:
39                         this.comments.push(content);
40                         this.current_content="";
41                         break;
42                     case pre:
43                         this.comments.unshift(content);
44                         this.current_content="";
45                         break;
46                 }
47             },
48             del(type) {
49                 switch (type) {
50                     case last:
51                         this.comments.pop();
52                         break;
53                     case first:
54                         this.comments.shift();
55                         break;
56                 }
57             }
58         }
59     })
60 </script>
61 </html>

15、变异方法splice的实例应用:

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变异方法push的留言版实例讲解</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <li v-for="(v,k) in comments">
13         {{v.content}} <button v-on:click="remove(k)">删除</button>
14     </li>
15     <textarea v-model="current_content" cols="30" rows="10"></textarea> <br />
16     <button v-on:click="push(‘end‘)">发表到后面</button>
17     <button v-on:click="push(‘pre‘)">发表到前面</button>
18     <br />
19     <button v-on:click="del(‘last‘)">删除最后一条</button>
20     <button v-on:click="del(‘first‘)">删除第一条</button>
21 </div>
22 </body>
23 <script>
24     var vm = new Vue({
25         el: #app,
26         data: {
27             //当前用户输入内容
28             current_content:‘‘,
29             comments: [
30                 {content: 你好世界!},
31                 {content: 我来了!你呢?}
32             ]
33         },
34         methods: {
35             remove(k){
36                 this.comments.splice(k,1);
37             },
38             push(type) {
39                 var content = {content:this.current_content};
40                 switch (type) {
41                     case end:
42                         this.comments.push(content);
43                         break;
44                     case pre:
45                         this.comments.unshift(content);
46                         break;
47                 }
48             },
49             del(type) {
50                 switch (type) {
51                     case last:
52                         this.comments.pop();
53                         break;
54                     case first:
55                         this.comments.shift();
56                         break;
57                 }
58             }
59         }
60     })
61 </script>
62 </html>

16、变异方法sort与reverse的实例应用:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变异方法sort与reverse的留言版实例讲解</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <li v-for="(v,k) in comments">
13         {{v.id}}  -  {{v.content}} <button v-on:click="remove(k)">删除</button>
14     </li>
15     <textarea v-model="current_content" cols="30" rows="10"></textarea> <br />
16     <button v-on:click="push(‘end‘)">发表到后面</button>
17     <button v-on:click="push(‘pre‘)">发表到前面</button>
18     <br />
19     <button v-on:click="del(‘last‘)">删除最后一条</button>
20     <button v-on:click="del(‘first‘)">删除第一条</button>
21     <button v-on:click="del()">删除全部</button>
22     <br />
23     <button v-on:click="reverse()">反转顺序</button>
24     <button v-on:click="sort()">按照编号排序</button>
25 
26 </div>
27 </body>
28 <script>
29     const vm = new Vue({
30         el: #app,
31         data: {
32             //当前用户输入内容
33             current_content:‘‘,
34             comments: [
35                 {id:2,content: 你好世界!},
36                 {id:4,content: 我来了!你呢?},
37                 {id:1,content: 快活吧!},
38                 {id:3,content: 真的?},
39             ]
40         },
41         methods: {
42             sort() {
43                 this.comments.sort((a, b) => {
44                     return a.id<b.id;
45                 });
46             },
47             reverse() {
48                 this.comments.reverse();
49             },
50             remove(k){
51                 this.comments.splice(k,1);
52             },
53             push(type) {
54                 const id = this.comments.length + 1;
55                 const content = {id,content:this.current_content};
56                 switch (type) {
57                     case end:
58                         this.comments.push(content);
59                         this.current_content = "";
60                         break;
61                     case pre:
62                         this.comments.unshift(content);
63                         this.current_content = "";
64                         break;
65                 }
66             },
67             del(type) {
68                 switch (type) {
69                     case last:
70                         this.comments.pop();
71                         break;
72                     case first:
73                         this.comments.shift();
74                         break;
75                     default:
76                         this.comments = "";
77                 }
78             }
79         }
80     })
81 </script>
82 </html>

   解释:里面的 sort 方法有点问题。

17、变异方法filter与regexp实现搜索功能:

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>变异方法filter与regexp实现搜索功能</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <li v-for="(v,k) in comments">
13         {{v.id}}  -  {{v.content}} <button v-on:click="remove(k)">删除</button>
14     </li>
15     <textarea v-model="current_content" cols="30" rows="10"></textarea> <br />
16     <button v-on:click="push(‘end‘)">发表到后面</button>
17     <button v-on:click="push(‘pre‘)">发表到后面</button>
18     <br />
19     <button v-on:click="del(‘last‘)">删除最后一条</button>
20     <button v-on:click="del(‘first‘)">删除第一条</button>
21     <br />
22     <button v-on:click="sort()">按照编号排序</button>
23     <button v-on:click="reverse()">反转顺序</button>
24     <br />
25     <input type="text" v-on:keyup.enter="search" v-model="search_content" />
26 </div>
27 </body>
28 <script>
29     var vm = new Vue({
30         el: #app,
31         data: {
32             //搜索内容
33             search_content:‘‘,
34             //当前用户输入内容
35             current_content:‘‘,
36             comments: [
37                 {id:2,content: 你好世界!},
38                 {id:4,content: 我来了!你呢?},
39                 {id:1,content: 快活吧!},
40                 {id:3,content: 真的?},
41             ]
42         },
43         methods: {
44             search() {
45                 // this.comments = this.comments.filter(function (item) {
46                 //   console.log(this.search_content); 这个this并没有指向当前的vm,所以这里使用ES6的语法,就会指向当前的vm
47                 // })
48                 this.comments = this.comments.filter((item) => {
49                     var reg = new RegExp(this.search_content);
50                     return reg.test(item.content);
51                 })
52             },
53             sort() {
54                 this.comments.sort(function (a, b) {
55                     return a.id>b.id;
56                 })
57             },
58             reverse() {
59                 this.comments.reverse();
60             },
61             remove(k){
62                 this.comments.splice(k,1);
63             },
64             push(type) {
65                 var id = this.comments.length + 1;
66                 var content = {id,content:this.current_content};
67                 switch (type) {
68                     case end:
69                         this.comments.push(content);
70                         break;
71                     case pre:
72                         this.comments.unshift(content);
73                         break;
74                 }
75             },
76             del(type) {
77                 switch (type) {
78                     case last:
79                         this.comments.pop();
80                         break;
81                     case first:
82                         this.comments.shift();
83                         break;
84                 }
85             }
86         }
87     })
88 </script>
89 </html>

18、vue的基本点击事件:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue的基本点击事件</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <li v-for="(v,k) in comments">
13         <!--v-on:click 的简写:@click-->
14         {{k}}  -  {{v.content}} <button @click="remove(k)">删除</button>
15     </li>
16 </div>
17 </body>
18 <script>
19     var vm = new Vue({
20         el: #app,
21         data: {
22             comments: [
23                 {id:2,content: 你好世界!},
24                 {id:4,content: 我来了!你呢?},
25                 {id:1,content: 快活吧!},
26                 {id:3,content: 真的?},
27             ]
28         },
29         methods: {
30             remove(k) {
31                 alert("删除:"+k);
32                 this.comments.splice(k,1)
33             }
34         }
35     })
36 </script>
37 </html>

19、事件修饰符之使用$event与prevent修饰符操作表单:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件修饰符之使用$event与prevent修饰符操作表单</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <!--设置表单提交的时候,不刷新页面(默认行为)-->
13     <!--方式一:-->
14     <!--<form action="" @submit="post(‘php‘,$event)">
15       <h1>{{times}}</h1>
16       <button>提交</button>
17     </form>-->
18     <!--方式二:-->
19     <form action="" @submit.prevent="post(‘php‘)">
20         <h1>{{times}}</h1>
21         <button>提交</button>
22     </form>
23 </div>
24 </body>
25 <script>
26     var vm = new Vue({
27         el: #app,
28         data: {
29             times: new Date()
30         },
31         methods: {
32             /*方式一:*/
33             /*post(num,event) {
34               event.preventDefault();
35               alert(num);
36             }*/
37             /*方式二:*/
38             post(num) {
39                 alert(num);
40             }
41         }
42     })
43 </script>
44 </html>

20、事件修饰之stop&capture&self实例详解:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件修饰之stop&capture&self实例详解</title>
 6     <script src="./lib/vue.js"></script>
 7     <style>
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <div @click="box" :style="{border:‘solid 2px red‘}">
13         <!--prevent:阻止默认行为,即可以阻止 a 标签的跳转行为-->
14         <!--stop:阻止冒泡行为,函数支持链式调用  once:动作只执行一次,一次后就失效-->
15         <a href="http://jquery.cuishifeng.cn/load.html" @click.prevent.stop.once="link">百度</a>
16     </div>
17 
18     <!--self:只有点击自己的时候才有效果,冒泡是没有效果的-->
19     <div @click.self="box" :style="{border:‘solid 2px red‘}">
20         <!--prevent:阻止默认行为,即可以阻止 a 标签的跳转行为-->
21         <!--stop:阻止冒泡行为,函数支持链式调用-->
22         <a href="http://jquery.cuishifeng.cn/load.html" @click.prevent="link">百度</a>
23     </div>
24 
25     <!--capture:捕获行为-->
26     <div @click.capture="box" :style="{border:‘solid 2px red‘}">
27         <!--prevent:阻止默认行为,即可以阻止 a 标签的跳转行为-->
28         <!--stop:阻止冒泡行为,函数支持链式调用-->
29         <a href="http://jquery.cuishifeng.cn/load.html" @click.prevent="link">百度</a>
30     </div>
31 </div>
32 </body>
33 <script>
34     var vm = new Vue({
35         el: #app,
36         data: {},
37         methods: {
38             box () {
39                 alert(div)
40             },
41             links () {
42                 alert(baidu.com)
43             }
44         }
45     })
46 </script>
47 </html>

Vue的学习(二)

标签:基本点   inpu   刷新   自己   ast   数值   for   变异   NPU   

原文地址:https://www.cnblogs.com/maigy/p/12122242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!