主要用到了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>