<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法</title>
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<script src="../assets/js/flexible_css.js"></script>
<script src="../assets/js/flexible.js"></script>
<script src="../assets/js/jquery-3.2.1.js"></script>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<caicai>
<span slot="url">{{caiData.url}}</span> <!-- 在组件标签里传递值-->
<span slot="netName">{{caiData.netName}}</span>
<span slot="skill">{{caiData.skill}}</span>
</caicai>
</div>
<template id="tep">
<div>
<p>地址：<slot name="url"></slot></p> <!--在模版里 用slot 标签接收值-->
<p>网名：<slot name="netName"></slot></p>
<p>技术类型：<slot name="skill"></slot></p>
</div>
</template>
</body>
<script type="text/javascript">
var jinsuo={ //组件模版变量
template:"#tep" //模版 定义在 id为tep 的html的tempalte标签里
}
var app=new Vue({
el:"#app",
data:{
caiData:{ // 数据对象
url:"http://baidu.com",
netName:"菜菜",
skill:"web前端"
}
},
components:{ //组件
"caicai":jinsuo //caicai 组件名 jinsuo 是组件模版
}
})
</script>
</html>
