sergAccount

Untitled

Oct 1st, 2020
240
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.04 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.  
  23.   <myblock :title="blockTite" :message="blockText"></myblock>
  24.   <myblock :title="blockTite" :message="blockText"></myblock>
  25. </div>
  26. </body>
  27.  
  28. <template id="myblock_tid">  
  29.   <div>
  30.     <h2>{{title}}</h2>
  31.     <div>{{message}}</div>
  32.   </div>
  33. </template>
  34.  
  35. <script type="text/javascript">
  36.   //
  37.   Vue.component('myblock', {
  38.     props: ['title', 'message'],
  39.     template: '#myblock_tid',
  40.     data: function () {
  41.       return {
  42.         count: 0
  43.       }
  44.     },    
  45.     methods: {
  46.        test: function() {
  47.           this.title = 'NEW TEXT';            
  48.        }
  49.     }
  50.   });
  51.  
  52.     // создаем объект Vue (экземпляр Vue)
  53.     new Vue({
  54.   el: "#app",
  55.   data: {    
  56.     blockTite: "MY TITLE",
  57.     blockText: "MY TEXT",
  58.     showFlag: false,
  59.     result: '',
  60.     price: 10.0777,
  61.     bonus2: 2,
  62.     message: 'some message',                        
  63.     products: [
  64.       {name: "Product1", price: 100},
  65.       {name: "Product2", price: 200}
  66.     ]
  67.   },
  68.   methods : {
  69.       incCounter: function(todo){
  70.             //alert('incCounter');            
  71.             this.$refs.counter3.inc();
  72.             alert(this.$refs.counter3.count);            
  73.       },
  74.       doSomething: function(param){
  75.         console.log('doSomething' + param);
  76.       },
  77.       processCounterResult: function(param){
  78.         console.log('processCounterResult=' + param);
  79.       }
  80.   },
  81.   mounted: function() {
  82.       console.info('mounted fired');
  83.       // обращаемся к узлу DOM
  84.   }
  85. })
  86. </script>
  87. </html>
Add Comment
Please, Sign In to add comment