组件

组件在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装

作用：可复用的vue实例

组件注册

局部注册组件

new Vue({
el:
components:{
       自定义组件名称:{
               template:'模板内容'
           }
   }
})

   <!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><h1>这是文本内容给</h1><!-- 组件调用 --><one></one><two></two></div><script>// 3.实例化vuelet vm  = new Vue({el:'#app',data:{},methods:{},/*** 1.components:组件* 2.在components中可以注册多个组件*/components:{// 声明一个one组件one:{template:'<h2>这是一个局部one注册组件</h2>'},// 声明一个two组件two:{template:'<h3>这是一个局部two注册组件</h3>'}}})</script>

全局注册组件

书写语法:
Vue.component('自定义组件名称',{
template:'模板内容'
})

   <!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- 调用组件 --><three></three><four></four></div><script>// 声明全局注册组件/*** 参数一:自定义组件名称* 参数二:组件值为vue实例,   即值为一个Object*/Vue.component('three',{template:'<h2>这是一个全局three注册组件</h2>'})Vue.component('four',{template:'<h2>这是一个全局four注册组件</h2>'})// 3.实例化vuelet vm  = new Vue({el:'#app',data:{},methods:{}})</script>

全局注册组件和局部注册组件的区别

全局注册组件:在任何vue实例化中都可调用
局部注册组件:只在当前vue实例中调用

    <!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- 组件调用 --><one></one><two></two></div><hr><div id="root"><!-- 组件调用 --><one></one><two></two></div><script>Vue.component('two',{template:'<h2>全局组件</h2>'})// 3.实例化vuelet vm  = new Vue({el:'#app',data:{},methods:{},components:{one:{template:'<h2>局部组件</h2>'}}})let vm1 = new Vue({el:'#root'})</script>

组件名称注意事项

组件名称注意事项
* 1.不能使用现有标签作为组件名称: eg:div p img span
* 2.不能使用现有标签的大写作为组件名称 eg:Div DIV dIV
* 3.组件名称建议使用小驼峰法进行命名,目的为了方便书写, 组件调用: v-one
* 4.组件模板渲染时,必须包含一个根元素

  <!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- 组件调用 --><v-one></v-one></div><script>// 3.实例化vuelet vm  = new Vue({el:'#app',data:{},methods:{},components:{/*** 1.不能使用现有标签作为组件名称:  eg:div p img span* 2.不能使用现有标签的大写作为组件名称 eg:Div  DIV   dIV* 3.组件名称建议使用小驼峰法进行命名,目的为了方便书写,  组件调用: v-one* 4.组件模板渲染时,必须包含一个根元素*/vOne:{template:`<div><h2>局部注册组件</h2><h2>局部注册组件</h2></div>`}}})</script>

template模板

    <!-- 1.引入vue --><script src="./vue.js"></script>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- 组件调用 --><v-one></v-one><v-two></v-two></div><!-- 系统提供了一个组件模板: template --><!-- 组件的模板内容 --><template id="one"><div><h2>one组件</h2><img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt=""></div></template><!-- two组件模板内容 --><template id="two"><div><ul><li>北京</li><li>上海</li><li>西安</li><li>郑州</li><li>广州</li></ul></div></template><script>// 3.实例化vuelet vm  = new Vue({el:'#app',data:{},methods:{},components:{// 组件声明vOne:{template:'#one',},vTwo:{template:'#two',}}})</script>

选项

vOne:{
template:
data
methods
watch
components
filters
computed
render
8个钩子函数
}

总结:new Vue()产生的实例为vue实例
子组件产生的实例为VueComponent实例

data的用法

data是一个对象

