<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> <br> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">吃饭没</label>选中状态：{{ checked }} <br> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> <button @click="submit">提交</button> <br> <select v-model="selected"> <option disabled value="">请选择</option> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <span>Selected: {{ selected }}</span> <br> <select v-model="selected" multiple style=" 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> aaa <div id="components-demo"> <button-counter title="title1:" @clicknow="clicknow"> <h2>123</h2> </button-counter> <button-counter></button-counter> </div> </div> <script type="text/javascript"> Vue.component('button-counter', { props:['title'], data: function() { return { count: 0 } }, template: '<div><h1></h1><button v-on:click="clickFun">{{title}}You clicked me {{ count }} times.</button><slot></slot></div>', methods:{ clickFun:function(){ this.count++; this.$emit('clicknow',this.count); } } }) var data = { message: '', checked: false, checkedNames: [], picked: 'X', selected: '' } var app = new Vue({ el: '#app', data: data, methods: { submit: function() { var postData = { picked: this.picked, message1: this.message }; console.log(JSON.stringify(postData)); }, clicknow:function(e){ console.log(e); } }, }) </script> <style> </style> </body> </html>