- 昨日回顾
-
1 计算属性
- 插值语法+函数
-
使用计算属性
- 计算属性重写过滤案例
- 2 监听属性
-
3 组件介绍和定义
- 组件之间数据隔离
-
4 组件通信
- 父子通信之父传子
-
父子通信之子传父
- ref属性
- 扩展
-
5 动态组件
- 通过v-if显示组件切换
-
动态组件component标签
- keep-alive保持组件不销毁
-
6 插槽
- 匿名插槽
- 具名插槽
-
7 vue-cli
- node.js环境搭建
- 扩展
- 作业
昨日回顾
# 1 checkbox v-model 只针对于input,做双向数据绑定
-单选 :选中或不选中 选中就是true,不选中就是false
-多选 :数组,选了多个,把选中的value值放到数组中
# 2 购物车案例
-checkbox 多选
-插值 可以放 函数() 把函数返回结果放在插值中
-插值中的东西,只要变量发生变化,就会重新刷新
getprice 使用了 checkbox的数组----》只要数组发生变化,getprice就会重新运算,刷新页面
# 2.1 全选全不选
-全选的checkbox----》checkbox单选---》布尔类型----》每次变化都会触发handleCheckAll的执行
-只要是true,就把 this.checkGroup = this.goodList,
-只要是false,把this.checkGroup = []
-下面的每个checkbox----》checkbox多选---》数组类型----》每次变化触发handelCheckOne
-每次都要判断this.checkGroup长度和this.goodList长度是否一样,如果一样说明全选了,全选了就把checkAll 设置为true
-否则,就是false
# 2.2 购物车带加减
-加----》绑定点击事件,自增1
-减-----》函数判断,不能小于1 ,如果小于1 ,不让减了,做提示
# 3 v-model进阶 修饰v-model
-lazy
-number
-trim
# 4 vue的声明周期
-8个生命周期钩子函数
-created:ajax请求放在这里
-destory:销毁,定时任务,清理掉
-延迟任务,定时任务
-实时跟后端交互
-秒杀场景
-实时监控你服务器cpu的占用率
-折线图:psutil:cpu核心数,占用率,内存使用率,某个盘符使用率 /user
-echarts
# 5 与后端交互
-js原生发送ajax请求
-jq的ajax
-fetch方案
-axios 封装了原生的ajax
-跨域问题:浏览器的安全策略,不允许向不同域发送请求,获取数据
-axios.get('地址').then(res=>{
res 对象, res.data 响应体的数据
})
# 6 如何实现服务端主动推送消息效果[在线聊天室]
-http 轮询 长轮询 websocket-不是所有浏览器都兼容
# 7 组件 组件化开发
-全局组件
Vue.component('名字',{template,data(){return {}},methods,生命周期})
-局部组件(只能用在当前组件中) 以后咱们用局部组件用的多
components: {
foo:{}
}
1 计算属性
# 插值语法写函数 --> {{ 函数() }}
如果 {{函数()}} ,每次页面刷新,函数都会重新执行
函数---》当属性来使用,缓存
# 计算属性
计算属性只有使用的变量发生变化时,才重新运算
计算属性就像Python中的property,可以把方法/函数伪装成属性
插值语法+函数
需求:写一个输入框,输入框右侧即时显示用户输入的内容,如果用户输入的是英文字母(假设用户只输入英文),将输入的第一个英文字母大写。
插值语法放入一个函数时{{函数()}}
,每次页面刷新,函数都会重新执行。
可能出现一种情况,比如只是刷新了页面的某一个部分,此时不想让函数重新计算。由于函数这种自动更新不是我们想要的,所以需要使用:计算属性。也就是把函数当作属性来使用,并且视情况来决定是否需要更新。
截取到字符串0到1位置的字符:slice(0,1)
,并且将其转大写:toUpperCase()
。
示例:
slice(1)
:从第二个字符切到最后一个字符
实现首字母大写功能:
我们再写一个输入框:
问题在于,我们在这第二个输入框进行操作时,函数handleUpper()
会一直执行,这是很消耗资源的(每次输入函数都会执行):
也就是只要页面刷新,无论跟它有没有关系,都会执行。
使用计算属性
在配置项computed里面写函数,这些函数会当属性使用。注意这些函数都需要有return值。
使用计算属性的时候无需加括号:
只有计算属性使用的变量发生变化时,计算属性才会发生变化。并且将计算属性当作属性用即可。可以使用for循环。
代码:
Title
input输入单词,首字母转成大写展示---函数方式---》只要页面刷新,无论跟它有没有关,都会重新运算
---->{{newText}}
--->{{age}}
计算属性重写过滤案例
示例;
示例:
计算属性中使用了mytext
,因为mytext
变化了,所以计算属性会刷新。并且因为是计算属性,所以可以使用v-for循环。
Title
过滤案例
请输入要搜索的内容:
- {{item}}
2 监听属性
# 在 data 中定义了一些变量,只要变量发生变化,我们就执行一个函数
watch:{
属性名(){
}
}
监听属性的用途:
点击按钮对商品排序。
有个属性叫sorting
,如果点击按钮这个属性就会变化:
这个属性变化,就向后端发送ajax请求获取数据。
示例:
监听course_type,重新显示页面。
发送请求:
设置监听属性:
不用传入course_type,因为全局的course_type已经被修改了。
监听属性不用return值。
Title
Python| Linux
假设有很多课程,点击上面的标签可以完成过滤
3 组件介绍和定义
# 扩展 HTML 元素,封装可重用的代码,目的是复用
-例如:有一个轮播,可以在很多页面中使用,一个轮播有js,css,html
-组件把js,css,html放到一起,有逻辑,有样式,有html
# 定义组件 ()
-全局组件:全局可以使用,可以用在任意其它组件中
-局部组件:局部组件只能在定义的位置(组件中)使用
Title
全局组件
局部组件