* 在js中对象类型的变量属于引用类型,不管数据被复用多少次,此时的数据是处于共享状态,一旦data中的数据发生改变,则所有被复用的数据都会发生改变

 <!-- 1.引入vue --><script src="./vue.js"></script><style>.box{width:80%;margin:20px auto;border: 2px solid red;}</style>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><div class="box"><h3>num的值为:{{num}}</h3><button @click="num++">++</button></div><div class="box"><h3>num的值为:{{num}}</h3><button @click="num++">++</button></div><div class="box"><h3>num的值为:{{num}}</h3><button @click="num++">++</button></div></div><script>// 3.实例化vue// 根组件let vm  = new Vue({el:'#app',/*** 在js中对象类型的变量属于引用类型,不管数据被复用多少次,此时的数据是处于共享状态,* 一旦data中的数据发生改变,则所有被复用的数据都会发生改变* */ data:{num:0,},methods:{}})</script>

data是函数返回值

组件是可复用的vueComponent实例,一旦组件被创建好之后,就有可能被复用在各个地方,不管组件被复用多少,他们之间的数据都应该是相互独立,互不影响.基于以上原理. *
此时的data被声明为函数返回值的形式,数据不管复用多少次,都是互不影响的.这就相当关于为每一份data开辟了一个独立的空间,各个空间管理者各自的数据

  <!-- 1.引入vue --><script src="./vue.js"></script><style>.box{width:80%;margin:20px auto;border: 2px solid red;}</style>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- 组件调用 --><v-one></v-one><v-one></v-one><v-one></v-one></div><!-- one组件的模板内容 --><template id="one"><div class="one"><div>{{name}}</div><div class="box"><h3>num的值为:{{num}}</h3><button @click="num++">++</button></div></div></template><script>// 3.实例化vue// 根组件let vm  = new Vue({el:'#app',components:{vOne:{template:'#one',/*** 组件是可复用的vueComponent实例,一旦组件被创建好之后,就有可能被复用在各个地方,不管组件被复用多少,他们之间的数据都应该是相互独立,互不影响.基于以上原理.* 此时的data被声明为函数返回值的形式,数据不管复用多少次,都是互不影响的.这就相当关于为每一份data开辟了一个独立的空间,各个空间管理者各自的数据*/data(){return{name:'薇娅',num:0,}}}}})</script>
</body>
</html>

组件的嵌套

所谓组件嵌套就是在子组件的父级模板中用标签的形式调用子组件

在下面这段代码中app这个<div>是最大的的父级，他所包裹着的子组件都有自己的模板并且根据id相互连接但是自组建的数据只能在他们的内部实现，需要在他们每个组件的父级下进行注册用下面这种方法，并且在他们的父级内部用标签的形式调用
components:{xxx:xxx
}

 <title>Document</title><!-- 1.引入vue --><script src="./vue.js"></script><style>*{margin:0;padding: 0;list-style: none;}.page{width:100vw;height: 100vh;background-color: grey;position: absolute;left:0;top:0;display: flex;flex-direction: column;}.header{height: 100px;background-color: hotpink;}.main{flex:1;display: flex;}.footer{height: 100px;background-color: indianred;}.left{width:200px;background-color: khaki;}.right{flex:1;}</style>
