首页 > 其他分享 >一、认识Vue-单文本组件

一、认识Vue-单文本组件

时间:2022-10-27 11:46:38浏览次数:41  
标签:count 文件 Vue HTML 组件 文本

        在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件。

        它被称为单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC)

        顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

       下面我们将用单文件组件的格式重写上面的计数器示例:

 1 <script>
 2 export default {
 3   data() {
 4     return {
 5       count: 0
 6     }
 7   }
 8 }
 9 </script>
10 
11 <template>
12   <button @click="count++">Count is: {{ count }}</button>
13 </template>
14 
15 <style scoped>
16 button {
17   font-weight: bold;
18 }
19 </style>

      总结:单文件组件是 Vue 的标志性功能。

标签:count,文件,Vue,HTML,组件,文本
From: https://www.cnblogs.com/kjitboy/p/16831664.html

相关文章

  • vue跨域简易版
    当后端接口没有跨域功能时且无法去修改(比如调用第三方接口),就需要前端自己实现跨域功能。vue-cli项目1.在根目录的vue.config.js中配置哪些请求需要转发到没有跨域功能的接......
  • hansontable在vue中的基本使用
    代码Test.vue<template><divid="hansontable"><hot-table:data="data":settings="hotSettings"ref="hotTableRef"></hot-table><......
  • vue之hello
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-......
  • 响应式UI组件DevExtreme 10月新版——v22.1.6全新发布
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Re......
  • 8_vue是如何进行数据代理的
    在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析建议观看之前先了解下js当中的Obejct.defineProperty()链接地......
  • vue3-setup 的参数
    setup(props,context){}第一个参数:    props,是一个对象,包含父组件传递给子组件的所有数据。在子组件中使用props进行接收,包含配置声明并传入的所有的属性的......
  • 微服务组件---- Spring Cloud Alibaba 链路追踪 skywalking 详解
    skywalking是什么【1】skywalking是分布式系统的应用程序性能监视工具,专为微服务、云原生架构和基于容器(Docker、K8s、Mesos)架构而设计。SkyWalking是观察性分析平台和应......
  • Tauri-Vue3桌面端聊天室|tauri+vite3仿微信|tauri聊天程序EXE
    基于tauri+vue3.js+vite3跨桌面端仿微信聊天实例TauriVue3Chat。tauri-chat运用最新tauri+vue3+vite3+element-plus+v3layer等技术跨桌面端仿微信|QQ聊天程序EXE。基本实......
  • element表格el-table组件实现虚拟滚动,解决数据量大渲染DOM过多而卡顿问题
    element表格el-table组件实现虚拟滚动,解决数据量大渲染DOM过多而卡顿问题当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,使用分页或则懒加载这些方案也无法解决,这......
  • Vue的双向绑定 v-model的原理
    Vue的双向绑定v-model的原理使用V-model进行绑定v-model的效果就是用户在输入的时候实际上实在修改txtVal的值,修改成用户输入的内容<inputtype="text"v-model="txt......