渲染普通的HTML元素在Vue中是非常快速的，但有的時候你可能有一個組件，這個個組件包含了大量靜態的內容，在這種情況下，你可以在跟元素上添加v-once attribute 以確保這些內容只計算一次然後緩存起來，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<kerwin-input type="text" title="姓名" @event="event1"></kerwin-input>
<kerwin-input type="password" title="密碼" @event="event2"></kerwin-input>
<button>submit</button>
<button>seset</button>
</div>
<script>
Vue.component("kerwinInput",{
data(){
return{
mytext:""
}
},
props:["type","title"],
template:`<div>
<label> {{title}}</label>
{{mytext}}
<input :type="type" style="background:red" v-model="mytext" @input="handleInput">
</div>`,
methods:{
handleInput(){
this.$emit("event",this.mytext);
}
}
});
new Vue({
el:"#app",
data:{
username:"",
password:"",
isShow:false
},
methods:{
event1(data){
console.log(data)
this.username=data;
},
event2(data){
this.password=data
console.log(data)
}
}
});
</script>
</body>
</html>