</head>
<body><!-- 2.创建DOM元素 --><div id="app"><!-- <div class="page">头部 <div class="header">头部</div>中间 <div class="main">左侧 <div class="left">左侧</div>内容<div class="right">右侧</div></div>底部  <div class="footer">底部</div></div> --><!-- 组件调用 --><!-- <v-page></v-page> --></div><!-- page组件模板内容 --><template id="page"><div class="page"><!-- 调用头部 --><v-header></v-header><v-main></v-main><v-footer></v-footer></div></template><!-- header组件模板内容 --><template id="header"><div class="header"></div></template><!-- main组件模板内容 --><template id="main"><div class="main"><!-- 调用左侧组件 --><v-left></v-left><v-right></v-right></div></template><!-- footer组件模板内容 --><template id="footer"><div class="footer"></div></template><!-- left组件模板内容 --><template id="left"><div class="left"></div></template><!-- right组件模板内容 --><template id="right"><div class="right"></div></template><script>let vLeft  = {template:'#left'}let vRight = {template:'#right'}let vHeader  = {template:'#header'}let vMain = {template:'#main',components:{vLeft,vRight}}let vFooter = {template:'#footer'}let vPage = {template:'#page',components:{// 头部组件vHeader,// 中间组件vMain,// 底部组件vFooter}}// 3.实例化vuelet vm  = new Vue({el:'#app',components:{vPage},template:`<v-page></v-page>`,})</script>

vue脚手架安装

下载安装脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
Vue CLI: Vue command line interface vue命令行接口
特点:
1.一个运行时依赖 (@vue/cli-service)，该依赖：
2.可升级；
3.基于 webpack 构建，并带有合理的默认配置；
4.可以通过项目内的配置文件进行配置；
5.可以通过插件进行扩展。
6.一个丰富的官方插件集合，集成了前端生态中最好的工具。
7.一套完全图形化的创建和管理 Vue.js 项目的用户界面。

1.安装webpack工具

在安装脚手架之前确保webpack是否安装成功:
1.webpack --version #如果查看有版本,无需安装以下步骤,如果没有版本,则需要执行以下步骤
2.cnpm i webpack webpack-cli -g #全局安装webpack打包工具
注意事项: 以上步骤不一定必须执行

2.安装脚手架

1.npm i @vue/cli -g #全局安装脚手架
2.vue -V #查看版本

通过脚手架创建项目

1.vue create 项目名称 #创建项目
2.cd 项目名称 #进入项目目录
3.npm run serve #启动项目
4.项目运行在: http://localhost:8080

图形化创建项目

执行指令

vue ui

创建

cd my-app
npm run serve

项目目录介绍

my-app
   node_mopdules           #项目依赖包
public                       #公共静态资源文件
       1.引入图片
   
<img style="width:100px" src="/qkl.jpeg" alt="">
2.静态资源不参与压缩打包
       index.html           #项目唯一一个页面
src
       assest                   #静态资源文件
           1.引入图片
       
                   <img style="width:100px" src="../assets/img/qkl.jpeg" alt="">
2.静态资源参与压缩打包
components           #公共组件
App.vue                   #根组件
main.js                   #唯一入口文件
.gitignore                       #上传git忽略的文件
babel.config.js           #babel插件的配置文件
package-lock.json       #项目基本信息及安装依赖包的锁定版本
package.json                   #项目的基本信息及启动指令依赖包信息
READ.me                           #解读文件

vue的组件components基础和安装vue脚手架相关推荐

学习VUE第七天课程（VUE之组件（基础、分类、命名））
VUE之组件(基础.分类.命名) 组件( Component )是 Vue.js 最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 接下来会由浅入深地学习组件的全部内容,并通过几个案例 ...
vue的组件 components
一.组件组成组成:html +Js+css 模板: <template><div > </div> </template> <script> ...
vue.js组件的练习_由Vue.js开发的电阻器颜色练习网站
vue.js组件的练习 ResisColor (ResisColor) ⚡ A resistor color practice website develop by Vue.js. ⚡电阻器颜色练习网 ...
Vue keep-alive组件缓存基础用法
keep-aliive组件 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 当组件在 <keep-alive> 内被切换,它的 activa ...
Vue | Vue.js 组件化基础 - 脚手架
[Vue 牛刀小试]：第八章 - 组件的基础知识
一.前言在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...
使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)
目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习h ...
vue 递归组件多级_Vue 递归组件构建一个树形菜单
原标题:Vue 递归组件构建一个树形菜单 Vue.js 中的递归组件是一个可以调用自己的组件例如: Vue.component('recursive-component', { template: ` ...
【Vue】组件封装
目录 1 组件封装 1.1 全局注册 1.2 局部注册 1.2.1 命名 1.2.2 引用组件 1.2.2.1 传统写法 1.2.2.2 setup 1.2.2.3 easycom 1.3 父子组件间 ...

vue的组件components基础和安装vue脚手架

组件

组件注册

组件名称注意事项

template模板

选项

data的用法

data是函数返回值

组件的嵌套

vue脚手架安装

下载安装脚手架

通过脚手架创建项目

图形化创建项目

项目目录介绍

vue的组件components基础和安装vue脚手架相关推荐

最新文章

热门文章