2022.5.23 Vue介绍
- 文档
把官方文档当作小说看 官方文档
- 定位
渐进式 JavaScript 框架
- 特点
数据驱动视图
- Javascript 通过DOM操作,实现网页交互 API名称太长了
- JQuery 通过DOM操作,实现网页交互 缩短API名称
- Vue 开发者不需要进行DOM操作了，只需要操作数据包，Vue会自动更新DOM
-
学习流程
用 懂 改 造
-
思想转变
从找DOM，切换为，如何定义要给合理的数据包格式来控制
Vue基本使用
- 下载
- 引入初始化
- 根节点
- 数据渲染、交互实现
Vue常用指令
菜单切换
菜单切换
事件详解
-
掌握5中写法
-
事件修饰符 参考文档
列表渲染
渲染一组数据 注意v-for嵌套
v-for="(item,index) in 数据包"
item 是遍历数据包中的每一条数据，格式不确定（对象、数组、字符串）
index 遍历时的序号
computed 计算属性
计算 宏观计算（对于数据的所有操作都可以称为一种计算） 属性 会返回新的运算结果给我们直接渲染 使用computed的优势
- 降低代码冗余度
- 逻辑代码的拓展性较强
- 提高渲染性能
- 能够根据data的变化，自动触发重新运算
-
字符串翻转操作 Hello ---> olleH
-
按成绩筛选学员的功能
当某个数据包需要处理（翻转、过滤）后再渲染，请想起computed
记忆宫殿 --- 将抽象的东西转为形象的图形，存放到脑袋里面
数据双向绑定
-
单向绑定
-
双向绑定
-
按键修饰符 参考文档
-
拓展练习
- Enter发送
- Ctrl+Enter发送
任务
-
熟练掌握课堂案例
-
拓展案例
- 发送消息
- 综合拓展案例【用户信息录入】
- 录入功能 v-model v-on:click
- 渲染用户 v-for v-if
- 删除用户 Array.splice(index,1)
- 删除所有
- 学员筛选功能 computed
2022.5.24
一、知识回顾
熟练度错觉
- HTML区域语法
- {{}} 数据渲染
- v-html 渲染富文本
- v-if v-elseif v-else v-show
- v-bind:class 简写 :class
- v-on:click 简写 @click
- v-for="(item,index) in 数据" 嵌套循环注意事项
- v-model 数据双向绑定
- JS区域语法
new Vue({
el:'#app', //地盘
data:{}, //经济
computed:{}, //对data进行处理
methods:{}, //职能部门
})
二、watch监听
监听data的 变化，作出事件响应 使用场景
-
监听音乐播放时间变化，同步改变进度条
-
监听数据变化，进行本地缓存
-
浅监听
stu(){ //监听stu的变化 【浅监听】
console.log('监听到了stu的变化');
localStorage.setItem('stu',JSON.stringify(this.stu))
}
- 深监听
stu:{ //深监听
handler(){ //处理函数
console.log('深监听');
localStorage.setItem('stu',JSON.stringify(this.stu))
},
deep:true //开启深监听
}
三、生命周期钩子函数
在Vue实例创建过程中，会自动触发执行的一些特殊的函数
- 生命周期的四个阶段 生命周期函数图
- 创建阶段
- 渲染阶段
- 更新阶段
- 销毁阶段
-
created的使用场景
-
使用axios发起异步请求
基于Promise对象封装而成的，专门用于发起http异步请求的方法库 文档
-
回调函数的方式 【可能会导致回调地狱】
-
$.ajax({ url:'', success:(res)=>{
} })
-
-
promise写法
-
axios({ url:'' }).then(res=>{
})
-
- 使用axios请求在线接口
axios({
url,
method:'get',
headers:{ //验证信息，是可选的，后端来决定
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1610071819201726023958529"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log(res);
})
消息发送的解决方案
- 使用两个input 【不容易想到】
对于理论的熟练度
四、学员信息录入系统
- 渲染用户 v-for v-if 【完成】
- 录入功能 v-model v-on:click 【完成】
- 删除用户 Array.splice(index,1)
- 删除所有
- 学员筛选功能 computed
五、尝试新功能
- 将录入的学员存入本地存储 watch监听
- 初始化的时候，提取本地存储的内容，做渲染 created
六、任务
-
理论内容
-
课堂案例
-
拓展功能
