- <template>
- <div id="helloworld">
- <h1>{{ msg }}</h1>
- <h2>Essential Links</h2>
- <button v-on:click="say('hi')">Say hi</button>
- <button v-on:click="say('what')">Say what</button>
- <button v-on:click="counter += 1">增加 1</button>
- <p>这个按钮被点击了 {{ counter }} 次。</p>
- </div>
- </template>
- <script>
- export default {
- name: 'HelloWorld',
- data () {
- return {
- msg: 'Welcome to Your Vue.js App',
- counter: 0
- }
- },
- methods: {
- say: function (message) {
- alert(message)
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- h1, h2 {
- font-weight: normal;
- }
- ul {
- list-style-type: none;
- padding: 0;
- }
- li {
- display: inline-block;
- margin: 0 10px;
- }
- a {
- color: #42b983;
- }
- </style>
html版本：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
- </head>
- <body>
- <div id="app">
- <button v-on:click="say('hi')">Say hi</button>
- <button v-on:click="say('what')">Say what</button>
- </div>
- <script>
- new Vue({
- el: '#app',
- methods: {
- say: function (message) {
- alert(message)
- }
- }
- })
- </script>
- </body>
- </html>
| 
楼主
