一、过滤器
1.过滤器Filters(只能在vue2中使用)
p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面。竖线代表要调用过滤器。
过滤器函数必须定义到filters节点之下,过滤器的本质是函数。
字符串charAt()方法:表示从字符串中把索引对应的字符豁出来。
.toUpperCase:字符大写
2.私有过滤器和全局过滤器
-
注意!若全局和私有名字相同,调用的是私有过滤器
3.连续调用多个过滤器
就是相当于链式,上一个过滤器的处理结果传给下一个过滤器处理
4.过滤器传参
二、侦听器
1.watch侦听器
watch侦听器允许开发者监视数据变化,从而对数据的变化做特定的操作
所有的侦听器,都应该被定义到watch节点下
语法格式:
①方法格式的侦听器
缺点:a、无法在刚进入界面时,就自动触发。
b、如果侦听的是一个对象,对象里面的属性发生变化不会触发侦听器
监听谁就把谁做名字
②对象格式监听器
好处:a.可以通过immediate选项,让侦听器自动触发
b.可以通过deep选项,让对象里面的属性变化也能触发侦听器
2.immediate选项
immediate默认值是false,true——自动触发一次。表示当前页面渲染好之后,立即触发watch侦听器。
3.deep选项
开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器
deep:true——开启深度监听
如果想要侦听对象中的某一个属性,则必须包裹一层单引号。例如:
watch{'info.username'(newVal){console.log(newVal)}}
三、计算属性
1.计算属性
是指通过一系列运算之后,最终得到一个属性值。这个动态计算出来的属性值,可以被模板结构或method使用
语法格式:所有的计算属性都要放到computed中去。计算属性要定义成方法格式
computed:{//rgb作为欸一个计算属性,被定义成了方法格式rgb(){return `$rgb{this.r},${this.g},${this.b}`}}
特点:
a.定义的时候定义为方法 b.使用时当属性
好处:
a.实现了代码的服用 b.只要计算属性中以来的数据源变化了,则计算属性会自动重新求值
2.axios使用
(1) axios是一个专注于网络请求的库
语法:
axios传递参数方式
axios({parames:()//URL中的查询参数,GETdata:()//请求体参数,POST)}
加上await,这样就是一个结果值,而不是promise实例
因为axios在拿到数据的时候套了一层壳,所以我们需要解构赋值,解构出data属性,重命名为res
(2)axios.get,axios.post
四、vue-cli
1.单页面应用程序(SPA)
指的是一个web网站只有唯一一个HTML网页,所有的功能与交互都在这唯一的一个页面内完成
2.vue-cli
(1) 简化了程序员基于webpack创建工程话的Vue项目的过程
安装:npm install -g @vue/cli
查询:vue -V
(2)快速生成工程化的Vue项目——vue create 项目名称
选择最后一项:手动选择要安装哪些功能
Bable:解决兼容性;CSS Pre-processors:css预处理器
就是把安装的插件配置文件放到独立文件
若不小心在框里选中,导致其停滞不动解决:ctrl+c
local:本机访问地址;Network:局域网访问地址
注意访问网址时,不能关闭终端窗口,否则会无法访问
(3)
(4)vue项目运行流程
通过把main.js把App.vue渲染到index.html的指定位置
例:
vue部分(test):<template><div> <h3>test<h3></div></template>main.js部分import Testfrom './test.vue'new Vue({el:'#Test'//把render函数指定的组件,渲染到HTML页面中render:h=>h(Test)})main.js的方式二new Vue({render:h=>h(Test)}).$mount('#app')//就是替换掉原来app的部分,就相当于原来el指定范围
五、vue组件
1.vue组件
vue是一个支持组件化开发的前端框架。规定组件的后缀名是.vue.组件是对UI结构的服用
2.vue组件的三个组成部分
默认导出:export default{ }
注意:①.vue组件中的data不能指向对象,因为组件中的data必须是一个函数。所以要写成函数形式:data(){ return ********}
②template里面只能有一个根元素
3.启用less语法 <style lang="less">
4.组件之间的父子关系
(1)组件封装好之后,彼此之间是相互独立的,不存在父子关系。在使用组件的时候,根据比才的嵌套关系,形成父子关系、兄弟关系
(2)使用组件的三个步骤
①用import语法导入需要的组件——②使用component节点注册组件——以标签形式使用刚才注册的组件(第一个图在script中 )
扩:配置path.Autocomplete
下path.Autocomplete——点击右下角小齿轮——扩展设置——右上角打开设置——粘贴
注意:要直接定位到项目的文件夹打开,不能打开包含多个项目的文件夹
(3)通过components注册的是私有子组件
如组件A中注册F,F只能用在组件A中,不能用组件B中
扩:安装Vuter——输入<,选择第一个,回车可以快速生成模板
注册全局组件:
5.组件的props
(1) props是组件的自定义属性。因为组件使用的时候,各个组件使用它,但是又想有一些不一样,所以此时我嫩采用props。
语法格式:
例如:props['init']组件使用时:<count init="*****"></count>//像id,class是系统自己就有的属性,而init没有,所以叫自定义属性
注意!!!:init里面拿到的是字符串,可以结合v-bind(:)可以转化为数字型——:init="***"
props是只读的!!,程序员不能直接修改props的值
修改方法:要想修改props的值,可以把props的值转存到data中,
(2)props的default默认值
在声明自定义属性时,可以通过default来定义属性的默认值:
(3)props的type类型
(4)props的required必填项
增添了required:true之后,在标签里面没有传就是错的。例如init里面增添,标签<count></count>会报错,而<count init="***"></count>不会报错
(5)组件之间的样式冲突问题
加<style scoped></style>,以后写样式都最好加上
(6)使用deep修改子组件的样式
使用例:/deep/ h5。
六、生命周期&数据共享
1.组件的生命周期
生命周期:一个组件从创建——运行——销毁的整个过程,强调的是一个时间段
生命周期函数:是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行
2组件之间的数据共享
(1)组件之间的关系:①父子关系 ②兄弟关系
(2)父组件向子组件共享数据
通过自定义属性实现:
(3)子组件向父组件——通过自定义事件实现:
(3)兄弟组件之间的数据共享——在vue2.x,用EventBus
EventBus使用步骤:
3.ref引用
(1)ref是用来辅助开发者不依赖jQuery的情况下,获取DOM元素或组件的引用
<h1 ref="myh1"></h1>methods:{showThis(){this.$refs.myh1.style.color='red'}}//$refs:h1——所以,我们可以通过此方法获取到h1,从而对他进行操作,比如这里就是改变了颜色
(2)this.$nextTick(cb)方法
例如:this.$nextTick(()=>{ this.$refs.iptRef.focus() })
数组方法:
arr.some:some为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个true。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。
arr.every:如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。
注意:every() 不会对空数组进行检测。every() 不会改变原始数组。
arr.reduce:reduce 为数组中的每一个元素依次执行回调函数。接受函数作为一个累加器。注意reduce无法调用空数组,会报错
//arr.reduce((累加的结果,当前循环项)=>{},初始值)例:arr.reduce((amt,item)=>{amt+=item.price*item.count},0)
七、动态组件
1.动态组件
(1)定义:动态组件是指动态切换组建的显示与隐藏
(2)实现动态组件渲染——component
component标签(位置:写在template要渲染的位置)时vue内置的,作用:组件占位符;is属性的值,表示要渲染的组件的名字。
(3)使用keep-alive保持状态
在动态渲染的时候,隐藏的会被销毁,我们想要保持,就使用这个方法
使用方法:component标签用<keep-alive></keep-alive>包裹起来
(4)keep-alive对应的生命周期函数
当组件第一次被创建的时候,既会执行created生命周期,也会执行activated生命周期;被激活的时候只会触发activated生命周期,因为组件没有被重新创建
当组件被缓存时,会自动触发组件的deactivated生命周期函数;当组件被激活时,会自动触发组件的activated生命周期函数(这两个周期只有加了keep-alive才使用)
(5)keep-alive的include属性
如果不加的话就会默认全部缓存
使用exclude可以指定那些组件不需要被缓存。注意!!!两个属性不能同时使用
八、插槽(slot)
1.插槽
把不确定、希望由用户指定的部分定义为插槽
(2)使用
管饭规定每一个slot插槽,都有一个name名称,如果省略了slot的name属性,则有一个slot的name属性叫做default
如果要把内容填充到指定名称的插槽中,需要使用v-slot,而且要使用在template标签上,不能直接用在元素身上。
例:<template v-slot:default(这里填插槽名称)><p></p></template>
简写:#——v-slot:default可以写成#default
(3)后备内容
(4)具名插槽
用右name属性,反之没有的叫做匿名插槽
(5)作用域插槽
在封装组件时,为预留的<slot>提供属性对应的值,这种用法叫做“作用域插槽”
插槽提供的属性我们用等号来接收,
理解:slot里面的属性值我们可以用等号来接收,。例如我们接收msg,就可以得到msg内容,接受user,可以得到user里面user.name等内容
九、自定义指令
1.分类
(1)私有自定义指令
①
bind是一个函数,缺点是只在第一次被绑定的时候触发, el是固定写法。(这个写在script里面)。
定义指令时,不用加v-,只有在使用的时候才加,变成v-color
②update函数
就是把bind的位置替换,用法都是一样的 。但是在第一次是不生效,在后面DOM更新时生效
③函数简写
(2)全局自定义指令
注意全局声明的要放到main.js中去
ESlint
(1)安装——直接vscode搜索ESlint
是用来规范代码格式,如果格式不正确,也会报错
报格式错误,可以去网站搜索错误信息,可以查看问题在哪里
扩:希望代码运行在哪里停止就在那里加:debugger
十、路由
1.前端路由的概念与原理
(1)路由就是对应关系。前端路由:Hash地址与组件之间的对应关系(我们访问页面网址后面会出现#,#后面的部分对应哈希地址,想要调用使用:location:hash,注意获得的值包括#号)
(2)前端路由的工作方式
(3)实现前端路由
例:<a herf="#about"></a>——就会看到网址:
2.vue-router
(1)什么是:是vue.js给出的路由几角方案,只能结合vue项目进行使用,能够轻松的管理SPA项目中组件的切换。网址:网址
(2)vue-router安装和配置步骤
①安装vue-router包——安装:npm i vue-router -S
②创建路由模块
注意:在进行模块化导入的时候,如果给的是文件夹,则默认导入这个文件夹下,名字叫做index.js的文件(也就是说,不用写全也可以,它可以默认寻找)
router-view:作用:占位符——<router-view></router-view>
router-link:可以代替普通的a链接——<router-link to="/****">,使用它的好处就是,不用写hash地址前面的#,它会自动帮我们加
3.vue-router的常见用法
(1)路由重定向——redirect
访问A,没有要展示的组件,那么强制用户跳转到C
(2)嵌套路由
通过路由实现组件的嵌套。模板内容中又有自己路由链接,点击子级路由链接显示子级模板内容。
通过children属性声明子路由规则
注意:子路由规则不要用/开头,但是父级路由规则要有/开头
(3)默认子路由
如果children数组里面,某个路由规则的path值为空字符串,则这条路由规则叫做默认子路由。也就是说,我们一进到这个父级,我们就会默认展示这一个默认子路由。
4.动态路由匹配
(1)基本用法
(2)为路由规则开启props
①数组里面加上:props:true ②:
在hash地址中,/后面的参数项叫做路径参数,在路由参数对象中,需要this.$router.params来访问参数路径。
在hash地址中,?后面的参数项叫做查询参数,在路由参数对象中,需要this.$router.query来访问查询参数。
fullPath包含完整的hash地址,包含路径参数和查询参数
5.声明式导航&编程式导航
声明式导航:点击链接实现导航的方式
编程式导航:调用API方法实现导航的方式
$router.go的简化用法
6.导航守卫
(1) 可以控制路由的访问权限
(2)全局前置守卫
(3)守卫方法的三个形参
(3)next函数的三种调用方式
①直接放行:next()
②强制其跳转:next(‘某个地址’)
③不允许跳转到后台主页,停留在当前页面:next(false)
8.9-8.10学习汇报与总结
1.问题解决
(1)问题:显示成功安装vue-cli之后,查看版本号报错
解决:以管理员身份运行PowerShell——输入set-ExecutionPolicy RemoteSigned——输入Y——最后能查询到版本号。
2.8.9-8.10学习体会与感受
完成了vue视频第三、四天的学习。东西多也不像之前的这么好理解(最不清楚的应该是生命周期,要慢慢看慢慢想),有的地方看几遍才能大致理解,看一遍远远是不够,所以也愈发觉得在实践当中巩固知识的重要性,不管是看了懂还是不懂,总归不使用没多久就会忘了。做好笔记,忘记的就翻,有新的理解就加上去。
3.8.11-8.12学习计划
完成vue视频第五、六天的学习