vue备忘

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <title>My first Vue app</title>
  5   <!-- <script src="https://unpkg.com/vue"></script> -->
  6   <script src="vue.min.js"></script>
  7 </head>
  8 <body>
  9   <div id="app">
 10     {{ message }}
 11   </div>
 12   <div id="app-2">
 13     <span v-bind:title="message">
 14       Hover your mouse over me for a few seconds
 15       to see my dynamically bound title!
 16     </span>
 17   </div>
 18   <div id="app-3">
 19     <span v-if="seen">Now you see me</span>
 20   </div>
 21   <div id="app-4">
 22     <ol>
 23       <li v-for="todo in todos">
 24         {{ todo.text }}
 25       </li>
 26     </ol>
 27   </div>
 28   <div id="app-5">
 29     <p>{{ message }}</p>
 30     <button v-on:click="reverseMessage">Reverse Message</button>
 31   </div>
 32   <div id="app-6">
 33     <p>{{ message }}</p>
 34     <input v-model="message">
 35   </div>
 36   <div id="app-7">
 37     <ol>
 38       <!--
 39         Now we provide each todo-item with the todo object
 40         it's representing, so that its content can be dynamic.
 41         We also need to provide each component with a "key",
 42         which will be explained later.
 43       -->
 44       <todo-item
 45         v-for="item in groceryList"
 46         v-bind:todo="item"
 47         v-bind:key="item.id"
 48       ></todo-item>
 49     </ol>
 50   </div>
 51   <script>
 52     var app = new Vue({
 53       el: '#app',
 54       data: {
 55         message: 'Hello Vue!'
 56       }
 57     })
 58     var app2 = new Vue({
 59         el: '#app-2',
 60         data: {
 61             message: 'You loaded this page on ' + new Date().toLocaleString()
 62         }
 63     })
 64     var app3 = new Vue({
 65         el: '#app-3',
 66         data: {
 67             seen: true
 68         }
 69     })
 70     var app4 = new Vue({
 71         el: '#app-4',
 72         data: {
 73             todos: [
 74             { text: 'Learn JavaScript' },
 75             { text: 'Learn Vue' },
 76             { text: 'Build something awesome' }
 77             ]
 78         }
 79     })
 80     var app5 = new Vue({
 81         el: '#app-5',
 82         data: {
 83             message: 'Hello Vue.js!'
 84         },
 85         methods: {
 86             reverseMessage: function () {
 87             this.message = this.message.split('').reverse().join('');
 88             app.message = new Date().toLocaleString();
 89             app3.seen = !app3.seen;
 90             }
 91         }
 92     })
 93     var app6 = new Vue({
 94         el: '#app-6',
 95         data: {
 96             message: 'Hello Vue!'
 97         }
 98     })
 99     Vue.component('todo-item', {
100         props: ['todo'],
101         template: '<li>{{ todo.text }}</li>'
102     })
103 
104 var app7 = new Vue({
105   el: '#app-7',
106   data: {
107     groceryList: [
108       { id: 0, text: 'Vegetables' },
109       { id: 1, text: 'Cheese' },
110       { id: 2, text: 'Whatever else humans are supposed to eat' }
111     ]
112   }
113 })
114   </script>
115 </body>
116 </html>

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>My first Vue app</title>
 5   <!-- <script src="https://unpkg.com/vue"></script> -->
 6   <script src="vue.min.js"></script>
 7   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
 8 </head>
 9 <body>
10     <div id="app">
11       <p>{{ foo }}</p>
12       <!-- this will no longer update `foo`! -->
13       <button v-on:click="foo = 'baz'">Change it</button>
14     </div>
15     <div id="example">
16       <p>Original message: "{{ message }}"</p>
17       <p>Computed reversed message: "{{ reversedMessage }}"</p>
18       <p>Computed now message: "{{ now }}"</p>
19     </div>
20   <script>
21     var obj = {
22       foo: 'bar'
23     }
24 
25     // Object.freeze(obj)
26 
27     new Vue({
28       el: '#app',
29       data: obj
30     })
31 
32     new Vue({
33       data: {
34         a: 1
35       },
36       created: function () {
37         // `this` points to the vm instance
38         console.log('a is: ' + this.a)
39       }
40     })
41 
42     var vm = new Vue({
43       el: '#example',
44       data: {
45         message: 'Hello'
46       },
47       computed: {
48         // a computed getter
49         reversedMessage: function () {
50           // `this` points to the vm instance
51           return this.message.split('').reverse().join('')
52         },
53         now: function () {
54           return Date.now()
55         }
56       }
57     })
58   </script>
59 </body>
60 </html>

