丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解

在vue3中，template模版中的html代码，并不能直接在网页中执行，而是会在项目运行时，在浏览器中被编译为js 的函数去执行。

问题：在template模版中写html，体验很差，智能提示都不能用。

解决：使用vue的单文件组件。vue中的单文件组件，后缀是.vue

单文件组件使用方法

vue文件本身并不能被浏览器识别，必须要通过构建工具打包编译以后使用。

1 创建app.vue文件

2 在vscode中安装vue的开发插件Vue Language Features (Volar)

可以在我们写代码的过程中有高亮显示和智能提示

3 vite安装vue编译插件

yarn add -D @vitejs/plugin-vue

4 创建配置文件：vite.config.js

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
export default defineConfig({plugins: [vue()]
})

5 单文件结构示例代码：

<script>export default{data(){return {msg:'hello，vue'}}}
</script>
<template><h1>{{msg}}</h1>
</template>

编译：yarn dev 即可通过vue单文件组件实现页面效果。

丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解相关推荐

丁鹿学堂前端培训：console的进阶用法
相信很多前端的小伙伴们都对console.log很熟悉了. 开发过程中的调试少不了这个.但是console还有一些比较有趣的用法,可以帮助我们更好的debug,提高开发效率. 输出带颜色的consol ...
丁鹿学堂前端培训：ts+webpack打造自己的ts脚手架（二）
webpack还有一些必要的配置,可以帮助我们更方便的开发typescript 1. 安装插件 npm i -D html-webpack-plugin html-webpack-plugin 在we ...
前端培训，丁鹿学堂和达内浅析
真是很巧,这两家一个是主打线下的,一个是线上的,也算是两种模式的典型代表了. 达内我是了解的.如果你是北京的,可以去现场听,但是如果不是,就只能听看老师直播了,再配上助教老师,就构成了线下.这个模式好 ...
学前端报面授，还是慕课网或者丁鹿学堂？
首先我是不建议报线下班的,线下班学员水平参次不齐,有你这种自学了一段时间插进去的,有零基础小白的,我知道的还有26个字母都不熟的,这就有一个问题,老师想要兼顾那么多人导致进度拖沓,自己不懂的也很难及时 ...
丁鹿学堂：js字符串转数组常用方法总结
我们在前端实际开发过程中,用的最多的是数组.而且js也为数组提供了大量的api,方便我们处理数据. 在实际开发过程中,我们经常需要做的一点就是把字符串转为数组,利用数组的数据结构和api,可以很方便的 ...
前端进阶（三） webpack处理vue以及vue-cli脚手架环境
webpack处理vue 安装 vue yarn add vue vue单文件组件 single-file components(单文件组件) ,文件扩展名为 .vue 的文件,需要安装vetur插件 ...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
Vue3.2单文件组件setup的语法糖总结
目录前言 setup语法糖一.基本用法二.data和methods 三.计算属性computed 四.监听器watch.watchEffect 五.自定义指令directive 六.import ...
丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）
vue3中数据和视图自动绑定 vue3中data中的数据,会自动和使用它的视图绑定,数据发生变化时视图会自动更细,无需我们手动操作dom 案例:创建一个按钮,记录点击次数. <!DOCTYPE ...

丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解

单文件组件使用方法

丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解相关推荐

最新文章

热门文章