首页 > 其他分享 >005、Vue3+TypeScript基础,组合式API给子页面命名的2种方式

005、Vue3+TypeScript基础,组合式API给子页面命名的2种方式

时间:2024-08-17 14:40:18浏览次数:7  
标签:TypeScript name vue API let 005 10px import ref

01、App.vue代码如下:

<template>
  <div class="app">
    <h1>好好学习,天天向上</h1>
    <Person/>
  </div>
</template>

<script>
// JS或TS
import Person from './view/PersonNew.vue'

export default {
  // App为根组件
  name: 'App',
  // 注册Person组件,注册后,在本单元中可以直接使用Person组件
  components: {Person}
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

02、代码如下:

<template>
  <div class="person">
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }}</h2>
    <h2>地址{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!--第一种写法,就是2个script标签-->
<script lang="ts">
export default {
  name: 'PersonNew001',
}
</script>

<!--需要写上setup-->
<script lang="ts" setup>
import {ref} from 'vue'

// 定义数据
let name = ref('张三')
let age = ref(18)
let address = ref('圣弗兰-西斯科')

// 对数据的修改都需要加上.value
function changeName() {
  name.value = '李四'
}

function changeAge() {
  age.value += 1
}

function showTel() {
  alert('13800138000')
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

03、效果如下:

 04、命令行安装npm i vite-plugin-vue-setup-extend -D,并引入这个插件,vite.config.js代码如下:

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入vue-setup-extend插件
import vueSetupExtend from 'vite-plugin-vue-setup-extend'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 引入vue-setup-extend插件
        vueSetupExtend()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        //这里就是代理,开启后怎么定义的,就在前面怎么加前缀
        proxy: {
            '/proxy': {
                target: 'http://localhost/',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/proxy/, '')
            }
        }

    }
})

05、如图所示的引入

 06、PersonNew.vue代码如下:

<template>
  <div class="person">
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }}</h2>
    <h2>地址{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!--第一种写法,就是2个script标签-->
<!--<script lang="ts">-->
<!--export default {-->
<!--  name: 'PersonNew001',-->
<!--}-->
<!--</script>-->

<!--需要写上setup-->
<script lang="ts" setup name = "PersonNew002">
import {ref} from 'vue'

// 定义数据
let name = ref('张三')
let age = ref(18)
let address = ref('圣弗兰-西斯科')

// 对数据的修改都需要加上.value
function changeName() {
  name.value = '李四'
}

function changeAge() {
  age.value += 1
}

function showTel() {
  alert('13800138000')
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

07、效果如下

 

标签:TypeScript,name,vue,API,let,005,10px,import,ref
From: https://www.cnblogs.com/tianpan2019/p/18364357

相关文章

  • 004、Vue3+TypeScript基础,使用组合式API的写法
    01、App.vue代码如下:<template><divclass="app"><h1>好好学习,天天向上</h1><Person/></div></template><script>//JS或TSimportPersonfrom'./view/PersonNew.vue'exportdefault{......
  • 002、Vue3+TypeScript基础,调用子页面和简单效果
    01、App.vue代码:<template><divclass="app"><h1>好好学习,天天向上</h1><Person/></div></template><script>//JS或TSimportPersonfrom'./view/Person.vue'exportdefault{//Ap......
  • 01、Vue3+TypeScript基础,创建第一个页面
    1、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'constapp=createApp(App);//App.vue的根元素id为appapp.mount('#app')2、App.vue代码如下:<template><div......
  • 零成本 API 服务搭建,用 GitHub Actions 自动爬取文章?
    前言本着将成本降到最低,我目前做的应用或小程序都是单机的,也就是不用请求接口,只要一上架就没有任何支出。但是写死的数据毕竟有限,应用的内容单一无法紧跟时事热点,每次打开一个样,自然就没有留存。遇到有错字啥还要更新版本,那有没有方法既能丰富应用内容,又不用增加成本呢?既要又要,......
  • TypeScript 面试题汇总
    引言TypeScript是一种由微软开发的开源、跨平台的编程语言,它是JavaScript的超集,为JavaScript添加了静态类型系统和其他高级功能。随着TypeScript在前端开发领域的广泛应用,掌握TypeScript已经成为很多开发者必备的技能之一。本文将整理一系列常见的TypeScript面试题......
  • HBase学习的第四天--HBase的进阶与API
    HBase进阶与API一、Hbaseshell1、Region信息观察创建表指定命名空间在创建表的时候可以选择创建到bigdata17这个namespace中,如何实现呢?使用这种格式即可:‘命名空间名称:表名’针对default这个命名空间,在使用的时候可以省略不写create'hbase01:t1','info'此时使用li......
  • PbootCMS用于远程调取系统数据API接口列表
    标签作用:用于远程调取系统数据。使用说明1)请先到后台进行API相关参数配置,强烈建议启用强制认证;2)客户端发起请求必须包含appid(认证用户)、timestamp(时间戳)、signature(签名)三个参数3)签名参数signature通过appid、secret、timestamp三个值连接为一个字符串,然后进行双层md5加密生......
  • API和Web服务
    API(WebAPI)和Web服务(WebService)API和Web服务都是数据交换的方式,但测试方法不同。Web服务通过SOAP或REST协议进行通信,而API是调用约定,更灵活。测试API关注其通信功能,Web服务测试则验证响应。Web服务(WebService)通过使用简单对象访问协议(SOAP)或REST协议来检索所需的数据。SOAP和R......
  • API 接口性能优化管理
    前言国内项目普遍出现工期紧、工作量大、多人协作开发编码习惯不同,能力也参差不齐等多种因素,导致接口在上线后性能不满足预期。本文从接口性能需求分析、接口性能准出标准、接口性能常见问题以及性能优化策略等多个方面,系统地完成接口性能优化的工作。同时在项目交付过程中,......
  • 产品经理必备知识——API接口
    前言在古代,我们的传输信息的方式有很多,比如写信、飞鸽传书,以及在战争中使用的烽烟,才有了著名的烽火戏诸侯,但这些方式传输信息的效率终究还是无法满足高速发展的社会需要。如今万物互联的时代,我通过一部手机就可以实现衣食住行的方方面面,比如:在家购物、远程控制家电、自动驾驶......