花样操作前端之我爱vscode
MVC模型(后端思想)
MVVM模型(前端思想)
一 入门案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 Vue -->
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<!-- Vue 代码 -->
<script>
// key 是固定 。
let app = new Vue({
el:'#app', // 挂载（管理） id=app 的页面元素
data:{
msg:'今天第一天相见，大家后续一定会非常精彩!!!'
}
})
</script>
</body>
</html>
以后的操作基于这篇案例
1.<div>：视图层的容器
2.<script>标签在 Vue 中主要用于编写 JavaScript 逻辑代码
3.src 通常指的是 标签的图片资源路径 ,在调js的url中也使用了
<img :src="imageUrl" />冒号是使用了语法糖,省略了v-bind
二 文本插值
解决插值表达式的网络延迟问题（闪烁）
v-cloak：斗篷 -> 功能：当前数据没有值时，隐藏该插值表达式。当有数据时，自动取消隐藏。
<style>
/* 当插值表达式没有值时自动隐藏，有值自动显示 */
[v-cloak]{
display: none;
}
</style>
写在head头中,别写错地方
2.文本插值有三种方式
| 是否会覆盖原内容 | 是否解析标签 | 是否存在网络延迟 | 是否支持表达式 | |
|---|---|---|---|---|
| 插值表达式（单独） | 不会 | 不会 | 会 | 支持 |
| v-text（属性） | 会 | 不会 | 不会 | 支持 |
| v-html（属性） | 会 | 会 | 不会 | 支持 |
3.
而在浏览器反馈是这样的:
这说明,下面两个标签会覆盖原始值
4.
浏览器反馈是这样的:
这说明上面两个不会解析标签
5.
这表示都支持表达式
敲代码时发现的错误
js文件必须和html在一个层级上,否则就得在原来的js的url加上../,表示在上一个层级寻找
三 属性插值
1.语法糖
属性绑定：v-bind
由于属性绑定使用的场景非常多。所以开发者为其赋予了语法糖。
简写：冒号 :
2.
href 是 Hypertext Reference（超文本引用）的缩写，它是 <a>（锚点/链接）标签和 <link> 标签中最核心的属性。
3.:title=""表示鼠标悬停在标签里的语句上会显示title存入的字段
四 Class与Style的绑定
1.span标签
无语义的行内容器：<span> 不会改变其内容的布局结构，它只是简单地“包裹”住内容。
五 条件渲染
v-if:若值为 true，则创建该标签， false 则销毁该标签。(懒汉式)
v-show:若值为 true，则显示该标签， false 则隐藏该标签。(饿汉式)
如何使用：
若频繁切换，则使用 v-show。开销更小。
若非频繁切换，则使用 v-if。切换开销更大。
六 循环渲染
1.ul 是 HTML 中用于创建无序列表（Unordered List）的标签。ul 标签必须与 li（List Item，列表项）标签配合使用。
1).数组循环
<ul>
<li v-for="(book,index) in books">{{index + 1}} -> {{ book }}</li>
</ul>
创建books集合,{{}}插值表达式部分,有什么展示什么
2).对象循环
<ul>
<li v-for="(value,key,index) in author">{{index + 1}} -> {{key}} -> {{value}}</li>
</ul>
当你使用 v-for 遍历一个对象时，括号里最多可以接收 3 个参数。
value：对象属性的值（例如 '张三' 或 28）。
key：对象属性的键名（例如 'name' 或 'age'）。
index：当前遍历的序号（从 0 开始）。
3)对象数组
th 和 td 是 HTML <table> 表格中最核心的两个单元格标签。在 Vue 中，它们通常与 v-for 指令结合，用来动态渲染表格的列。
- 核心区别
th (Table Header)：表头单元格,用来定义表格的列名。浏览器默认会将其加粗并居中显示。
td (Table Data)：数据单元格,用来展示具体的数据内容。浏览器默认是普通字体、左对齐。
七.事件处理
1.事件处理:v-on:
用的多 -> 语法糖 -> @
事件类型(名称):具体哪种类型的事件来触发. -> click,change,blur
事件源:谁触发(绑定)的谁就是事件源.
事件(服务)函数:触发后需要做的事情.
若需要获取事件源：首先方法传递 $event -> 在方法体内使用形参接收，接收后使用 e.currentTarget 来获取。
八 双向数据绑定
1.双向数据绑定 v-model。
所谓双向必须然存在双方： 用户 《==》 程序
想使用双向数据绑定，必然需要用户能够输入数据。所以双向数据绑定一般使用在表单系列中
2. 姓名：<input type="text" v-model="username"/><br/>
type可以选择:
基础文本与隐藏
text：单行文本框（默认值）。
password：密码框（输入内容被隐藏）。
search：搜索框（自带清除按钮）。
hidden：隐藏域（不显示，但提交表单时会携带数据）。
数字与范围
number：数字框（限制只能输入数字，带上下箭头）。
range：滑块（用于拖动选择数值范围）。
格式与联系方式
email：邮箱框（自动校验 @ 格式）。
tel：电话框（移动端唤起拨号键盘）。
url：网址框（自动校验网址格式）。
日期与时间
date：日期选择器（年-月-日）。
time：时间选择器（时:分:秒）。
datetime-local：日期+时间选择器。
month：年月选择器。
week：年周选择器。
选择与颜色
checkbox：复选框（可多选）。
radio：单选按钮（同组内只能选一个）。
color：颜色选择器（弹出调色板）。
文件上传
file：文件选择框（用于上传文件）。
按钮类
submit：提交按钮（触发表单提交）。
reset：重置按钮（清空表单数据）。
button：普通按钮（无默认行为，通常配合 JS 使用）。
3.<input> 是 HTML 中最基础、最常用的表单元素，用于接收用户的输入数据。它的核心行为完全由 type 属性决定。
<input type="类型" name="字段名" value="默认值" placeholder="提示文字" />
它是一个单标签（自闭合标签），不需要写 。
2. 在 Vue 中的黄金搭档：v-model
在 Vue 中，<input> 几乎总是和 v-model 配合使用，实现数据的双向绑定（即：JS 数据改变，输入框内容跟着变；用户在输入框里打字，JS 数据也跟着变）。
4.<select> 是 HTML 中用于创建下拉菜单（或滚动列表）的标签。在 Vue 中，它同样配合 v-model 实现双向数据绑定。
九 计算属性
1.计算属性是一种属性。他也可以直接使用 this 访问。
特点：
他会使用缓存技术，若得使用的属性值不改变，则不需要调用，直接将缓存中的结果返回。
2. 动手测试：验证“缓存”
在模板中多次使用这个计算属性：
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>
打开浏览器的控制台（F12），你会发现：计算属性执行了 只打印了 1 次！
💡 为什么会这样？
这就引出了 computed 和 methods 最本质的区别：
如果是 methods：你在模板里调用 3 次 add()，控制台就会打印 3 次，因为方法每次调用都会重新执行。
如果是 computed：Vue 内部有一个“缓存”机制。第一次访问 fullName 时，Vue 会执行函数，把结果缓存起来，并打印日志。后面的 2 次访问，Vue 发现它依赖的数据（firstName 和 lastName）没有发生变化，就直接把缓存的结果拿给你，根本不会重新执行函数，所以日志不会再打印。
🔄 什么时候才会重新打印？
如果你在控制台手动修改了依赖的数据，此时，Vue 的响应式系统会检测到 firstName 变了，缓存失效。当你再次访问 fullName 时，函数才会重新执行，控制台会再次打印 计算属性执行了。
十 全局组件
<div id="app">
<my-btn></my-btn>
</div>
<div id="app2">
<my-btn></my-btn>
</div>
<my-btn></my-btn>是自定义组件,类似于接口,需要在下面写好,后续才能调用
2.全局组件
参数1：组件的名称（唯一标识）。
参数2：组件功能
组件可以看作一个 Vue 对象。
不同点：
我们曾经的 Vue 对象使用 el 来挂载页面元素。
组件中是通过 template 来书写页面元素。
data的书写方式不同。
其他都一样
// 全局组件是挂载到 Vue 原型上的
十一 局部组件
let app = new Vue({
el:'#app',
data:{
msg:'哈哈',
},
components:{
'my-btn':{
template:`<button @click="show">我是局部组件</button>`,
data(){
return {
msg:'嘿嘿'
}
},
methods:{
show(){
alert(this.msg);
}
}
},
}
})
let app2 = new Vue({
el:'#app2'
})
打出 嘿嘿 是因为,下面调用的是就近的,但是 哈哈 还在
由于局部组件是存在单个app中,所以只有一个按钮
十二 生命周期函数
let app = new Vue({
el:'#app',
data:{
msg:'嘻嘻'
},
beforeCreate: function() {
console.log('beforeCreated');
console.log(this);
},
created() {
console.log('created');
console.log(this);
},
Vue 的生命周期钩子（Lifecycle Hooks）
是组件从“诞生”到“销毁”过程中，在特定时间点自动触发的函数。它们的核心作用是让开发者能在关键阶段插入自定义代码。
整体流程可简述为以下 4 个核心阶段：
创建阶段（初始化）
beforeCreate：实例刚被创建，数据（data）和方法（methods）尚未初始化。
created：数据和方法已准备就绪，但还未渲染到 DOM 上。
挂载阶段（渲染到页面）
beforeMount：模板已编译，但尚未生成真实的 DOM 节点。
mounted：DOM 节点已生成并挂载到页面上。这是最常用的钩子，适合进行 DOM 操作和发起初始数据请求（Ajax）。
更新阶段（数据变化）
beforeUpdate：数据发生变化，DOM 重新渲染之前触发。
updated：DOM 已根据新数据重新渲染完成。
销毁阶段（移除组件）
beforeDestroy：组件即将被销毁，此时实例仍可用。适合做“善后工作”，如清除定时器、解绑事件监听，防止内存泄漏。
destroyed：组件已被彻底销毁，所有事件监听器被移除。
💡 核心记忆口诀：
要发请求/操作 DOM，找 mounted。
要清理定时器/解绑事件，找 beforeDestroy。
数据变了要做事，找 updated（但慎用，避免死循环）。
十三 变量作用域问题
1
块级作用域的“缺失”（变量泄漏）
if(true){
var a = 10;
}
console.log('块级作用域外的变量a:', a); // 输出：10
在 ES6 之前，JavaScript 只有全局作用域和函数作用域。if 语句的花括号 {} 并不能创建一个新的作用域。因此，用 var 声明的变量 a 会直接“泄漏”到全局作用域中，在 if 外面依然可以正常访问。
2.变量的修改与覆盖
javascript
a = 30;
if(true){
a = 40;
}
console.log(a); // 输出：40
原理解析：因为 a 已经是全局变量了，所以你在外面把它改成了 30。接着进入 if 块中，a = 40 并没有重新声明变量，而是直接修改了那个已经泄漏到全局的 a。所以最后打印出来的是 40。
3. 函数作用域的“隔离”（数据保护）
javascript
function fun(){
c = 18; // ⚠️ 注意：这里没有用 var 声明！
return c;
}
console.log(fun()); // 输出：18
原理解析：函数内部是一个独立的“房间”（函数作用域）。你在 fun() 里面给 c 赋值为 18 并返回，所以打印结果是 18。
浙公网安备 33010602011771号