<!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="width: 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>
