一、数据渲染及组件树

最新推荐文章于 2022-10-31 14:57:09 发布

原创最新推荐文章于 2022-10-31 14:57:09 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

VUEJS技术专栏收录该内容

10 篇文章

订阅专栏

一、数据渲染

<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
  }
})