一、数据渲染
<template> //VUE文件
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
new Vue({ //JS文件
el: '#app',
template: '<div>{{ fiuit }}</div>',
data: {
fiuit: 'zhuchuanzhi123'
}
})
二、实现跟组件及组件之间的关系
1、跟组件
//根组件
new Vue({
el: '#app', //数据装载的位置
template: '<p>helas{{foot}}dalo </p>', //装载模板
data:{
foot: '123123'
}
})
2、全剧组件及组件之间调用
//全局注册组件的方法
Vue.component('my_header', {
template: '<p>this my header</p>'
})
//三级组件
var My_header_e = {
template: '<p>三级</p>' ,
}
//二级组件
var myHewder = {
template: '<p><My_header_er></My_header_er>{{f1}}二级</p>' ,
components: {
'My_header_er':My_header_e
},
data: function(){
return{
f:1,
f1:2
}
}
}
//根组件
new Vue({
el: '#app', //数据装载的位置
template:'<my-header></my-header>一级',
components:{
'my-header':myHewder
}
})