Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="https://unpkg.com/vue"></script>
- </head>
- <body>
- <div id="app">
- <h1>{{message}}</h1>
- <div>Price: {{productPrice}}</div>
- <div>Price (method call):{{getProductPrice()}}</div>
- <div> {{calc(2)}} </div>
- <div> Результат выражения = {{ 2 * 2}} </div>
- <div> Counter: {{counter}}</div>
- <!-- директива v-on -->
- <button v-on:click="onClick">OK1</button>
- <!-- сокращенный синтаксис для определения обработчиков событий -->
- <button @click="onClick">OK2</button>
- <button @click="inc">Увеличить counter!!!</button>
- <pre>{{ $data }}</pre>
- </div>
- <script>
- let vm = new Vue({
- el: "#app",
- data: {
- message: "Привет, Vue!",
- productPrice: 1000,
- counter: 1
- },
- methods: {
- getProductPrice: function(){
- // используется ключевое слово this
- return this.productPrice;
- },
- calc: function(n){
- console.log(n);
- },
- // метод обработчик событий !!!
- onClick: function(){
- alert("onClick invoked!!!!");
- },
- inc: function(){
- this.counter++;
- }
- }
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement