Vue.js 相关知识(组件)
1. 组件介绍
组件(component),vue.js最强大的功能之一
- 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体
- 根组件:我们实例化的Vue对象就是一个组件,且是所有组件的根组件
- 分类:全局组件,局部组件
- 不足:跳转时,无法传递参数,则无法实现同一个页面根据不同的参数显示不同内容
注:每个组件都是Vue的实例对象
2. 全局组件
通过Vue的静态方法(component)定义,全可在所有组件中使用。语法如下:
<div id="app">
<!-- 使用组件 -->
<my-header></my-header>
</div>
<script type="text/javascript">
//定义全局组件
Vue.component("my-header",{
template:"<div>我是全局组件</div>"
})
let app = new Vue({
el:"#app"
})
</script>
3. 局部组件
在父组件的 components 属性中定义。
3.1 定义组件对象
- 组件对象名,采用驼峰法命名
- 组件对象的配置项与Vue实例的配置项相似,data 数据项除外(组件对象中,data是一个方法)
3.2 定义组件模板
组件模板中,必有一个根元素,不能直接写h1、p、span、a等内容
3.3 注册组件
注册组件,组件在哪里使用,就注册到哪里
3.4 使用组件
定义组件时用的驼峰法,使用时将驼峰法转换为帕斯卡命名
<div id="app">
<!-- 4.使用组件 -->
<my-header></my-header>
</div>
<!-- 2.定义组件模板 -->
<template id="my-header">
<div>
<h3>我是头部局部组件</h3>
<p>{{name}}</p>
</div>
</template>
<script type="text/javascript">
//1.定义局部组件
let MyHeader = {
template:'#my-header',//组件的模板,#my-header指id为my-header的模板
data(){
return {
name:"局部组件"//数据项
}
}
}
let app = new Vue({
el:"#app",
//3.注册组件
components:{
MyHeader//将MyHeader 这个组件注册到app根组件中
}
})
</script>
4. template 语法规则
组件对象的template属性用来设置组件的模板内容,模板内容有3种写法:
- 直接写在字符串中
<div id="app">
<my-header></my-header>
</div>
<script type="text/javascript">
let MyHeader = {
template:'<div><h1>我是头部局部组件:{{name}}</h1></div>',
data(){
return {
name:"局部组件"
}
}
}
let app = new Vue({
el:"#app",
components:{
MyHeader
}
})
</script>
- 将模板内容写在template标签中(例子)
- 将模板内容写在script标签中
<div id="app">
<my-header></my-header>
</div>
<script type="text/x-template" id="my-header">
<div>
<h3>我是头部局部组件</h3>
<p>{{name}}</p>
</div>
</script>
<script type="text/javascript">
let MyHeader = {
template:'#my-header',
data(){
return {
name:"局部组件"
}
}
}
let app = new Vue({
el:"#app",
components:{
MyHeader
}
})
</script>
5. 组件间的相互通信
组件实例是孤立的,不可在子组件中直接用父组件中的数据(组件特性:高内聚、低耦合)
父组件通过 props 向下传递数据,子组件通过 emit 向上发射事件传递数据
5.1 父传子
先在父组件中定义数据
在父组件的模板中,通过属性绑定把数据绑定在子组件上,语法:子组件 :变量名=”数据项”
在子组件中定义props属性,用来接收父组件传递的数据
在子组件模板中使用数据
在子组件的函数中使用数据
<div id="app">
{{number}}
<!-- 2. 把数据绑定在子组件上 -->
<my-collapse :num="number"></my-collapse>
</div>
<template id="my-collapse">
<div>
<!-- 4. 在子组件中使用数据 -->
<p>{{num}}</p>
<p>{{Say()}}</p>
</div>
</template>
<script type="text/javascript">
let MyCollapse = {
template:'#my-collapse',
props:{
//3. 接受父组件传递的数据,Numder类型约束,表示传递过来的数值类型
num:{
type:Number,
default:0,
required:true
}
},
methods:{
//5. 在子组件的函数中使用数据
Say(){
console.log(this.num)
}
}
}
let app = new Vue({
el:"#app",
data:{
//1. 定义父组件的数据项
number:1000
},
components:{
MyCollapse
}
})
</script>
- props细节:每个数据项,都可有3个属性进行约束
- type:类型约束,约束父组件给子组件传递的数据类型。类型包括:Object、Array、Number、String、Boolean
- default:指定默认值,若父组件未传递数据,可指定默认值
- required:指定该数据项是否必须传递
5.2 子传父
- 在子组件中添加事件监听,通过$emit从子组件向父组件发射一个事件
- 在父组件中接收子组件发射过来的事件,格式:<子组件 @子组件事件名=”父组件要执行的方法”>
- 在父组件中定义方法接收子组件传递的事件及数据
注:子组件上的事件名@addmsg不能使用驼峰法
<div id="app">
<p>{{content}}</p>
<!-- 3. 在父组件中接收子组件发射过来的事件 -->
<my-collapse @addmsg="receive"></my-collapse>
</div>
<template id="my-collapse">
<div>
<input v-model="msg" type="" name="">
<!-- 2. 在子组件中添加事件监听 -->
<button @click="sendMsg">按钮</button>
</div>
</template>
<script type="text/javascript">
let MyCollapse = {
template:'#my-collapse',
data(){
return {
msg:''
}
},
methods:{
//1.从子组件向父组件发射事件,参数1:事件名;参数2:传递的数据
sendMsg(){
this.$emit("addmsg",this.msg)
}
}
}
let app = new Vue({
el:"#app",
data:{
content:''
},
components:{
MyCollapse
},
methods:{
//4. 在父组件中定义方法接收子组件传递的事件及数据,参数是子组件传递的数据
receive(d){
return this.content=d
}
}
})
</script>
6. 插槽 slot
插槽,即一个占位符,能在不同环境下,传递不同的参数,并得到不同的效果,在Vue中通过slot标签实现
思路:先在子组件中定义一个占位符(插槽),再使用真实的内容替换这个插槽
6.1 单个插槽
当子组件模板只有一个无属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的DOM位置,并替换掉插槽本身
<div id="app">
<son>
<h3>只是标题</h3>
<p>这是段落</p>
</son>
</div>
<template id="son">
<div>
<slot></slot>
</div>
</template>
<script type="text/javascript">
let Son = {
template:'#son'
}
let app = new Vue({
el:'#app',
components:{
Son
}
})
</script>
6.2 具名插槽
若有多个插槽(占位符),通过name属性加以区分,这种插槽就是具名插槽(可更灵活的管理组件的内容)
- 先定义插槽(占位符),即将内容不确定的地方使用插槽占个位置
- 再使用插槽,即使用真实内容替换占位符
<div id="app">
<son>
<h3 slot="title">这是标题</h3>
<p slot="content">这是段落</p>
</son>
</div>
<template id="son">
<div>
<slot name="title"></slot>
<slot name="content"></slot>
</div>
</template>
7. 深入理解 Vue 实例
通过 new Vue() 获得一个对象,即 Vue实例,Vue实例提供如下属性、方法:
7.1 Vue实例属性
- $el,获取挂着 Vue 实例的元素
- $data,获取 Vue 实例的数据项
<div id="app"></div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
name:"David",
age:20
}
})
console.log(app.$el);
console.log(app.$data);
</script>
$refs,获取对DOM元素的引用
Vue 侧重于数据驱动,而jQuery侧重于dom,Vue提供了 $refs 属性对dom元素进行灵活的操作,具体使用:
- 在元素上添加一个属性ref:<标签 ref=“keyword”
- 在Vue实例中,通过this.$refs获取所有的dom引用
<div id="app">
<a href="" ref="oa">超链接</a>
<button @click="setStyle">点击切换</button>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
methods:{
setStyle(){
//找到DOM节点
console.log(this.$refs)
console.log(this.$refs.oa)
this.$refs.oa.style.textDecoration='none'
this.$refs.oa.style.color='red'
}
}
})
</script>
7.2 Vue实例方法
- $mount,手动设置挂载点
<div id="app">
{{name}}
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:"David"
}
})
app.$mount('#app')
</script>
- $watch,侦听器,监听数据项、计算属性值的变化,一旦值变化,则自动调用$watch方法
将所有的异步操作,都写在watch里面进行实现
<div id="app">
出生年月:
<input v-model="birthday" type="" name=""><br>
年龄:<p>{{age}}</p>
</div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
birthday:'',
age:0
},
watch:{
birthday(){
setTimeout(()=>{
this.age = new Date().getFullYear()-new Date(this.birthday).getFullYear();
},3000)
}
}
})
</script>
8. Vue 实例的生命周期
实例化的Vue对象(根组件)以及自定义的组件对象都有生命周期,Vue 设计者为方便调试程序,提供了8个钩子函数:
<div id="app">
{{name}}
</div>
<script type="text/javascript">
let app = new Vue({
data:{
name:'David'
},
beforeCreate(){
alert('beforeCreate')
},
created(){
alert('created')
},
beforeMount(){
alert('beforeMount')
},
mounted(){
alert('mounted')
},
beforeUpdate(){
alert('beforeUpdate')
},
updated(){
alert('updated')
},
beforeDestory(){
alert('beforeDestory')
},
destroyed(){
alert('destroyed')
}
})
app.$mount('#app')
app.$destroy('name')
</script>
生命周期函数作用:在不同的阶段,做相应的工作
- created阶段,初始化数据,创建数据对象
- mounted阶段,使用数据项替换模板,即将数据挂载到DOM元素节点上
- updated阶段,当DOM节点中的数据发生改变,在此阶段进行更新
9. 动态组件
可定义多个组件,再使用 :is 属性动态地在多个组件之间切换
语法:<component v-bind:is=”组件名”></component>
Component 相当于一个占位符,具体显示哪个组件,通过:is指定
<div id="app">
<span @click="currentCom='FirstCom'">第一个</span>
<span @click="currentCom='SecondCom'">第二个</span>
<component :is="currentCom"></component>
</div>
<template id="com1">
<div>第一个组件</div>
</template>
<template id="com2">
<div>第二个组件</div>
</template>
<script type="text/javascript">
let FirstCom={
template:'#com1',
mounted(){
console.log("第一个被渲染")
}
}
let SecondCom={
template:'#com2',
mounted(){
console.log("第二个被渲染")
}
}
let app = new Vue({
el:"#app",
data:{
currentCom:''
},
components:{
FirstCom,
SecondCom
}
})
</script>
- keep-alive 组件
无 keep-alive 组件时,每次切换组件都重新创建一次组件,使用 keep-alive后,会将创建过的组件保存在内存中,以后使用时直接使用,而不会每次重新创建
<div id="app">
<span @click="currentCom='FirstCom'">第一个</span>
<span @click="currentCom='SecondCom'">第二个</span>
<keep-alive>
<component :is="currentCom"></component>
</keep-alive>
</div>
<template id="com1">
<div>第一个组件</div>
</template>
<template id="com2">
<div>第二个组件</div>
</template>
<script type="text/javascript">
let FirstCom={
template:'#com1',
mounted(){
console.log("第一个被渲染")
}
}
let SecondCom={
template:'#com2',
mounted(){
console.log("第二个被渲染")
}
}
let app = new Vue({
el:"#app",
data:{
currentCom:''
},
components:{
FirstCom,
SecondCom
}
})
</script>
Vue.js 相关知识(组件)的更多相关文章
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- Vue.js相关知识3-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js相关知识2-组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js相关知识1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 相关知识(路由)
1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入v ...
- Vue.js 相关知识(动画)
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
- Vue.js 相关知识(基础)
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
- Vue.js相关知识4-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 相关知识(脚手架)
1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm n ...
随机推荐
- java基础二 java的跨平台特性
一:java跨平台的特性: 1.生成不平台无关系的字节码. 2.通过和平台有关的jvm即java虚拟机来执行字节码.jvm不跨平台. 图示: 疑问:1.为什么我们不直接写字节码? 因为字节码只有jvm ...
- 对cordova打包的apk文件进行签名
可用于没有签名和已经签名的apk,再次签名. jarsigner -verbose -keystore [keystorePath] -signedjar [apkOut] [apkin] [alia ...
- 【转载】Caffe + Ubuntu 14.04 + CUDA 6.5 新手安装配置指南
洋洋洒洒一大篇,就没截图了,这几天一直在折腾这个东西,实在没办法,不想用Linux但是,为了Caffe,只能如此了,安装这些东西,遇到很多问题,每个问题都要折磨很久,大概第一次就是这样的.想想,之后应 ...
- linux iSCSI target/initiator配置
linux iSCSI target配置全过程一:Install iSCSI target for Linux1,操作系统:[root@rac2 ~]# cat /etc/issueEnterpris ...
- SharePoint Search 分词(WordBreaker)
[问题] 我们经常会搜索一个很长的词,例如“国際協力銀行” ,对应的搜索结果中会有关于“国際”“協力”“銀行”相关内如都会搜索到,这样的行为就是分词,那如何知道搜索内如是如何分词的呢? [解决办法] ...
- springboot mybatis 后台框架平台 shiro 权限 集成代码生成器
1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.servic ...
- #leetcode刷题之路36-有效的数独
判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可.数字 1-9 在每一行只能出现一次.数字 1-9 在每一列只能出现一次.数字 1-9 在每一个以粗实线分隔的 3x ...
- # pc端个性化日历实现
pc端个性化日历实现 技术:vue => v-for.slot-scop 插槽域 需求:需要实现日历上每一天动态显示不同的信息 思路:运用vue 中 slot-scop 插槽域的知识点,将个性化 ...
- Wifi NAT Driver
最近遇点奇葩问题,最开始以为被种马了经检测发现不是,分享下以后大家出现类似也好解决:同时列出尝试过程以便大家以后自行排除自己网络问题: 症状: 网络连接右下角图标显示为网卡无线网卡和有线均禁用状态,查 ...
- Scala中=>的用法
1. 表示函数的类型(Function Type) 例如: def double(x: Int): Int = x*2 函数double的类型就是 (x: Int) => Int 或者 Int ...