对象篇
模块化编程-自研模块加载器
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
}
}
})
效果：
computed：计算属性
对于任何复杂逻辑（开销大），都应当使用计算属性
计算属性缓存 vs 方法：
计算属性是基于响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值
也就是，当计算属性涉及的变量发生改变时，计算属性的操作才会被执行，否则返回的只是之前计算的结果
例子：
当使用methods时
计算属性computed
<button @click=“a++”>A++
<button @click=“b++”>B++
A - {{a}}
B - {{b}}
Age + A = {{addToA()}}
Age + B = {{addToB()}}
new Vue({
el:“#vue-app”,
data:{
age:18,
a:0,
b:0
},
methods:{
addToA:function(){
console.log(“addToA”);
return this.age+this.a;
},
addToB:function(){
console.log(“addToB”);
return this.age+this.b;
}
}
})
效果：不论点击“A++”还是“B++’，都会触发addToA和addToB函数，打印出"addToA"和"addToB"
如果将addToA和addToB函数移到computed里
Age + A = {{addToA}}
Age + B = {{addToB}}
computed:{
addToA:function(){
console.log(“addToA”);
return this.age+this.a;
},
addToB:function(){
console.log(“addToB”);
return this.age+this.b;
}
}
效果：点击A++，只触发addToA函数；点击B++，只触发addToB函数
属性绑定
v-bind：单向绑定
有时我们需要在标签属性里使用data中定义的变量，但变量包裹在引号之间，会被直接当作字符串，不能发挥出我们想要的效果，如：
/* 实例化Vue对象中的data参数 */
data:{
name:“ccy”,
job:“web开发”,
personalBlog:“https://blog.csdn.net/qq_43523725”
}
效果：引号中的代码均被当作字符串，不能真的实现点击跳转到指定链接的功能
这个时候，我们需要使用v-bind指令，将变量从引号中提取出来，匹配它真正的含义
{{ greeting() }}
Name:{{name}}
Job:{{job}}
个人博客主页
v-html：渲染成html代码
如果我们想在字符串中嵌套一个html标签，需要使用v-html指令，将字符串里的代码解析成html代码
例子：
/* 实例化Vue对象中的data参数 */
data:{
name:“ccy”,
job:“web开发”,
personalBlobTag:“个人博客首页”
}
{{ greeting() }}
Name:{{name}}
Job:{{job}}
效果：变量personalBlobTag被解析成html代码并渲染
v-model：双向绑定
通常一方输入，另一方显示，两者内容始终一致
例子： 将input标签的value值与name变量进行双向绑定：
name的初始值为“ccy”，因此input框默认值为“ccy”；当input输入了其他内容，name也发生改变。label标签负责实时显示name变量
双向绑定
效果：
事件
==
监听事件
基本使用：
-
使用v-on指令；
-
后面跟上事件名和处理函数名，处理函数可以不加括号，但传参时必须加括号
-
v-on指令可以省略成@：
加一岁
减十岁
<button @click=“reduce(1)”>减一岁
例子：
点击事件
不传参：当点击按钮时，触发add / reduce函数，让年龄加1 / 减1
event初识
加一岁
<button @click=“reduce”>减一岁
My age is {{age}}.
new Vue({
el:“#vue-app”,
data:{
age : 18
},
methods:{
add:function(){
this.age ++;
},
reduce:function(){
this.age–;
}
}
})
效果：点击“加一岁”，age就增加一岁；点击“减一岁”，age就减一岁
传参：
event初识
<button @click=“add(1)”>加一岁
<button @click=“add(10)”>加十岁
减一岁
My age is {{age}}.
new Vue({
el:“#vue-app”,
data:{
age : 18
},
methods:{
add:function(value){
this.age +=value;
},
reduce:function(){
this.age–;
}
}
})
效果：
鼠标事件
event初识
{{x}},{{y}}
new Vue({
el:“#vue-app”,
data:{
x:0,
y:0
},
methods:{
showXY:function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
})
效果：鼠标在div#show区域移动，显示鼠标相对这个div的XY坐标，初始值为(0,0)
事件修饰符
常用的有：
- 阻止冒泡：.stop
- 取消默认事件：.prevent
- 只有一次生效：.once
- 事件修饰符可以串联使用，如.stop.prevent，功能叠加
例子：
取消a标签的默认事件，即点击a标签后页面没有跳转：
<a @click.prevent href=“https://blog.csdn.net/qq_43523725”> 我的csdn博客主页
按键修饰符
常用的有：
- 匹配回车触发：.enter
- alt+回车触发：.alt.enter
- 匹配空格触发：.space
例子：
event初识
<input type=“text” @keyup.enter=“logName”>
<input type=“text” @keyup.enter=“logAge”>
/* methods部分代码 */
logName:function(){
console.log(“姓名已输入完成！”)
},
logAge:function(){
console.log(“年龄已输入完成！”)
}
效果：
输入第一个input框，键盘敲击回车键后，触发logName函数，控制台输出“姓名已输入完成！”，
输入第二个input框，键盘敲击回车键后，触发logAge函数，控制台输出“年龄已输入完成！”
动态绑定class和style
===============
绑定class
对象语法
使用v-bind指令绑定class，class的值为对象{class名：true / false}，true时该class对应的功能生效，false时该class不生效
例子：
动态绑定CSS样式
new Vue({
el:“#vue-app”,
data:{
changeColor:true
}
})
.show {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid #000;
}
.changeColor{
background-color: royalblue;
}
效果：
div.show原本的背景颜色是红色的（data中changeColor:false）
当changeColor生效时，背景颜色为蓝色（data中changeColor:true）
数组语法
也可以给class传一个数组，应用一个class列表，[class1，class2，…]，如：
data: {
changeColor: ‘changeColor’,
addRadiusClass: ‘change-radius’
}
/* change-radius是类名，需要加上引号 */
.changeColor{
background-color: royalblue;
}
.change-radius {
border-radius: 10px;
}
效果：show、 changeColor、 change-radius均生效
还可以在数组里嵌套使用对象语法
data:{
changeColor:true,
addRadiusClass:“change-radius”
}
/* changeColor使用的是对象语法，值为布尔值
addRadiusClass使用的是数组语法，值为类名 */
效果同上：
绑定内联样式style
用v-bind指令将style与设定好的样式绑定起来，如：
动态绑定style
// 样式为：背景蓝色，圆角10px
data:{
styleObject:{
backgroundColor:“blue”,
borderRadius:“10px”
}
}
效果：
条件渲染
====
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
e_16,color_FFFFFF,t_70#pic_center)
绑定内联样式style
用v-bind指令将style与设定好的样式绑定起来，如：
动态绑定style
// 样式为：背景蓝色，圆角10px
data:{
styleObject:{
backgroundColor:“blue”,
borderRadius:“10px”
}
}
效果：
条件渲染
====
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-auWQfbWG-1714838116493)]
扫一扫
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
