Vue学习笔记(二)
个人博客(欢迎光临):Vue学习笔记(二)(赤蓝紫)
单页面应用程序SPA,指的是一个Web网站中只有唯一一个HTML页面,所有的功能和交互都在这个唯一的页面内完成。
1. vue-cli
vue-cli是Vue.js开发的标准工具。
1.1 安装
npm install -g @vue/cli
1.2 vue项目的部分文件功能
vue通过main.js把App.vue渲染到index.html的指定区域中。
- App.vue用来编写待渲染的模板结构
- index.html需要预留一个el区域等待渲染
- main.js把App.vue渲染到index.html预留的区域中
$(mount)用法:
import Vue from 'vue'
import MyCom from './components/myComponent'
Vue.config.productionTip = false
// new Vue({
// el: '#app',
// render: h => h(MyCom),
// })
new Vue({
render: h => h(MyCom)
}).$mount('#app') //$(mount)和上面的el属性用法一样
2. 组件
组件化开发:把页面上可复用的UI结构封装成组件,从而方便项目的开发和维护
vue支持组件化开发。组件的后缀名是**.vue**
每个.vue组件可有三个部分组成:
- template:组件的模板结构(必须包含), 只能有一个根节点
- script:组件的Javascript行为
- style:组件的样式
<template>
<div>
<h2>用户名:{{ username }}</h2>
</div>
</template>
<script>
export default {
// data: {
// username: 'admin'
// } //.vue文件中的数据源不可以用对象形式,而应是函数形式
data() {
return {
username: 'admin'
}
}
}
</script>
<style>
div>h2 {
color: red;
}
</style>
在vue中使用less:
<style lang="less">
.box {
background-color: pink;
h2 {
color: red;
}
}
</style>
2.1 组件使用的三个步骤
- 使用import语法导入要用的组件
- 在components节点注册组件
- 直接把组件当成标签在要渲染的地方使用
2.2 注册全局组件
上面的注册组件的方法是私有注册,即每一个需要用到经常用的组件,都需要反复注册。这个时候,可以直接在main.js中进行全局组件的注册
import Vue from 'vue'
import App from './App.vue'
import Test from './components/Test.vue' //导入要注册的全局组件
Vue.config.productionTip = false
Vue.component("Mytest", Test) //使用Vue.component()来进行全局组件的注册,第一个参数是要注册的组件的名称,第二个参数是要注册的组件
new Vue({
render: h => h(App),
}).$mount('#app')
2.3 组件的props
props是组件的自定义属性,在封装通用组件时,合理使用props可以提高组件的复用性,允许使用者通过自定义属性,为当前组件指定初始值
props是只读的。
要修改的话,可以把得到的初始值赋给data中的属性,再进行修改,props中的属性的值会一直是初始值
default属性、type属性和required属性:如果使用者使用使用组件时,没有传递init属性, 则默认值生效
使用语法示例:
props: {
init: {
default: 0, //用default属性定义属性的默认值
type: Number, //限定传递的属性的类型,不匹配会报错
required: true, //设置为true时,必须要传递参数,否则即使有默认值,也会报错
}
},
2.4 组件之间的样式冲突
默认情况下,写在**.vue组件中的样式会全局生效**,所以很容易造成多个组件之间的样式冲突问题
导致组件之间的样式冲突的原因:
- 单页面应用程序中,所有的组件的DOM结构都是基于唯一的index.html页面呈现的
- 每个组件中的样式都会影响到整个index.html页面中的所有DOM元素
通过给要设置样式的组件的style标签中添加"scoped"属性,可以实现不影响到其他组件的样式
原理:给组件里的所有标签都来一个自定义样式,然后通过属性选择器实现样式只会影响到该组件
上面使用"scoped"的代码,不使用"scoped"属性实现:
<template>
<div class="left-container" data-d-001>
<h3 data-d-001>Left 组件</h3>
<MyCount :init="5" data-d-001></MyCount>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.left-container {
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
h3[data-d-001] {
color: red;
}
</style>
只是使用"scoped"的话,无法实现单独修改用上的其他组件的样式
如果想要让某些样式对子组件生效,可以使用**/deep/ 深度选择器**
通过浏览器查看生效样式:
属性选择器使用不一定需要依靠其他选择器,单独使用表示选择所有有对应属性的元素
3. 组件的生命周期
生命周期是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段
生命周期函数:由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行。
生命周期强调的是时间段,生命周期函数强调的是时间点
组件生命周期函数的分类:
生命周期图示:
3.1 组件创建阶段
3.1.1 beforeCreate()
组件的props、data、methods还没有被创建,都处于不可用状态
<template>
<div>
<h2>test组件</h2>
</div>
</template>
<script>
export default {
props: ['info'],
data() {
return {
message: 'message'
}
},
methods: {
show() {
console.log('show');
}
},
beforeCreate() {
// console.log(this.info);
// console.log(this.message);
this.show();
}
}
</script>
<style>
</style>
3.1.2 created()
组件的props、data、methods已经创建完,处于可用状态。
created方法很重要,经常在里面调用methods的方法,请求服务器的数据,并把请求到的数据转存到data中,供渲染时使用,因为应该尽可能早的请求数据。
<template>
<div>
<h2>共有 {{ books.length }} 本书</h2>
</div>
</template>
<script>
export default {
props: ['info'],
data() {
return {
message: 'message',
books: [],
}
},
methods: {
show() {
console.log('show');
},
initBooklist() {
const xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
xhr.send(null);
xhr.addEventListener('load', () => {
const result = JSON.parse(xhr.responseText);
this.books = result.data;
}) //使用ajax获取图书信息示例
}
},
created() {
this.initBooklist();
}
}
</script>
<style>
</style>
组件的模板结构还没生成(DOM节点现在不能操作)
3.1.3 beforeMount()
将要把内存中编译好的HTML结构渲染到当前组件的DOM结构
3.1.4 mounted()
重要,要操作当前组件的DOM,最早只能在mounted阶段,已经把内存中的HTML结构成功的渲染到了浏览器中,此时已经包含了当前组件的DOM结构
3.2 组件的运行阶段
3.2.1 beforeUpdate()
将要根据变化过后、最新的数据,重新渲染到组件的模板结构。(即现在data里的数据已经变化了,但是DOM元素里的数据还没来得及变)
<template>
<div>
<h3>
用于测试运行阶段的message:
<span>{{ message }}</span>
</h3>
<button @click="datachange">更改数据</button>
</div>
</template>
<script>
export default {
props: ['info'],
data() {
return {
message: 'Hello',
}
},
methods: {
datachange() {
this.message += '!';
}
},
beforeUpdate() {
const span = document.querySelector('h3 span');
console.log('data里的数据:' + this.message);
console.log('DOM中的数据:' + span.innerHTML);
}
}
</script>
<style>
</style>
3.2.2 updated()
已经完成了组件DOM结构的重新渲染
数据发生变化时,如果要操作重新渲染过的DOM,应在updated()中执行
3.3 组件销毁阶段
3.3.1 beforeDestroy()
将要销毁组件,组件还处于正常工作的状态
3.3.2 destroyed()
DOM结构已经完全销毁
4. 组件间的数据共享
4.1 父组件向子组件传递数据
父组件
<template>
<div class="app-container">
<h1>父组件数据: {{ message }} <br>
{{ present }}</h1>
<Test :msg="message" :pst="present"></Test>
</div>
</template>
<script>
import Test from '@/components/Test.vue'
export default {
data() {
return {
message: 'Hello Son!',
present: {
fruit: 'apple',
toy: 'car'
}
}
},
components: {
Test
}
}
</script>
<style lang="less">
</style>
子组件
<template>
<div class="test">
<h3 class="de">
子组件
</h3>
<p>接收父组件传来的message: {{msg }}</p>
<p>接收父组件传来的present: {{pst }}</p>
</div>
</template>
<script>
export default {
props: ["msg", "pst"],
data() {
return {
message: 'Hello',
}
},
methods: {
datachange() {
this.message += '!';
}
},
}
</script>
<style scope>
.de {
color: red
}
</style>
实现父组件向子组件传递数据,主要依靠
- 在子组件自定义属性
- 在父组件通过v-bind传递数据给子组件的自定义属性
通过上面的方法,传递给子组件的数据在props的属性中,只读,所以需要修改的话,要把接收的数据赋给子组件data中的元素
4.2 子组件向父组件传递数据
通过在父组件处自定义事件,和在子组件处通过$.emit()方法触发自定义事件来实现子组件向父组件传递数据
4.3 兄弟组件组件的数据共享
兄弟组件之间的数据共享方案是EventBus
步骤:
- 创建eventBus.js文件,向外共享一个Vue的实例对象(用法相当于中转站)
- 在数据发送方,调用bus.$emit(‘事件名称’, 要发送的数据)方法触发自定义事件
- 在数据接收方,调用bus.$on(‘事件名称’, 事件处理函数)方法注册一个自定义事件
5. ref引用
ref用来辅助开发者在不依赖jQuery的情况下,获取DOM元素或组件的引用。
每个vue的组件实例上,都包含一个** r e f s 对 象 ∗ ∗ , 里 面 存 储 着 对 应 的 D O M 元 素 或 组 件 的 引 用 。 默 认 情 况 下 , ∗ ∗ 组 件 的 refs对象**,里面存储着对应的DOM元素或组件的引用。默认情况下,**组件的 refs对象∗∗,里面存储着对应的DOM元素或组件的引用。默认情况下,∗∗组件的refs指向一个空对象**。
使用ref引用DOM元素:
所以上面要操作DOM元素可以通过this.$refs.myh3来修改,如:
使用ref引用组件实例:
控制文本框和按钮的按需切换:(点击按钮,按钮隐藏,文本框显示;文本框失去焦点,按钮显示,文本框隐藏;文本框显示时自动获取焦点)
<template>
<div class="app-container">
<h3 ref="myh3">MyRef组件</h3>
<input type="text" v-if="inputVisible" ref="myipt" @blur="showButton">
<button v-else @click="showInput">展示输入框</button>
</div>
</template>
<script>
// import Left from '@/components/Left.vue'
// import Right from '@/components/Right.vue'
export default {
data() {
return {
inputVisible: false
}
},
methods: {
showInput() {
this.inputVisible = true;
console.log(this.$refs.myipt); //调用showInput时,数据刚刚发生了改变,而这行和上一行代码之间的时间间隔太短,
// 导致DOM结构没有进行完渲染,所以此时出现undefined
this.$nextTick(() => { //组件的$nextTick()方法,会把回调函数推迟到下一个DOM更新周期之后执行
console.log(this.$refs.myipt);
this.$refs.myipt.focus();
})
},
showButton() {
this.inputVisible = false;
}
},
// components: {
// Left,
// }
}
</script>
<style lang="less">
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
</style>
this.$nextTick(callback)方法:
组件的**$nextTick(callback)方法会把callback推迟到下一个DOM更新周期之后执行**,即等组件的DOM更新完之后,再执行callback回调函数。从而保证回调函数能操作到最新的DOM元素。
上面的例子不能在生命周期函数中的updated()中使用input.focus(),因为data中的数据一发生变化,updated()都会执行一次,即input隐藏时也会执行,此时压根没有input元素,又何来input.focus()之说呢。
6. 动态组件
动态组件指的是动态切换组件的显示与隐藏
vue提供了一个内置的组件,专门用来实现动态组件的渲染。
-
使用组件的三大步骤:
- 引入组件
- 注册组件
- 通过标签使用组件
第三步,可以使用内置的component组件,通过is属性来动态指定要渲染的组件
即上面的3可以换成
<component :is="'Left'"></component>
动态指定渲染组件示例:
App组件
<template>
<div class="app-container">
<h1>App 根组件</h1>
<button @click="comName='Left'">展示Left组件</button>
<button @click="comName='Right'">展示Right组件</button>
<hr />
<div class="box">
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
data() {
return {
comName: 'Left'
}
},
components: {
Left,
Right
}
}
</script>
<style lang="less">
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
</style>
Left组件(注释代码是后面的部分才用上的)
<template>
<div class="left-container">
<h3>Left 组件</h3>
<h4>count的值是 {{ count }}</h4>
<button @click="count += 1">+1</button>
</div>
</template>
<script>
export default {
// name: 'MyLeft',
data() {
return {
count: 0
}
},
created() {
console.log('左侧被创建了');
},
destroyed() {
console.log('左侧被销毁了');
},
// activated() {
// console.log('左侧被激活了');
// },
// deactivated() {
// console.log('左侧休息了');
// }
}
</script>
<style lang="less">
.left-container {
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
</style>
问题:在上面的示例中,点击Left组件的+1按钮,已经改变了数值,但是,点击展示Right组件后,再重新展示Left组件,会发现数值又回归了初始状态。从控制台中的输出,可以知道,原因是动态指定渲染Right组件时,Left组件会被销毁,之后右重新创建,所以数据会是初始状态。
可以通过vue内置的<keep-alive>组件
保持动态组件的状态。
用法:用keep-alive组件包住动态组件就可以。
<keep-alive>
<component :is="comName"></component>
</keep-alive>
当组件被激活时,会自动触发组件的activated生命周期函数。
当组件休眠时,会自动触发组件的deactivated生命周期函数。
把上面Left组件的注释代码启用。可以发现,当Left组件激活时(展示Left),会打印出"左侧被激活了";而Left休眠时(展示Right),会打印出"左侧休息了"。
include属性:实现只有名字匹配的组件才会被缓存。就是说,上面的例子中,Left组件中有数据,想要保存Left的状态,但是Right组件没有必要缓存,甚至有可能Right组件是一次性的用法。这个时候通过include属性,可以指定谁会被缓存。多个组件间用英文的逗号**分隔。
逗号左右不要有空格
用法:
<keep-alive include="Left">
<component :is="comName"></component>
</keep-alive>
可以发现,上面的Right组件在调试工具中显示的名字并不是Right,而是自定义的MyRight。这是通过组件的name节点修改的。
如果修改了组件的名称,那么在include属性中的名字应该是修改后的名字。
exclude属性:表示不缓存哪些组件。和include属性一起用没有意义,要不就是取消掉include属性的作用。要不就是多此一举。还会让代码可读性下降。