Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Hello Vue</title>
- <meta charset="utf-8">
- <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
- <!-- подключение фреймворка vue.js -->
- <script type="text/javascript" src="https://unpkg.com/vue"></script>
- <style type="text/css">
- .active {
- color: red
- }
- .some {
- font-size: 24px;
- }
- </style>
- </head>
- <body>
- <!-- элемент div c идентификатором app -->
- <!-- v-for -->
- <div id="app">
- <button-counter ref="counter3"></button-counter>
- </div>
- </body>
- <template id="counter_tid">
- <button @click="inc">{{count}}</button>
- </template>
- <script type="text/javascript">
- //
- Vue.component('button-counter', {
- template: '#counter_tid',
- data: function () {
- return {
- count: 0
- }
- },
- methods: {
- inc: function() {
- console.log('inc!!!!');
- this.count++;
- }
- }
- });
- // создаем объект Vue (экземпляр Vue)
- new Vue({
- el: "#app",
- data: {
- showFlag: false,
- result: '',
- price: 10.0777,
- bonus2: 2,
- message: 'some message',
- products: [
- {name: "Product1", price: 100},
- {name: "Product2", price: 200}
- ]
- },
- methods : {
- buttonclicked : function() {
- console.log('buttonclicked');
- },
- clickme : function(param){
- console.log('clickme=' + param);
- },
- changebgcolor : function() {
- this.styleobj.backgroundColor = "green";
- },
- originalcolor : function() {
- this.styleobj.backgroundColor = "red";
- }
- },
- filters: {
- capitalize: function (value) {
- if (!value) return ''
- value = value.toString()
- return value.charAt(0).toUpperCase() + value.slice(1)
- },
- addWord: function (value) {
- value = value.toString()
- return value + ' HELLO!';
- },
- toFixed: function(value, limit) {
- return value.toFixed(limit);
- }
- },
- mounted: function() {
- console.info('mounted fired');
- // обращаемся к узлу DOM
- }
- })
- </script>
- </html>
Add Comment
Please, Sign In to add comment