sergAccount

Untitled

Sep 30th, 2020
221
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.35 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.     <style type="text/css">
  10.     .active {
  11.       color: red
  12.     }
  13.     .some {
  14.       font-size: 24px;
  15.     }    
  16.     </style>
  17. </head>
  18. <body>
  19. <!-- элемент div c идентификатором app -->
  20. <!-- v-for -->
  21. <div id="app">       
  22.     <greeting></greeting>
  23.     <greeting></greeting>
  24.  
  25.     <greeting2></greeting2>
  26.  
  27.     <greeting3></greeting3>
  28. </div>
  29. </body>
  30.  
  31. <template id="greeting2_id">
  32.     <h1>HELLO VUE COMPONENT222222222222222!</h1>
  33. </template>
  34.  
  35. <script type="text/x-template" id="greeting3_id">
  36.  <h1>HELLO VUE COMPONENT333!</h1>
  37. </script>
  38.  
  39. <script type="text/javascript">
  40.   //
  41.   Vue.component('greeting', {
  42.     template: '<h1>HELLO VUE COMPONENT!</h1>'
  43.   });
  44.  
  45.   Vue.component('greeting2', {
  46.     template: '#greeting2_id'
  47.   });
  48.  
  49.   Vue.component('greeting3', {
  50.     template: '#greeting3_id'
  51.   });
  52.  
  53.     // создаем объект Vue (экземпляр Vue)
  54.     new Vue({
  55.   el: "#app",
  56.   data: {    
  57.     result: '',
  58.     price: 10.0777,
  59.     bonus2: 2,
  60.     message: 'some message',                        
  61.     products: [
  62.       {name: "Product1", price: 100},
  63.       {name: "Product2", price: 200}
  64.     ]
  65.   },
  66.   methods : {
  67.       buttonclicked : function() {
  68.         console.log('buttonclicked');
  69.       },
  70.       clickme : function(param){
  71.         console.log('clickme=' + param);
  72.       },
  73.       changebgcolor : function() {
  74.           this.styleobj.backgroundColor = "green";
  75.       },
  76.       originalcolor : function() {
  77.           this.styleobj.backgroundColor = "red";
  78.       }
  79.   },
  80.   filters: {
  81.       capitalize: function (value) {
  82.         if (!value) return ''
  83.         value = value.toString()
  84.         return value.charAt(0).toUpperCase() + value.slice(1)
  85.       },
  86.       addWord: function (value) {                
  87.         value = value.toString()
  88.         return value + ' HELLO!';
  89.       },
  90.       toFixed: function(value, limit) {
  91.         return value.toFixed(limit);
  92.       }
  93.   },
  94.   mounted: function() {
  95.       console.info('mounted fired');
  96.       // обращаемся к узлу DOM                  
  97.   }
  98. })
  99. </script>
  100. </html>
Add Comment
Please, Sign In to add comment