前端框架Vue
vue基础知识点
首先介绍用 HTML 写结构 + script 里写 Vue，不需要环境
1.差值表达式{{ }}
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Hello Vue</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 引入 Vue 2 -->
</head>
<body><div id="app">{{ message }}</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'}});</script>
</body>
</html>
| 代码 | 作用 |
|---|---|
<div id="app"> | 页面上定义一个区域，Vue 会控制这个区域 |
{{ message }} | 插值表达式，显示 data 中的变量 message 的值 |
new Vue({...}) | 创建一个 Vue 实例（最核心的部分） |
el: '#app' | 让 Vue 接管 id="app" 的 HTML 部分(#为id) |
data: { message: ... } | 定义数据，Vue 会自动和页面绑定 |
2.属性绑定 v-bind（简写为 :）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>v-biuld</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 引入 Vue 2 -->
</head>
<body><div id="app"><img :src="imageUrl" alt="示例图片"></div><script>new Vue({el: '#app',data: {imageUrl: 'https://vuejs.org/images/logo.png'}});</script>
</body>
</html>| 代码 | 作用 |
|---|---|
:src="imageUrl" | 动态绑定图片地址，等价于 v-bind:src |
imageUrl | 是你在 data 中定义的变量，比如图片地址 |
| 使用场景 | 动态图片、链接、class 等都可用 v-bind |
3. 事件处理 v-on:click（简写为 @click）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><button @click="count++">你点了 {{ count }} 次</button></div><script>new Vue({el: '#app',data: {count: 0}});</script></body>
</html>
| 代码 | 作用 |
|---|---|
@click="count++" | 当按钮被点击时，变量 count 自动加一 |
{{ count }} | 实时显示点击次数（插值表达式） |
4. 双向绑定 v-model
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><input v-model="name" placeholder="输入你的名字"><p>你好，{{ name }}</p></div><script>new Vue({el: '#app',data: {name: ''}});</script>
</body>
</html>
| 代码 | 作用 |
|---|---|
v-model="name" | 让输入框和 name 数据双向同步 |
{{ name }} | 实时显示你输入的内容 |
| 场景 | 表单、输入框、下拉框等都可以用 v-model |
5. 条件渲染 v-if
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><button @click="show = !show">切换显示</button><p v-if="show">你现在能看到这句话。</p><p v-else>你现在看不到原来的那句话了。</p></div><script>new Vue({el: '#app',data: {show: true}});</script></body>
</html>
| 代码 | 作用 |
|---|---|
v-if="show" | 当 show 是 true 时，显示这段文字 |
@click="show = !show" | 点击按钮会让 show 变成相反值，达到隐藏/显示的效果 |
6. 列表渲染 v-for
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><ul><li v-for="fruit in fruits">{{ fruit }}</li></ul></div><script>new Vue({el: '#app',data: {fruits: ['苹果', '香蕉', '橘子']}});</script></body>
</html>
| 代码 | 作用 |
|---|---|
v-for="fruit in fruits" | 遍历数组 fruits |
{{ fruit }} | 显示每一项的值 |
| 场景 | 渲染列表、表格、选项等 |
7. 计算属性 computed
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件处理</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><input v-model="firstName"> +<input v-model="lastName"><p>全名是：{{ fullName }}</p></div><script>new Vue({el: '#app',data: {firstName: '张',lastName: '三'},computed: {fullName() {return this.firstName + this.lastName;}}});</script></body>
</html>
| 代码 | 作用 |
|---|---|
v-model="firstName" | 输入名字 |
v-model="lastName" | 输入姓氏 |
computed.fullName | 自动计算并返回全名 |
| 优势 | 当依赖的数据变化时，自动重新计算，无需手动调用函数 |
值得注意的是computed里的函数实际上是一种简写，完整如下：
fullName: function() {return this.firstName + this.lastName;
}
这是因为JavaScript 从 ES6 开始，支持对象方法的简写写法，即对象作为方法名，返回的直接作为对象的内容
总结
| Vue 指令/语法 | 含义 | 示例 |
|---|---|---|
{{ data }} | 插值语法，显示数据值 | <p>{{ name }}</p> |
v-bind or : | 绑定 HTML 属性 | <img :src="imageUrl"> |
@click | 绑定点击事件 | <button @click="do()"> |
v-model | 双向数据绑定 | <input v-model="name"> |
v-if/v-else | 条件显示/隐藏 | <p v-if="isVisible"> |
v-for | 遍历数组，渲染列表 | v-for="item in items" |
Vue进阶
前置知识
- 模块化开发：大程序拆成多个小模块，每个模块完成特定功能，最终组合起来构建完整应用。在 Vue 中，每个 .vue 文件就是一个模块（组件模块）
- Vue CLI 与 Vite
这两者是 Vue 项目的两种构建工具：
| 特性 | Vue CLI | Vite |
|---|---|---|
| 技术年代 | 较早（Webpack） | 较新（基于原生 ES 模块） |
| 编译速度 | 慢（初始构建慢） | ⚡ 极快（冷启动秒开） |
| 配置复杂度 | 高 | 低，开箱即用 |
| 推荐使用 | Vue2 项目 | Vue3 项目官方推荐 |
my-project/
├── public/ # 静态资源
├── src/
│ ├── main.js # 入口文件
│ ├── App.vue # 根组件
│ └── components/
├── package.json # 项目信息 & 依赖
- Node.js 环境：一个 运行 JavaScript 的服务器端环境；让你在本地运行 npm 命令来安装和运行项目；不是 Vue 专属，是前端工具生态的底层。
创建vue
1.环境配置请见其他博客
2.在代码文件夹输入
vue create test2
选择vue版本
这时会出现如下文件夹和终端信息
输入下面代码，是运行整个文件用的
npm run serve
进入Local，出现这个页面就是成功了。
