主要用到了vue 表单和组件的知识，使用prop自定义属性将外部数据传到子组件内部中。
练习截图:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" name="" value="one" v-model="select">one
<input type="checkbox" name="" value="two" v-model="select">two
<input type="checkbox" name="" value="three" v-model="select">three
<div>您选择的值为:{{select}}</div>
<select v-model="select1">
<option value="4399">4399</option>
<option value="baidu">baidu</option>
<option value="wang">wang</option>
</select>
<div>www.{{select1}}.com</div>
<h1>组件</h1>
<div id="compo">
<input type="text" name="" v-model="mes">
<wang0 v-bind:message="mes"></wang0>
<wang v-for="item in fruits" v-bind:message="item"></wang>
</div>
</div>
<script type="text/javascript">
// 这里定义了一个组件，将外部输入的内容通过message传到子组件内部
Vue.component("wang0",{
props:["message"],
template:'<span>{{message}}</span>'
});
// 这个组件是练习v-for语句创建的
Vue.component("wang",{
props:["message"],
template:'<li>{{message.name}}</li>'
});
let test=new Vue({
el:"#app",
data:{
select:[],
select1:" ",
mes:" ",
fruits:[
{name:'苹果'},
{name:'西瓜'},
{name:'梨'},
]
}
});
</script>
</body>
</html>