vue的组件components基础和安装vue脚手架
组件
组件在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.实例化vue
let 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.实例化vue
let 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.实例化vue
let 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.实例化vue
let 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.实例化vue
let 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.实例化vue
let 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.引入图片
<!-- 引入public图片, 采用项目绝对路劲, -->
<img style="width:100px" src="/qkl.jpeg" alt="">
2.静态资源不参与压缩打包
index.html #项目唯一一个页面
src
assest #静态资源文件
1.引入图片
<!-- 引入assets图片,采用相对路径 -->
<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 #解读文件