<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>杂七杂八</title>
</head>
<body>
<div id="parent">
<user ref="profile"></user>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('user',{
template:'<p>你好，蔡蔡</p>'
})
var vm=new Vue({
el:'#parent',
data:{
}
})
var child=vm.$refs.profile //取得这个组件的实例：
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>杂七杂八</title>
</head>
<body>
<div id="parent">
<user ref="profile"></user>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('user',{
template:'<p>你好，蔡蔡</p>'
})
var vm=new Vue({
el:'#parent',
data:{
}
})
var child=vm.$refs.profile //取得这个组件的实例：
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步组件</title>
</head>
<body>
<div id="box">
<z-jian></z-jian>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('zJian',function(cana,canb){ //组件名称可定义为zJian z-jian ZJian 这几种 但在html里区分大小写 全部写成z-jian 在templates 模版里可写成与组件名一样的格式
setTimeout(function(){
cana({
template:'<div> hello caicai !</div>'
})
},1000)
})
new Vue({
el:'#box',
data:{}
})
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步组件</title>
</head>
<body>
<div id="box">
<z-jian name="stack-overflow"></z-jian>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('z-jian',{
name:'stack-overflow',
template:'<div><stack-overflow>哈哈哈哈</stack-overflow></div>'
})
new Vue({
el:'#box',
data:{}
})
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>静态组件</title>
</head>
<body>
<div id="box">
<terms-of-service></terms-of-service>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})
new Vue({
el:"#box",
})
//你可以在模板内部使用v-once，这样可以生成缓存，节约不少性能；
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x-template</title>
</head>
<body>
<div id="box">
<zjname></zjname>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/x-template" id="zj">
<p>对于html内容比较多的模板，你可以把模板定义在外面：</p>
</script>
<script type="text/javascript">
Vue.component('zjname',{
template:"#zj"
})
new Vue({
el:'#box',
})
</script>
</html>
