【Vue】计算属性 监听属性 组件通信 动态组件 插槽 vue-cli脚手架
昨日回顾
# 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
全局组件
局部组件
`,
data() {
return {
title: '标题'
}
},
methods: {
handleClick() {
alert('前进')
}
},
}
Vue.component('child', obj)
//2 局部组件
var lqz = {
template: `
我是lqz组件
{{ name }}
`,
data() {
return {
name: 'lqz'
}
},
components: {
'child3': {
template: `
我是lqz组件内的组件
`,
}
}
}
var vm = new Vue({
el: '#app',
data: {},
components: {
lqz
}
})
组件之间数据隔离
# 根组件 和 组件 注意事项
-new Vew()---->管理div----》根组件
-自己再定义的全局组件，局部组件都是不同组件，不是根组价
-组件有自己的html，css，js ---》数据，事件，。。。。。
-在组件中，this代指当前组件
-父子组件的data是无法共享的
-data是1个函数，需要有返回值(return)
组件之中父子之间的data是无法共享的：
这个name是子组件的数据。故此数据无法通过插值语法显示。
局部组件的情况：
局部组件有name这个属性，但是根组件无法之间使用。
总结：
- 父子组件的
data是相互隔离的。 - 就算父子的
data中数据相同，拥有相同的方法，也是互不影响的.
4 组件通信
父子通信之父传子
# 组件间数据不共享 ----> 需要进行数据传递
# 父传子：使用自定义属性方式
父传子：使用自定义属性的方式传递数据
在child标签内，写一个自定义属性myage。(注意上图不能属性使用驼峰体，否则会报错)
子组件怎么接受父组件的数据？
使用props配置项。
在子组件的配置项props写一个列表，列表里面放着自定义属性的名字myage。这样在子组件的template就可以通过插值语法来获取myage里携带的数据。
自定义属性不能使用驼峰体：
自定义属性的区别：
示例：
-
:age="19"给子组件传递了一个数字19 -
age="19"给子组件传递了一个字符串19
属性验证：
子组件使用props接受的时候可以进行属性验证：
如果传入的数据类型不是我们指定的数据类型，前端页面还是会将其渲染，但是控制台会报错：
遇到变量名相同的情况，子组件优先用哪个数据？
会使用父组件传来的数据，但是控制台会报错。所以传自定义属性的时候，不要跟子组件中变量冲突。
代码：
Title
父子通信之父传子，通过自定义属性--->不能用驼峰,不要跟子组件中变量冲突
属性验证---》传入的必须是xx类型