Vue自定义组件：
<div id="container-element"> <mod-1></mod-1> </div> <script type="text/javascript"> Vue.component("mod-1",{ template : "<h1>这是模版的标签</h1>" }); let vueModel = new Vue({ el : "#container-element" }); </script>
效果：
使用模版进行传值获取：
<div id="container-element"> <mod-1 v-for="lang in items" v-bind:A="lang"></mod-1> </div> <script type="text/javascript"> Vue.component("mod-1",{ props : [‘A‘], template : "<h1>{{A}}</h1>" }); let vueModel = new Vue({ el : "#container-element", data : { items : [ "java","c++","python","rust","linux" ] } }); </script>
效果：
这里值传递的很让人费解：
在模版组件这里的设置
然后是正常的vue指令编写，但是这个A注入就要注意一下
模拟后台传输的json数据：
{ "name" : "echo42", "url" : "https://www.cnblogs.com/mindzone/p/13329771.html", "page" : 10, "gender" : true, "address" : { "country" : "中国", "city" : "江西南昌", "street" : "北京东路1688号" }, "links" : [ { "name" : "qqZone", "url" : "https://user.qzone.qq.com/1791255334" }, { "name" : "acFun", "url" : "https://www.acfun.cn/u/8680899" }, { "name" : "biliBili", "url" : "https://space.bilibili.com/2931347" } ] }
页面：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> [v-clock] { display: none; } </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" ></script> <script src="./../node_modules/_axios@0.19.2@axios/dist/axios.min.js"></script> </head> <body> <div id="container-element" v-clock> <!-- v-clock --> <div></div> <a v-bind:href="info.url">绑定的个人地址</a> <!-- 利用v-bind完成对一些属性的赋值--> </div> <script type="text/javascript"> let vueModel = new Vue({ el : "#container-element", data(){ return{ info : { name : null, url : null, page : null, gender : null, address : { country : null, city : null, street : null }, links : [ {name : null, url : null}, {name : null, url : null}, {name : null, url : null} ] } } }, mounted() { axios.get(‘./json/data.json‘).then(response=>(this.info = response.data)); } });