浅谈components ,template ,el,App.vue中的关系

技术标签:?components????components????el

目录


1、摘要

2、文件目录。

3、代码

?4、结果

?5、分析

? ? ?相关链接


?

1、摘要

本文想通过简单的代码,来简单探究下components ,template ,el之间的关系。

2、文件目录。

可以看到我把原来的App.vue改了成Ap.vue

3、代码

HelloWorld.vue






Ap.vue






?main.js

import Vue from 'vue'
import Appa from './Ap'//Appa是自己取的名字,下面模板会用到

Vue.config.productionTip = true

new Vue({
  el: '.pp',//选的是类名为pp的第一个元素
  components: { Appa },
  template: ''//模板可以写作
})

index.html



  
    
    
    vcustomers
  
  
    

?4、结果

? ? ??

?5、分析

(1)入口组件Ap.vue引用了HelloWorld.vue。体现在三个部分

?? ? ? ? ? ? ?import HelloWorld from './components/HelloWorld'? ? ? ? ? ? ? ? ? components: {?HelloWorld}

其中Ap.vue中的样式的优先级低于局部Vue中的样式的优先级。所以在HelloWorld.vue中的样式一定会起作用。

?

(2)main.js引用了Ap.vue。体现在

import Appa from './Ap'

?el: '.pp',的意思是选的是类名为pp的第一个元素来作为作用对象。template: ''的意思是用这个模板代替刚才选的那个元素对象。components: { Appa }的意思是用Appa这个组件(即Ap.vue)代替Appa这个模板。

?

简单的来说就是模板代替元素,组件代替模板。(个人的话来说)。

?

?


相关链接

【1】Vue实践1/7,搭建脚手架

【2】?Vue组件(components)个人理解


?

?

?

原文地址: