Vue的基本使用 | 青训营笔记

Summ
68 阅读9分钟

这是我参与「第四届青训营 」笔记创作活动的第6天

什么是 vue

官方概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

vue 的特性

vue 框架的特性，主要体现在如下两方面：

  • 数据驱动视图
  • 双向数据绑定

数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

1.jpg

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源

中。示意图如下：

2.jpg

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，

它把每个 HTML 页面都拆分成了这三个部分，如图所示：

3.jpg

  • Model 表示当前页面渲染时所依赖的数据源。
  • View 表示当前页面所渲染的 DOM 结构。
  • ViewModel 表示 vue 的实例，它是 MVVM 的核心。

MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

4.jpg

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

vue 的基本使用

基本使用步骤

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Vue 控制下面的 div ，帮我们把数据填充到 div 内部 -->
    <div id="app">{{ username }}</div>
    <!-- 导入 Vue 的库文件 -->
    <script src="./vue-2.6.12.js"></script>
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性固定写法，当前 vm 实例要控制页面的哪个区域，接收一个选择器
            el: '#app',
            // data 对象是要渲染到页面上的数据
            data: {
                username: 'zhangsan'
            }
        })
    </script>
</body>
</html>

vue 的调试工具

安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。

Chrome 浏览器在线安装 vue-devtools ：

chrome.google.com/webstore/de…

FireFox 浏览器在线安装 vue-devtools ：

addons.mozilla.org/zh-CN/firef…

配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的 三个点的自定义及控制按钮，更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选允许访问文件网址的选项。

使用 vue-devtools 调试 vue 页面

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools

调试当前的页面。

vue 的指令与过滤器

指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：

指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令

② 属性绑定指令

③ 事件绑定指令

④ 双向绑定指令

⑤ 条件渲染指令

⑥ 列表渲染指令

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

  • v-text
  • {{ }}
  • v-html

v-text

用法示例：

<!-- 把username对应的值，渲染到第一个p标签中 -->
<p v-text="username"></p>
<!-- 把gender 对应的值，渲染到第二个p标签中 -->
<!-- 注意:第二个p标签中，默认的文本“性别”会被gender 的值覆盖掉 -->
<p v-text="gender">性别</p>

注意：v-text 指令会覆盖元素内默认的值。

{{ }} 语法

vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）。

<!-- 使用 {{ }} 插值表达式，将对应的值渲染到元素的内容节点中，-->
<!-- 同时保留元素自身的默认值 -->
<p>姓名: {{ username }}</p>
<p>性别: {{ gender }}</p>

注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。

v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：

<!--假设data 中定义了名为 discription 的数据，数据的值为包含下面HTML标签的字符串: -->
<!-- '<h5 style="color: red;">学习vue.js课程。</h5>' -->
<p v-html="discription"></p>

属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

<!--假设有如下的 data数据:
data: {
    inputValue: '请输入内容'，
    imgSrc: 'https: //cn.vuejs.org/images/logo.png'
}
-->
<!--使用v-bind指令，为input 的 placeholder动态绑定属性值-->
<input type="text" v-bind:placeholder="inputValue" />
<br />
<!--使用v-bind 指令，为 img 的 src动态绑定属性值-->
<img v-bind:src="imgSrc" alt=""/>

由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。

<!--使用v-bind指令，为input 的 placeholder动态绑定属性值-->
<input type="text" :placeholder="inputValue" />
<br />
<!--使用v-bind 指令，为 img 的 src动态绑定属性值-->
<img :src="imgSrc" alt=""/>

使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：

{{ number + 1 }}
{{ ok ? 'YES’ : 'NO’ }}
{{ message.split('').reverse().join('') }}
​
<!-- 字符串 list- 外面需要加单引号 -->
<div :id="'list-' + id"></div>

事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

<h3>count 的值为: {{ count }}</h3>
<!--语法格式为 v-on:事件名称="事件处理函数的名称"-->
<button v-on:click="addCount">+1</button>

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

const vm = new Vue({
    // el 属性固定写法，当前 vm 实例要控制页面的哪个区域，接收一个选择器
    el: '#app',
    // data 对象是要渲染到页面上的数据
    data: {
        count: 0
    },
    // v-on绑定的事件处理函数,需要声明在 methods 节点中
    method: {
        add() {
        // this表示当前 new 出来的 vm 实例对象，
        // 通过 this 可以访问到 data 中的数据
        this.count += 1;
        }
​
    }
})

