参考一位博主的几篇文章，自己记录下自己不太熟悉的知识点，大佬传送门：JHXL_的博客_几何心凉_CSDN博客-Vue,javaScript,PHP领域博主
目录
null和undfined的区别
null表示"没有对象"，即该处不应该有值。类型：object
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。注意一点：Number(undefined)输出为NaN
keep-alive组件缓存
可以挂载两个钩子
- activated - 激活
- deactivated - 失去激活状态
虚拟dom以及Diff算法
vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上
内存中生成一样的虚拟DOM结构(本质是个JS对象)
因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了
比如template标签
<template>
<div id="box">
<p class="my_p">123</p>
</div>
</template>
对应的虚拟dom结构
vue数据更新
- 生成新的虚拟DOM结构
- 和旧的虚拟DOM结构对比
- 利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
v-for什么时候会更新页面呢?
数组采用更新方法, 才导致v-for更新页面
vue是如何提高更新性能的?采用虚拟DOM+diff算法提高更新性能
虚拟DOM是什么?本质是保存dom关键信息的JS对象
diff算法如何比较新旧虚拟DOM?根元素改变 – 删除当前DOM树重新建
根元素未变, 属性改变 – 更新属性
根元素未变, 子元素/内容改变
无key – 就地更新 / 有key – 按key比较
watch使用
<template>
<div>
<input type="text" v-model="name">
</div>
</template>
<script>
export default {
data(){
return {
name: ""
}
},
// 目标: 侦听到name值的改变
/*
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
}
}
*/
watch: {
// newVal: 当前最新值
// oldVal: 上一刻值
name(newVal, oldVal){
console.log(newVal, oldVal);
}
}
}
</script>
<style>
</style>
立即监听与深度监听
<template>
<div>
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data(){
return {
user: {
name: "",
age: 0
}
}
},
// 目标: 侦听对象
/*
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
},
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
*/
watch: {
user: {
handler(newVal, oldVal){
// user里的对象
console.log(newVal, oldVal);
},
deep: true,
immediate: true
}
}
}
</script>
<style>
</style>
案例-品牌管理(数据缓存)
效果：新增/删除 – 刷新页面 – 数据还在
对象存储是需要进行json处理的
<script>
import moment from "moment";
export default {
data() {
return {
name: "", // 名称
price: 0, // 价格
// 3. 本地取出缓存list
list: JSON.parse(localStorage.getItem('pList')) || [],
};
},
// ...其他代码省略
watch: {
list: {
handler(){
// 2. 存入本地
localStorage.setItem('pList', JSON.stringify(this.list))
},
deep: true
}
}
};
</script>
键盘监听
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter回车按键了");
},
escFn(){
console.log("esc按键了");
}
}
}
</script>
字符串逆序
message='hello,world'
this.message = this.message.split("").reverse().join("")v-model修饰符
- v-model.修饰符=“vue数据变量”
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时
mvvm和mvc区别是什么?
MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联
MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定
Vue常用修饰符有哪些?
.prevent: 提交事件不再重载页面；
.once: 只执行一次这个事件
.stop: 阻止单击事件冒泡；
<div @click="one">
<div @click="two">
</div>
</div>
如果想出发two这个函数，直接如上这么写，也会触发one这个函数，所以改成
@click.stop=“two”就只会触发two函数
.native监听组件根元素
都知道组件没法直接监听原生事件（比如点击事件，触摸事件等等），如下back-top是封装的一个回到顶部的小组件，需求是点击这个组件然后页面回到顶部
<back-top @click="backClick" v-show="isShowBackTop"/>
只需要改成这样，添加native修饰符，组件即可监听点击事件
<back-top @click.native="backClick" v-show="isShowBackTop"/>
导航栏
menus: [
{
name: "图片管理",
route_url: "/admin/platformIndex/imgManage",
list: [
{
name: "轮播图",
route_url: "/admin/platformIndex/imgManage/carouselImg",
},
{
name: "竖型图片",
route_url: "/admin/platformIndex/imgManage/showImg",
},
{
name: "佛像贴金",
route_url: "/admin/platformIndex/imgManage/buddhaGold",
},
{
name: "景观石刻字",
route_url: "/admin/platformIndex/imgManage/landscapeStone",
},
{
name: "刻字描金漆",
route_url: "/admin/platformIndex/imgManage/storeGoldPaint",
},
{
name: "刻字贴金箔",
route_url: "/admin/platformIndex/imgManage/storeGoldCover",
},
{
name: "室内贴金",
route_url: "/admin/platformIndex/imgManage/indoorGold",
},
],
},
{
name: "聊天室",
route_url: "/admin/platformIndex/chatRoom",
},
{
name: "留言管理",
route_url: "/admin/platformIndex/commentManage",
},
{
name: "管理文章",
route_url: "/admin/platformIndex/articleManage",
list: [
{
name: "所有文章",
route_url: "/admin/platformIndex/articleManage/articleList",
},
{
name: "发表文章",
route_url: "/admin/platformIndex/articleManage/createArticle",
},
],
},
], <el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="height: 100%"
router
>
<template v-for="item in menus">
<el-menu-item
:key="item.id"
:index="item.route_url"
v-if="!item.list"
>
<span> {{ item.name }}</span>
</el-menu-item>
</template>
<template v-for="item in menus">
<el-submenu :key="item.id" :index="item.route_url" v-if="item.list">
<template >
<span>{{ item.name }}</span>
</template>
<el-menu-item-group>
<el-menu-item
v-for="(item, index) in item.list"
:key="index"
:index="item.route_url"
>{{ item.name }}</el-menu-item
>
</el-menu-item-group>
</el-submenu>
</template>
</el-menu>箭头函数
视频从12第12分钟开始讲解this 最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili
结果是100
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say();//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域
结果是20
var age = 100;
var obj = {
age: 20,
say() {
alert(this.age)
}
}
obj.say();
箭头函数里面this是引用最近作用域的中的this
如何查找this?向外层作用域，一层一层查找
第二个是window，因为这个函数调用是用了call(),没有传入指定对象，所以this默认指向全局对象
const obj = {
aaa() {
setTimeout(() => {
console.log(this);
}, 1000)
setTimeout(function () {
console.log(this);
}, 1000)
}
}
obj.aaa()
call是干啥的？是用来指向this的
var a = 10;
function fn() {
console.log(this.a);
console.log(this);
}
var obj = { a: 20 }
fn();//10,
fn.call(obj);//20,obj
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
