目录
友情提醒
先看文章目录,大致了解知识点结构,直接点击文章目录可以跳转到文章指定位置。
第一章、vue的组件
1.1)什么是SPA应用
①单页 Web 应用(single page web application,SPA)。 Vue工程是单页面应用程序,整个工程只有一个完整的html页面。
② 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
③数据需要通过 ajax 请求获取。
④Vue 脚手架工程只有一个页面,浏览器也只能读取这一个页面的内容。Vue 通过组件的方式把要渲染到页面的内容进行拆分,拆分成组件,由 Vue 对象加载各个组件并渲染到页面.
1.2)vue的组件简介
组件(component)的出现,是为了拆分Vue的代码块,不同的组件划分不同的功能模块,以后我们需要某个功能时,就直接调用对应的组件即可
①模块化:模块化是从代码的角度去分析的,方便代码分层开发,保证每个模块职责单一。
②组件化:组件化是从界面的角度去划分的,如:分页组件、轮播、颜色选择、文件 上传等抽象 是把公共的东西 像的东西抽出来 (好处:复用,公共的,缺点:代码的可读性直线下降)
③两种组件命名方式:
1、大驼峰 MyComponent
2、-连接符号: my-component
组件分为:根组件(App.vue)所有的组件都需要注册在根组件、一般组件、路由组件
1.3)vue工程中的main.js文件
第二章、Vue组件的使用
2.1)一般组件的自定义
①创建一个后缀为.vue组件文件,如:MyComponent.vue
②使用Vue.extend语法创建,一般组件会继承Vue对象也就是VueComponent对象简称VC对象,语法中options和new Vue时传入的那个options几乎一样,但也有区别:
1、el不要写:最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
2、data必须写成函数:
避免组件被复用时,数据存在引用关系。
<template>
<!--写组件的html代码-->
<h1>名字:{{name}}</h1>
</template>
<script>
import Vue from "vue"
/*该组件的vue语法*/
/*vue代码需要声明vue对象 vue组件本身就是vue对象的小弟*/
//myVueComponentDemo1就是vue组件对象 简称vc
const myVueComponentDemo1 = Vue.extend({
//el:"",vc是vue对象的小弟 它不能自己运行 只能被vue对象调用
//data:{}, 对象式
//函数式
data(){
return{
name:"第一个组件"
}
},
methods:{}
})
//把组件对象声明暴露
export default myVueComponentDemo1;//默认该组件对象对外公开
</script>
<style>
/*该组价的样式*/
</style>
2.2)注册组件:全局注册和局部注册
2.2.1)全局注册:靠Vue.component(‘组件名’,组件)
Vue组件直接绑定Vue对象
在App.vue使用注册后的组件标签
查看页面
2.2.2)局部注册(常用):靠new Vue的时候传入components选项
Vue对象直接绑定根组件,所有的组件都需要注册在根组件(App.vue),一般组件只能被根组件管理。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<h1>这是app.vue 我在这写一个标签</h1>
<!--这是全局注册 来自vue对象-->
<MyFirstVc></MyFirstVc>
<MyFirstVc></MyFirstVc>
<MyFirstVc></MyFirstVc>
<MyFirstVc></MyFirstVc>
<!--这是局部注册-->
<h1/>
<p>局部注册</p>
<AAA></AAA>
<AAA></AAA>
<AAA></AAA>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//局部注册
import MyFirst from "./components/MyFirst"
HelloWorld,
AAA:MyFirst//局部注册组件 该组件只能在app.vue上使用
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2.3)使用组件
①Vue对象调用App.vue,App.vue调用一般组件
②自定义一个StudentDemo组件
注意:只能有一个元素,一般组件取名:大驼峰如MyComponent
<template>
<div>
<!--写html代码-->
<p>姓名:{{stuName}}</p>
<p>年龄:{{stuAge}}</p>
</div>
</template>
<script>
//vc对象
export default {
name:"StudentDemo",//组件名称 用来区分组件 在vue加载时 会以组件标签的形式呈现
data(){
return{
stuName:"张三",
stuAge:18
}
},
}
</script>
<style scoped>
/*css样式*/
</style>
③在根组件注册使用
<template>
<div id="app">
<!--<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<h1>这是app.vue 我在这写一个标签</h1>
<!–这是全局注册 来自vue对象–>
<MyFirstVc></MyFirstVc>
<MyFirstVc></MyFirstVc>
<MyFirstVc></MyFirstVc>
<MyFirstVc></MyFirstVc>
<!–局部注册–>
<h1/>
<p>局部注册</p>
<AAA></AAA>
<AAA></AAA>
<AAA></AAA>-->
<BBB></BBB>
<hr/>
<BBB></BBB>
</div>
</template>
<script>
/*import HelloWorld from './components/HelloWorld.vue'
//局部注册
import MyFirst from "./components/MyFirst"*/
import MyStudent from "./components/Student"
export default {
name: 'App',
components: {
/* HelloWorld,
AAA:MyFirst//局部注册组件 该组件只能在app.vue上使用*/
BBB:MyStudent
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
第三章、组件嵌套
在一般组件中引入另一个一般组件
3.1)Student组件
<template>
<div>
<p>
姓名:{{stu.name}}<br/>
</p>
<p>
年龄:{{stu.age}}<br/>
</p>
<p>
性别:{{stu.sex}}<br/>
</p>
</div>
</template>
<script>
export default {
name: "StudentDemo",
data(){
return{
stu:{
name:"小明",
age:18,
sex:"男"
}
}
}
}
</script>
<style scoped>
</style>
3.2)School组件
在School组件中引入Student组件
<template>
<div>
学校名称:{{school.name}}
<MyStudent></MyStudent>
<MyStudent></MyStudent>
<hr/>
</div>
</template>
<script>
import MyStudent from "./Student"
export default {
name: "SchoolDemo",
data(){
return{
school:{
name:"五道口职业技术学院"
}
}
},
components:{
MyStudent
}
}
</script>
<style scoped>
</style>
3.3)App.vue中注册使用两个组件
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!--<HelloWorld msg="欢迎使用vue工程"></HelloWorld>-->
<MySchool></MySchool>
<MySchool></MySchool>
<MySchool></MySchool>
<MySchool></MySchool>
<MySchool></MySchool>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
import MySchool from "./components/School"
export default {
name: 'App',
components: {
//HelloWorld:HelloWorld//当局部注册的声明和组件名一致时 写一个即可
//HelloWorld
MySchool
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>