由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。

<button @click="addCount">+1</button>

事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令

（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event，示例代码如下：

<h3>count 的值为: {{ count }}</h3>
<button v-on:click="addCount">+1</button>
// ------------------分割线------------------
methods: {
    addCount(e) { // 接收事件参数对象 event，简写为e
        const nowBgColor = e.target.style.backgroundColor
        e.target.style.backgroundColor = nowBgColor === 'red' ? '' : 'red'
        this.count += 1
    }
}

绑定事件并传参

在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参，示例代码如下：

<h3>count的值为: {{count}}</h3>
<button @click="addNewCount(2)">+2</button>
// ----------分割线---------
methods: {
    //在形参处用step接收传递过来的参数值
    addNewCount(step) {
        this.count += step
    }
}

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题。示例用法如下：

<h3>count的值为: {{count}}</h3>
<button @click="addNewCount(2，$event)">+2</button>
// ----------------------分割线------------------
methods: {
    //在形参处用e接收传递过来的原生事件参数对象$event
    addNewCount(step，e) {
        const nowBgColor = e.target.style.backgroundColor
        e.target.style.backgroundColor = nowBgColor === 'cyan' ? '' : 'cyan'
        this.count t= step
    }
}

事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

事件修饰符说明
.prevent阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
.stop阻止事件冒泡
.capture以捕获模式触发当前的事件处理函数
.once绑定的事件只触发1次
.self只有在 event.target 是当前元素自身时触发事件处理函数

语法格式如下：

<!-- 触发 click 点击事件时，阻止 a 链接的默认跳转行为-->
<a href="https://www.baidu.com" @click.prevent="onLinkClick">百度首页</a>

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

<!-- 只有在'key'是'Enter'时调用 vm.submit()-->
<input @keyup.enter="submit">
<!-- 只有在‘key'是‘Esc'时调 vm.clearInput() -->
<input @keyup.esc="clearInput">

双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

<p>用户名是: {{ username }}</p>
<input type="text" v-model="username"/>
​
<p>选中的省份是: {{ province }}</p>
<select v-model="province">
    <option value="">请选择</option>
    <option value="1">北京</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
</select>

v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符作用示例
.number自动将用户的输入值转为数值类型<input v-model.number="age" />
.trim自动过滤用户输入的首尾空白字符<input v-model.trim="msg" />
.lazy在 “ change ” 时而非 “ input ” 时更新<input v-model.lazy="msg" />

示例用法如下：

<input type="text" v-model.number="n1"> +
<input type="text" v-model.number="n2"> =
<span>{{ n1 + n2 }}</span>

条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  • v-if
  • v-show

示例用法如下：

<p v-if="flag">这是被 v-if 控制的元素</p>
<p v-show="flag">这是被 v-show 控制的元素</p>
//------------- 分隔线 --------------
data: {
    // 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
    flag: false
}

v-if 和 v-show 的区别

实现原理不同：

  • v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
  • v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

性能消耗不同：

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

  • 如果需要非常频繁地切换，则使用 v-show 较好
  • 如果在运行时条件很少改变，则使用 v-if 较好（实际用的多）

v-else 和 v-else-if

注意：v-else 指令和 v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使

用 item in items 形式的特殊语法，其中：

  • items 是待循环的数组
  • item 是被循环的每一项

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <th>索引</th>
        <th>Id</th>
        <th>姓名</th>
      </thead>
      <tbody>
        <!-- 官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性 -->
        <!-- 而且，尽量把 id 作为 key 的值 -->
        <!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 -->
        <!-- key 的值是千万不能重复的，否则会终端报错：Duplicate keys detected -->
        <tr v-for="(item, index) in list">
          <td>{{ index }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
    
    data: {
        list: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 4, name: '张三' },
        ]
      }

注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种

默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲

染的性能。此时，需要为每项提供一个唯一的 key 属性：

 <tr v-for="(item, index) in list" :key="item.id">

key 的注意事项

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式

和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道符” 进行调用，示例代码如下：

<!-- 在双花括号中通过“管道符"调用 capitalize 过滤器，对 message 的值进行格式化 -->
<p>{{ message | capitalize }}</p>
​
<!-- 在 v-bind 中通过“管道符"调用 formatId 过滤器，对 rawId 的值进行格式化 -->
<div v-bind:id="rawId | formatId"></div>

