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>
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>
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>
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>
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>
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>
