sergAccount

Untitled

Sep 30th, 2020
191
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.40 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hello Vue</title>
  5.     <meta charset="utf-8">
  6.     <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
  7.     <!-- подключение фреймворка vue.js -->
  8.     <script type="text/javascript" src="https://unpkg.com/vue"></script>
  9.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  10.  
  11.     <style type="text/css">
  12.     .active {
  13.       color: red
  14.     }
  15.     .some {
  16.       font-size: 24px;
  17.     }    
  18.     </style>
  19. </head>
  20. <body>
  21. <!-- элемент div c идентификатором app -->
  22. <!-- v-for -->
  23. <div id="app">       
  24.      <input type="number" v-model="price" />
  25.      <div ref="myid">TESTsdfsdsdsdgsd</div>
  26. </div>
  27. </body>
  28. <script type="text/javascript">
  29.     // создаем объект Vue (экземпляр Vue)
  30.  
  31.   Vue.filter('capitalize2', function (value) {
  32.       if (!value) return ''
  33.       value = value.toString()
  34.       return value.charAt(0).toUpperCase() + value.slice(1)
  35.   })
  36.  
  37.  
  38.     new Vue({
  39.   el: "#app",
  40.   data: {    
  41.     result: '',
  42.     price: 10.0777,
  43.     bonus2: 2,
  44.     message: 'some message',                        
  45.     products: [
  46.       {name: "Product1", price: 100},
  47.       {name: "Product2", price: 200}
  48.     ]
  49.   },
  50.   methods : {
  51.       buttonclicked : function() {
  52.         console.log('buttonclicked');
  53.       },
  54.       clickme : function(param){
  55.         console.log('clickme=' + param);
  56.       },
  57.       changebgcolor : function() {
  58.           this.styleobj.backgroundColor = "green";
  59.       },
  60.       originalcolor : function() {
  61.           this.styleobj.backgroundColor = "red";
  62.       }
  63.   },
  64.   filters: {
  65.       capitalize: function (value) {
  66.         if (!value) return ''
  67.         value = value.toString()
  68.         return value.charAt(0).toUpperCase() + value.slice(1)
  69.       },
  70.       addWord: function (value) {                
  71.         value = value.toString()
  72.         return value + ' HELLO!';
  73.       },
  74.       toFixed: function(value, limit) {
  75.         return value.toFixed(limit);
  76.       }
  77.   },
  78.   mounted: function() {
  79.  
  80.       console.log("mounted!");
  81.  
  82.       var sURL = "http://localhost:8080/users.json";      
  83.       axios.get(sURL)
  84.       .then((response) => {
  85.         console.log("mounted.setdata!!!");
  86.         console.log(response.data);
  87.  
  88.       }).catch((e) => {console.log("axios.error while get data"); })
  89.       .then(()=>{console.log("OK")});
  90.      
  91.   }
  92. })
  93. </script>
  94. </html>
Add Comment
Please, Sign In to add comment