01.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>My first Vue app</title>
 5   <!-- <script src="https://unpkg.com/vue"></script> -->
 6   <script src="vue.min.js"></script>
 7   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
 8 </head>
 9 <body>
10     <div id="demo">{{ fullName }}</div>
11     <ul id="example-1">
12         <li v-for="item in items">
13           {{ item.message }}
14         </li>
15       </ul>
16       <ul id="v-for-object" class="demo">
17           <li v-for="value in object">
18             {{ value }}
19           </li>
20           
21         <div v-for="(value, name) in object">
22             {{ name }}: {{ value }}
23           </div>
24           <div v-for="(value, name, index) in object">
25               {{ index }}. {{ name }}: {{ value }}
26             </div>
27             <div v-for="(value, index, name) in object">
28                 {{ index }}. {{ name }}: {{ value }}
29               </div>
30         </ul>
31   <script>
32     var vm = new Vue({
33       el: '#demo',
34       data: {
35         firstName: 'Foo',
36         lastName: 'Bar',
37         fullName: 'Foo Bar'
38       },
39       computed: {
40         fullName: {
41           // getter
42           get: function () {
43             return this.firstName + ' ' + this.lastName
44           },
45           // setter
46           set: function (newValue) {
47             var names = newValue.split(' ')
48             this.firstName = names[0]
49             this.lastName = names[names.length - 1]
50           }
51         }
52       }
53     })
54     var example1 = new Vue({
55       el: '#example-1',
56       data: {
57         items: [
58           { message: 'Foo' },
59           { message: 'Bar' }
60         ]
61       }
62     })
63     new Vue({
64   el: '#v-for-object',
65   data: {
66     object: {
67       title: 'How to do lists in Vue',
68       author: 'Jane Doe',
69       publishedAt: '2016-04-10'
70     }
71   }
72 })
73   </script>
74 </body>
75 </html>

02.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>My first Vue app</title>
 5   <!-- <script src="https://unpkg.com/vue"></script> -->
 6   <script src="vue.min.js"></script>
 7 </head>
 8 <body>
 9   <div id="app-5">
10     <p>{{ message1 }}</p>
11     <p>{{ message }}</p>
12     <button v-on:click="reverseMessage">Reverse Message</button>
13   </div>
14   <script>
15     var tok = 'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJDbGllbnQyIiwiVXNlck9wZXJhdGlvbiI6WyJyZWFkIiwid3JpdGUiXSwibmJmIjoxNTY0MTIwNjMyLCJleHAiOjE1NjQxMjA5MzIsImlhdCI6MTU2NDEyMDYzMn0.4bQs-v4LOMzG0XT_0Yp1m_FYo7PbkvySSzBchwk4KDwep_IWqXDxxohnOxmWBmSALzHpTALi5Z51iHPriMFVnw';
16     var app5 = new Vue({
17         el: '#app-5',
18         data: {
19             message: 'Hello Vue.js!',
20             message1: ''
21         },
22         methods: {
23             reverseMessage: function () {
24             this.message = this.message.split('').reverse().join('');
25             mAjax('https://localhost:44367/WeatherForecast?' + new Date(),function(ret){
26                 console.log(ret);
27             },function(err){
28                 console.log('errerr');
29             },'','get')
30           }
31         }
32     })
33     function mAjax(url,success,fail,data,type){
34     var xhr = new XMLHttpRequest();
35     xhr.open(type, url, true);
36     xhr.responseType = "text";
37     xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJDbGllbnQyIiwiVXNlck9wZXJhdGlvbiI6WyJyZWFkIiwid3JpdGUiXSwiUmVsYXRpb24iOiIxODQ2Zjg3Mi1kYzQyLTQ4NGUtYWIxNi1jMTQ3NDQ0OGJiMjAiLCJuYmYiOjE1NjQxMjQzMTksImV4cCI6MTU2NDEyNDYxOSwiaWF0IjoxNTY0MTI0MzE5fQ.FH0EOKsaVEq-1ftvQwia-8ATJp6or9eGc5JwQ7uCMLqUnopcVlZJ623nsBJY-MYotbHgzIaDRT8lcUY1_msykA');
38     xhr.onload = function() {
39         if (this.status == 200) {
40             console.log(xhr.getResponseHeader('token'));
41             console.log(JSON.parse(xhr.response));
42             success&&success(xhr)
43         }
44     }
45     xhr.send(data);
46 }
47   </script>
48 </body>
49 </html>

03.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <title>Channel Test</title>
  5   <script src="vue.min.js"></script>
  6 </head>
  7 <body>
  8   <div id="channelTest">
  9     <p><label for="username">username</label>
 10     <input id="username" v-model="message.username"></p>
 11     <p><label for="password">password</label>
 12     <input id="password" v-model="message.password"></p>
 13     <p><label for="act">act</label>
 14     <input id="act" v-model="message.act"></p>
 15     <p><label for="userid">userid</label>
 16     <input id="userid" v-model="message.id"></p>
 17     <p><label for="channelid">channelid</label>
 18     <input id="channelid" v-model="message.channelid"></p>
 19     <p><label for="name">name</label>
 20     <input id="name" v-model="message.name"></p>
 21     <p><label for="contact">contact</label>
 22     <input id="contact" v-model="message.contact"></p>
 23     <p><label for="phone">phone</label>
 24     <input id="phone" v-model="message.phone"></p>
 25     <p><label for="count">count</label>
 26     <input id="count" v-model="message.count"></p>
 27     <p><label for="isactive">isactive</label>
 28     <input id="isactive" v-model="message.isactive"></p>
 29     <p>{{ message }}</p>
 30     <br />
 31     <p v-for="(iteminfo,index) in channelitems">{{iteminfo}}<br /><button v-on:click="ChannelInfoDetail(iteminfo.ID)">ChannelInfo Detail</button></p>
 32     <br />
 33     <p><button v-on:click="ChannelList">Channel List</button></p>
 34     <p><button v-on:click="ChannelInfoAdd">ChannelInfo Add</button></p>
 35     <p><button v-on:click="ProhibitChannelInfo">Prohibit ChannelInfo</button></p>
 36     <p><button v-on:click="ChannelInfoEdit">ChannelInfo Edit</button></p>
 37   </div>
 38   <script>
 39     var rootUrl = "https://localhost/webapi.aspx";
 40     var channelTest = new Vue({
 41         el: '#channelTest',
 42         data: {
 43             message: { "username": "apiadmin", "password": "852B3099FF303C24FC9F9E2A102D29DB54C63FF0", "act": "ChannelInfoList", "id": "5" },
 44             channelitems:[]
 45         },
 46         methods: {
 47           ChannelList: function () {
 48             channelTest.message.act = "ChannelInfoList";
 49             mAjax(rootUrl + "?" + new Date(),function(ret){
 50                 //console.log(ret);
 51                 channelTest.channelitems = ret.Data;
 52             },function(err){
 53                 console.log('errerr');
 54             },JSON.stringify(this.message),'post');
 55           },
 56           ChannelInfoAdd: function () {
 57             channelTest.message.act = "ChannelInfoAdd";
 58             mAjax(rootUrl + "?" + new Date(),function(ret){
 59                 console.log(ret);
 60             },function(err){
 61                 console.log('errerr');
 62             },JSON.stringify(this.message),'post');
 63           },
 64           ProhibitChannelInfo: function (id,index) {
 65             channelTest.message.channelid = id;
 66             channelTest.message.act = "ProhibitChannelInfo";
 67             mAjax(rootUrl + "?" + new Date(),function(ret){
 68                 console.log(ret);
 69                 channelTest.ChannelList();
 70             },function(err){
 71                 console.log('errerr');
 72             },JSON.stringify(this.message),'post');
 73           },
 74           ChannelInfoEdit: function () {
 75             channelTest.message.act = "ChannelInfoEdit";
 76             mAjax(rootUrl + "?" + new Date(),function(ret){
 77                 console.log(ret);
 78             },function(err){
 79                 console.log('errerr');
 80             },JSON.stringify(this.message),'post');
 81           },
 82           ChannelInfoDetail: function (id) {
 83             channelTest.message.channelid = id;
 84             channelTest.message.act = "ChannelInfoDetail";
 85             mAjax(rootUrl + "?" + new Date(),function(ret){
 86               console.log(ret);
 87             },function(err){
 88                 console.log('errerr');
 89             },JSON.stringify(this.message),'post');
 90           }
 91       }
 92     });
 93     function mAjax(url,success,fail,data,type){
 94     var xhr = new XMLHttpRequest();
 95     xhr.open(type, url, true);
 96     xhr.responseType = "text";
 97     xhr.onload = function() {
 98         if (this.status == 200) {
 99             //console.log(JSON.parse(xhr.response));
100             success&&success(JSON.parse(xhr.response));
101         }
102     }
103     xhr.send(data);
104 }
105   </script>
106 </body>
107 </html>

