中企动力销售一个月能挣多少,张家界百度seo,资深的家居行业网站开发,公司网站案例个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;还有别人的成功。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡 文章目录 什么是Vue组件组件的组成部分全局组件局部组件1.vue组件命名规范2.vue项目文件 今天的学习内容是vue的组件让我们一起看下去吧 不会安装VUE和配置的可以看这篇文章up主写的很详细也很适合新手 Vue安装与配置入门教程(非常详细) 什么是Vue组件
在vue中组件是可复用的Vue实例它拥有独一无二的组件名称它可以扩展HTML元素以组件名称的方式作为自定义的HTML标签。组件可大大提高了代码的复用率。 组件系统让我们可以用独立可复用的小组件来构建大型应用几乎任意类型的应用的界面都可以抽象为一个组件树 tagName 为组件名options 为配置选项
!DOCTYPE html
html
head
meta charsetutf-8
title 全局组件/title
script srchttps://cdn.staticfile.org/vue/2.2.2/vue.min.js/script
/head
body
div idapprunoob/runoob
/divscript
// 注册
Vue.component(runoob, {template: h1自定义组件!/h1
})
// 创建根实例
new Vue({el: #app
})
/script
/body
/html局部组件
顾名思义就是只有小部分实例可以使用的组件
!DOCTYPE html
html
head
meta charsetutf-8
title局部组件/title
script srchttps://cdn.staticfile.org/vue/2.2.2/vue.min.js/script
/head
body
div idapprunoob/runoob
/divscript
var Child {template: h1自定义局部组件!/h1
}// 创建根实例
new Vue({el: #app,components: {// runoob 将只在父模板可用runoob: Child}
})
/script
/body
/html1.vue组件命名规范
项目文件命名每个首字母大写使用驼峰命名法要做到见名知意
2.vue项目文件