Vue指令-Ajax-Axios-前端工程化-ElementUI-路由重点总结

# Vue 指令 · Ajax · Axios · 前端工程化 · Element UI · 路由 · 重点总结 ## 一、Vue 指令 | 模块 | 核心内容 | 说明 | 常用写法 | | ----------- | --------- | ------------------------------ | ---------------------------- | | MVVM | Model | 数据模型，通常是后端返回的数据 | `data:{}` | | MVVM | View | 页面视图，负责展示数据 | HTML + CSS | | MVVM | ViewModel | 连接数据和视图的桥梁 | Vue 实例 | | Vue实例属性 | el | 指定 Vue 接管的区域 | `el:"#app"` | | Vue实例属性 | data | 定义数据模型 | `data:{message:"Hello Vue"}` | | Vue实例属性 | methods | 定义函数/事件方法 | `methods:{}` | **核心理解：** Vue 的主要作用是减少手写 DOM 操作，让数据和页面自动联动。 ### 1.1 指令总览 | 指令 | 作用 | 简写 | |------|------|------| | `v-bind:属性` | 为 HTML 标签**绑定属性值**（单向：data → view） | `:属性` | | `v-model` | 在**表单元素**上创建**双向数据绑定**（data ↔ view） | — | | `v-on:事件` | 为 HTML 标签**绑定事件**，函数须在 `methods` 中定义，事件名不带 `on` | `@事件` | | `v-if` | **条件渲染**，true 时渲染，false 时 **DOM 元素不存在** | — | | `v-else-if` | 配合 v-if 多条件判断 | — | | `v-else` | v-if/v-else-if 都不满足时渲染 | — | | `v-show` | **条件显示**，false 时 DOM 存在但 `display:none` | — | | `v-for` | **列表渲染**，遍历数组或对象 | — | | 步骤 | 内容 | 示例 | | ---- | ------------------------- | ----------------------------------- | | 1 | 引入 `vue.js` | `` | | 2 | 准备 Vue 接管区域 | `
` | | 3 | 创建 Vue 对象 | `new Vue({...})` | | 4 | 在页面中使用插值表达式 | `{{message}}` | | 5 | 使用 `v-model` 绑定输入框 | `` | **重要代码：** 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
    <!-- 1: 引入 vue.js 文件
    2: 准备一个 div 标签,与 vue对象实现双向绑定
    3: 在js中创建 vue对象,定义属性,与div绑定 -->

    <div id="d1">
        请在输入框中输入内容:<input type="text" v-model="msg">
        <br>
        您输入的内容是:<span style="color: red;font-size:20px">{{msg}}</span>
    </div>

    <script>
        new Vue({
            el:"#d1",
            data:{
                msg:'撒撒水啦'
            }
        });
    </script>
</body>
### 1.2 v-bind vs v-model（⭐ 常考） | 对比项 | `v-bind`（单向绑定） | `v-model`（双向绑定） | |--------|---------------------|----------------------| | 数据流向 | data → view（单向） | data ↔ view（双向） | | 使用场景 | href、src、class 等普通属性 | **表单元素**（input、select、textarea） | | 写法 | `v-bind:href="url"` 或 `:href="url"` | `v-model="变量名"` | | 核心用途 | 动态绑定标签属性 | **获取表单输入值后提交给服务器** | **双向绑定的作用：可以获取表单的数据的值，然后提交给服务器** 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
    <!-- 1: 引入 vue.js 文件
    2: 准备一个 div 标签,与 vue对象实现双向绑定
    3: 在js中创建 vue对象,定义属性,与div绑定 -->
    <div id="d1">
        请在输入框中输入超链接的地址:<input type="text" v-model="addr">
        <br>
        <a v-bind:href="addr">点击试试</a>
        <a :href="addr">简写格式-点击试试</a>
        <br>
        请在输入框中输入图片名称:<input type="text" v-model="img">
        <br>
        <img :src="img" >
    </div>

    <script>
        new Vue({
            el:"#d1",
            data:{
                addr:'http://www.jd.com',
                img:'../04_img/1.jpg'
            }
        });
    </script>
</body><input v-model="url">
<a :href="url">点击试试</a>
<img :src="img">
### 1.3 v-on 事件绑定 > 函数必须定义在 Vue 对象的 `methods` 中；方法内部通过 **`this.属性名`** 访问 data 中的数据。 | 写法 | 说明 | 示例 | | ------------ | ------------ | --------------------------- | | `v-on:click` | 点击事件绑定 | `