<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用vue-cli初始化单页面应用</title>
<script src="vue.js"></script>
</head>
<body>
<!--
directive:
bind inserted:插入的 update
-->
<div id="demo">
<h1 v-star="color">我是标题内容</h1>
<input type="text" v-model="color" value="color" v-focus>
<h3 v-hide="true">{{title}}</h3>
</div>
<script>
new Vue({
el: "#demo",
data: {
title: "百度一下就知道了",
color: "red"
},
directives: {
star(el,bind){
var color=bind.value?bind.value:'red';
el.style.cssText="color:"+color;
},
focus:{
inserted(el,bind){
el.focus();
}
},
hide(el,bind){
if(bind.value){
el.style.cssText="display:none";
}
}
}
});
</script>
</body>
</html>