首页 > 其他分享 >Vue3 第三章

Vue3 第三章

时间:2023-11-28 13:57:54浏览次数:32  
标签:文件 顶层 vue 第三章 ts 编译 Vue3 组件

  Vite目录

    public 下面的不会被编译 可以存放静态资源

 

       assets 下面可以存放可编译的静态资源

 

       components 下面用来存放我们的组件

 

       App.vue 是全局组件

 

       main ts 全局的ts文件

       index.html 非常重要的入口文件

       vite config ts 这是vite的配置文件

     SFC 语法规范

    vue 件都由三种类型的顶层语法块所组成:<template><script><style>

      <template>

          每个 *.vue 文件最多可同时包含一个顶层 <template> 块。

          其中的内容会被提取出来并传递给 @vue/compiler-dom,预编译为 JavaScript 的渲染函数,并附属到导出的组件上作为其 render 选项。

       <script>

          每一个 *.vue 文件可以有多个 <script> 块 (不包括<script setup>)。

          该脚本将作为 ES Module 来执行。

          其默认导出的内容应该是 Vue 组件选项对象,它要么是一个普通的对象,要么是 defineComponent 的返回值。

       <script setup>

          每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)

          该脚本会被预处理并作为组件的 setup() 函数使用,也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。

       <style>

          一个 *.vue 文件可以包含多个 <style> 标签。

          <style> 标签可以通过 scoped 或 module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混

 

 

标签:文件,顶层,vue,第三章,ts,编译,Vue3,组件
From: https://www.cnblogs.com/liziqian001/p/17861785.html

相关文章

  • Vue3 + [email protected] + UploadPictureCard
    <template><a-uploadname="file"v-model:file-list="showFileList"list-type="picture-card":multiple="multiple":max-count="maxCount":before-up......
  • 【源码系列#02】Vue3响应式原理(Effect)
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • Vue3中 使用v-for嵌套 获取其他数组中的值作为key值 渲染数据
    <tbody><trv-for="(row,idx)inrows":key="idx"><tdv-for="(item,key)intitle":key="key">{{row[key]}}</td></tr>......
  • 第三章 Linux用户管理
    在Linux操作系统中,用户管理是系统管理员不可或缺的一项任务。有效的用户管理不仅仅涉及到创建和删除用户账户,还包括权限控制、群组管理以及其他与用户相关的各种任务。在这篇博文中,我们将深入探讨Linux用户管理的各个方面,为管理员提供全面的指导。1.用户账户的创建与删除1.1创......
  • vue3 jsPlumb学习
    <template><divclass="box"><div@click="clearLine">clear</div><div@click="initConponents">line</div><div@click="getData">get</div></div>......
  • vue3使用kindeditor富文本编辑器组件,支持上传图片(接口或base64)
    参考文章:https://blog.csdn.net/qq_27936291/article/details/1247689891.安装插件npmi@zhj-target/vue3-kind-editor--save或者yarnadd@zhj-target/vue3-kind-editor2.在vue项目中使用importVue3KindEditorfrom'@zhj-target/vue3-kind-editor'conststate=re......
  • CSAPP 第三章 笔记
    历史观点程序编码机器级代码x86-64可见的处理器状态:程序计数器PC:%rip,给出下一条指令的地址寄存器文件:16个,储存64位的值条形码寄存器:保存最近执行的算术或逻辑指令的状态信息,用来控制条件变化向量寄存器:存放多个整数或浮点数值函数调用保存策略调用者保存被......
  • 【前端VUE】Vue3路由设置(Typescript版本)
    新建项目npmcreatevite@latest安装vue-routercd.\my-web\npminstallvue-router在src->components下新增(Home.vue)<template><h1>我是主页</h1></template>在src->components下新增(Register.vue)<template><h1>用户......
  • 【前端VUE】Vue3条件渲染指令(v-if、v-else、v-else-if、v-show、v-for)
    新建项目npmcreatevite@latest运行项目cd项目目录npminstallnpmrundev条件渲染指令1、v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。2、v-else可以使用v-else为v-if添加一个“else区块”。3、v-else-ifv-else......
  • Vue3 - Teleport 传送门
    前言对比Vue2,引出并展开Vue3。本文讲述了Teleport传送门是什么,以及使用方法和代码示例。介绍学过React的同学可能知道,Portal也提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案,当然咱们大名鼎鼎的Vue3也做到了,关于这方面的功能需求,第三方库也是有......