定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

    const mv = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        filters: { // 在 filters 节点下定义 "过滤器"
            capitalize(str){ // 把首字母转为大写的过滤器
                return str.charAt(0).toUpperCase() + str.slice(1)
            }
        }
    })

私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

// 全局过滤器 – 独立于每个 vm 实例之外
// Vue.filter() 方法接收两个参数:
// 第1个参数，是全局过滤器的"名字"
// 第2个参数，是全局过滤器的"处理函数"
Vue.filter('capitalize', (str) =>{
    return str.charAt(O).toUpperCase() + str.slice(1) 
})

连续调用多个过滤器

过滤器可以串联地进行调用，例如：

<!-- 把 message 的值，交给 filterA 进行处理 -->
<!-- 把 filterA 处理的结果，再交给 filterB 进行处理 -->
<!-- 最终把 filterB 处理的结果，作为最终的值渲染到页面上 -->
{{ message | filterA | filterB }}

过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：

<!-- arg1 和 arg2是传递给 filterA 的参数 -->
<p>{{ message | filterA(arg1, arg2) }}</p>
​
// 过滤器处理函数的形参列表中:
// 第一个参数:永远都是"管道符“前面待处理的值
// 从第二个参数开始，才是调用过滤器时传递过来的 arg1 和 arg2 参数
Vue.filter('filterA' , (msg, arg1, arg2) =>{
    //过滤器的代码逻辑...
})

注意：

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能。

watch 侦听器

什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

const vm = new Vue({
    el: '#app',
    data: { username: '' }，
    watch: {
    // 监听 username 值的变化
    // newVal是"变化后的新值"，oldVal是"变化之前的旧值"
    username(newVal, oldVal) {
        console.log(newVal,oldVal)
    }
  }
})

使用 watch 检测用户名是否可用

jQuery 监听

<input type="text" v-model="username">
​
const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal) {
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用
          $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
            console.log(result)
          })
        }
      }
    })

axios 监听

axios 是一个专注于网络请求的库！

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

<script src="./lib/axios.js"></script>
​
watch: {
    // 监听 username 值的变化
    async username(newVal) {
    if (newVal === '') return
    // 使用 axios 发起请求，判断用户名是否可用
    const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
    console.log(res)
} }

immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使

用 immediate 选项。示例代码如下：

watch: {
    username: {
    // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
    handler: async function (newVal) {
    if (newVal === '') return
    const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
    console.log(res)
    },
    // 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
    immediate: true
    } 
}

deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选

项，代码示例如下：

const vm = new Vue({
    el: '#app ',
    data: {
        info: { username: 'admin' }
    },
    watch: {
        info: {
            handler(newVal) {
                console.log(newVal.username)
            }，
            deep: true
         }
    }
})

监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器。与 deep 作用一样

const vm = new Vue({
    el: '#app ',
    data: {
        info: { username: 'admin'}
    },
    watch: {
        'info.username': {
            handler(newVal) {
                console.log(newVal.username)
            }
         }
    }
})

axios 发送 GET 和POST请求

document.querySelector('#btnPost').addEventListener('click', async function () {
    // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
    // await 只能用在被 async “修饰”的方法中
    const { data } = await axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
            name: 'zs',
            age: 20
        }
    })
​
    console.log(data)
})
​
document.querySelector('#btnGet').addEventListener('click', async function () {
    // 解构赋值的时候，使用 : 进行重命名
    // 1. 调用 axios 之后，使用 async/await 进行简化
    // 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
    // 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
    const { data: res } = await axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks'
    })
​
    console.log(res.data)
})

或直接发送请求

document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */
​
      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
        params: { id: 1 }
      })
      console.log(res)
    })
​
    document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })

计算属性

什么是计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：

<div class="box" :style="{ backgroundColor: rgb }">
    {{ rgb }}
 </div>
<button @click="show">按钮</button>

var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性，都要定义到 computed 节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性，被定义成了方法格式，
        // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
});

计算属性的特点

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

vue-cli

单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

引用自 vue-cli 官网上的一句话：

程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。

中文官网：cli.vuejs.org/zh/

安装和使用 vue-cli

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目：

vue create 项目的名称(英文名)

vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

① App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

avatar
文章
阅读
粉丝