赞
踩
个人博客(欢迎光临):Vue学习笔记(二)(赤蓝紫)
单页面应用程序SPA,指的是一个Web网站中只有唯一一个HTML页面,所有的功能和交互都在这个唯一的页面内完成。
vue-cli是Vue.js开发的标准工具。
npm install -g @vue/cli
vue通过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属性用法一样
组件化开发:把页面上可复用的UI结构封装成组件,从而方便项目的开发和维护
vue支持组件化开发。组件的后缀名是**.vue**
每个.vue组件可有三个部分组成:
<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>
上面的注册组件的方法是私有注册,即每一个需要用到经常用的组件,都需要反复注册。这个时候,可以直接在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')
props是组件的自定义属性,在封装通用组件时,合理使用props可以提高组件的复用性,允许使用者通过自定义属性,为当前组件指定初始值
props是只读的。
要修改的话,可以把得到的初始值赋给data中的属性,再进行修改,props中的属性的值会一直是初始值
default属性、type属性和required属性:如果使用者使用使用组件时,没有传递init属性, 则默认值生效
使用语法示例:
props: {
init: {
default: 0, //用default属性定义属性的默认值
type: Number, //限定传递的属性的类型,不匹配会报错
required: true, //设置为true时,必须要传递参数,否则即使有默认值,也会报错
}
},
默认情况下,写在**.vue组件中的样式会全局生效**,所以很容易造成多个组件之间的样式冲突问题
导致组件之间的样式冲突的原因:
通过给要设置样式的组件的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/ 深度选择器**
通过浏览器查看生效样式:
属性选择器使用不一定需要依靠其他选择器,单独使用表示选择所有有对应属性的元素
生命周期是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段
生命周期函数:由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行。
生命周期强调的是时间段,生命周期函数强调的是时间点
组件生命周期函数的分类:
生命周期图示:
组件的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>
组件的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节点现在不能操作)
将要把内存中编译好的HTML结构渲染到当前组件的DOM结构
重要,要操作当前组件的DOM,最早只能在mounted阶段,已经把内存中的HTML结构成功的渲染到了浏览器中,此时已经包含了当前组件的DOM结构
将要根据变化过后、最新的数据,重新渲染到组件的模板结构。(即现在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>
已经完成了组件DOM结构的重新渲染
数据发生变化时,如果要操作重新渲染过的DOM,应在updated()中执行
将要销毁组件,组件还处于正常工作的状态
DOM结构已经完全销毁
父组件
<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>
实现父组件向子组件传递数据,主要依靠
通过上面的方法,传递给子组件的数据在props的属性中,只读,所以需要修改的话,要把接收的数据赋给子组件data中的元素
通过在父组件处自定义事件,和在子组件处通过$.emit()方法触发自定义事件来实现子组件向父组件传递数据
兄弟组件之间的数据共享方案是EventBus
步骤:
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()之说呢。
动态组件指的是动态切换组件的显示与隐藏
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属性的作用。要不就是多此一举。还会让代码可读性下降。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。