04.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <title>Channel Test</title>
  5   <script src="vue.min.js"></script>
  6 </head>
  7 <body>
  8   <div id="app">
  9     <p><label for="username">username</label>
 10     <input id="username" v-model="message.username"></p>
 11     <p><label for="password">password</label>
 12     <input id="password" v-model="message.password"></p>
 13     <p><label for="act">act</label>
 14     <input id="act" v-model="message.act"></p>
 15     <p><label for="userid">userid</label>
 16     <input id="userid" v-model="message.id"></p>
 17     <p><label for="channelid">channelid</label>
 18     <input id="channelid" v-model="message.channelid"></p>
 19     <p><label for="name">name</label>
 20     <input id="name" v-model="message.name"></p>
 21     <p><label for="contact">contact</label>
 22     <input id="contact" v-model="message.contact"></p>
 23     <p><label for="phone">phone</label>
 24     <input id="phone" v-model="message.phone"></p>
 25     <p><label for="count">count</label>
 26     <input id="count" v-model="message.count"></p>
 27     <p><label for="isactive">isactive</label>
 28     <input id="isactive" v-model="message.isactive"></p>
 29     <p>{{ message }}</p>
 30     <br />
 31     <p v-for="(iteminfo,index) in channelitems">{{iteminfo}}<br /><button v-on:click="ChannelInfoDetail(iteminfo.ID)">ChannelInfo Detail</button></p>
 32     <br />
 33     <p><button v-on:click="ChannelList">Channel List</button></p>
 34     <p><button v-on:click="ChannelInfoAdd">ChannelInfo Add</button></p>
 35     <p><button v-on:click="ProhibitChannelInfo">Prohibit ChannelInfo</button></p>
 36     <p><button v-on:click="ChannelInfoEdit">ChannelInfo Edit</button></p>
 37   </div>
 38   <script>
 39     var rootUrl = "https://localhost/webapi.aspx";
 40     var username = "apiadmin";
 41     var password = "852B3099FF303C24FC9F9E2A102D29DB54C63FF0";
 42     var act = "RoundListH5";
 43 
 44     var app = new Vue({
 45         el: '#app',
 46         data: {
 47           roundlist:[]
 48         },
 49         methods: {
 50           RoundList: function () {
 51             mAjax(rootUrl + "?" + new Date(),function(ret){
 52               //console.log(ret);
 53               app.roundlist = ret.Data;
 54             },function(err){
 55                 console.log('errerr');
 56             },JSON.stringify(this.message),'post');
 57           },
 58           ChannelInfoAdd: function () {
 59             channelTest.message.act = "ChannelInfoAdd";
 60             mAjax(rootUrl + "?" + new Date(),function(ret){
 61                 console.log(ret);
 62             },function(err){
 63                 console.log('errerr');
 64             },JSON.stringify(this.message),'post');
 65           },
 66           ProhibitChannelInfo: function (id,index) {
 67             channelTest.message.channelid = id;
 68             channelTest.message.act = "ProhibitChannelInfo";
 69             mAjax(rootUrl + "?" + new Date(),function(ret){
 70                 console.log(ret);
 71                 channelTest.ChannelList();
 72             },function(err){
 73                 console.log('errerr');
 74             },JSON.stringify(this.message),'post');
 75           },
 76           ChannelInfoEdit: function () {
 77             channelTest.message.act = "ChannelInfoEdit";
 78             mAjax(rootUrl + "?" + new Date(),function(ret){
 79                 console.log(ret);
 80             },function(err){
 81                 console.log('errerr');
 82             },JSON.stringify(this.message),'post');
 83           },
 84           ChannelInfoDetail: function (id) {
 85             channelTest.message.channelid = id;
 86             channelTest.message.act = "ChannelInfoDetail";
 87             mAjax(rootUrl + "?" + new Date(),function(ret){
 88               console.log(ret);
 89             },function(err){
 90                 console.log('errerr');
 91             },JSON.stringify(this.message),'post');
 92           }
 93       }
 94     });
 95     function mAjax(url,success,fail,data,type){
 96     var xhr = new XMLHttpRequest();
 97     xhr.open(type, url, true);
 98     xhr.responseType = "text";
 99     xhr.onload = function() {
100         if (this.status == 200) {
101             //console.log(JSON.parse(xhr.response));
102             success&&success(JSON.parse(xhr.response));
103         }
104     }
105     xhr.send(data);
106 }
107   </script>
108 </body>
109 </html>

05.html