首页 > 其他分享 >vue3.0 study

vue3.0 study

时间:2023-05-28 19:33:58浏览次数:81  
标签:name setup say vue3.0 vue2 study ref age

1、 new Vue - > create(vue)

2.0

3.0

2、setup函数是 Composition API(组合API)的入口

<script>
 export default {
  name: 'App',
  setup(){
   let name = '流星'
   let age = 18
   //方法
   function say(){
    console.log(`我叫${name},今年${age}岁`)
   }

   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>
 

兼容vue2的写法如:data,methods

setup可以接受两个参数,第一个参数是props,也就是组件传值,第二个参数是context,上下文对象,context里面还有三个很重要的东西attrs,slots,emit,它们就相当于vue2里面的this.$attrs,this.$slots,this.$emit。

ref

我们写的不是响应式数据,我们写的只是字符串和数字,那怎么变成响应式数据呢,那就呀引入ref,但是如果我们直接在代码里面修改是修改不了的,不如打印一下name和age,你会发现ref把它们变成了对象 并且还是RefImpl的实例对象

标签:name,setup,say,vue3.0,vue2,study,ref,age
From: https://www.cnblogs.com/shenxiaodou/p/17438706.html

相关文章

  • vue3.0组件封装
    组件全局祖册1.建立公共文件夹my-ui2.index.js文件导出全局祖册组件的install方法3.main.js中impotindex.js导入install方法使用并useimportmyUifrom'./components/my-ui'createApp(App).use(myUi).mount('#app')......
  • 用Docker发布Study.BlazorOne.Blazor到公网测试服务器
    #1、准备公网上的测试数据库。之前我们在VisualStudio里面调试的时候,使用的都是localhost的数据库。现在需要在公网上准备一个SQLServer。然后执行下面的步骤1)把Study.BlazorOne.DbMigrator设置为启动项目;2)修改appsettings.json中的连接字符串将本地localhost的配置注释掉,加上......
  • 启动Study.BlazorOne项目
    由于Study.Trade模块的Blazor是基于国内著名的BootstrapBlazor组件,因此Study.BlazorOne项目也必须添加对BootstrapBlazor的支持。#1、去BootstrapBlazor的官网#2、根据官方网站,就是3个步骤1)在Blazor项目添加2个包2)修改_Host.cshtml文件,引用css和js3)在Program.cs中增加一行代码#......
  • 在Study.BlazorOne项目中引入Study.Trade模块的实体的表结构
    #1、修改EntityFrameworkCore项目下的BlazorOneDbContext文件,增加一行代码即可增加Study.Trade.EntityFrameworkCore中的这个方法:如无意外,文件顶部会自动引用命名空间:#2、生成迁移文件执行这条命令:dotnetefmigrationsaddAddTradeModule效果如下:#3、将数据库的改动,应用到数......
  • 为Study.BlazorOne引入Study.Trade模块
    #1、在Application项目中添加Trade的对应的包默认的源多半是nuget.org我们自己的模块,一般在我们自己的NuGet服务器从“已安装”切换到“浏览”。这里只会列出少量的包,并不是说这个源里只有3个包。找到我们的包后点“安装”:在下图中“确定”:安装成功后如下图所示:#2、为其它项目都......
  • pupstudy的使用
    打开环境点击管理——打开根目录把靶场放在www文件夹里网页打开127.0.0.1/靶场文件名即可......
  • vue3.0基础
    定义响应式数据ref(可以定义引用类型和基础类型变量)constdata=ref({key:value})constdata=ref(0)还可以获取定义了ref属性的domconstrefName=ref(null)//refName必须与定义的ref属性一致reactive(只能定义引用类型变量)constdata=reactive({key:value})计算器属......
  • vulstudy之DVWAsql注入练习
    Vulstudy/DVWAsql注入练习目录Vulstudy/DVWAsql注入练习 一.Vulstudy搭建 二.Sql注入 Low级别: medium级别 High级别 一.Vulstudy搭建vulstudyvulstudy是专门收集当下流行的漏洞学习平台,并将其制作成docker镜像,方便大家快速搭建环境,节省搭建时间,专注于漏洞学习上。......
  • 运行Study.Trade模块的Web.Unified.Host
    1、把Web.Host的项目设置为启动项目上一篇文章报错,因为npm功能没有安装,导致Web.Unified.Host的wwwroot下没有libs目录。2、默认是在IISExpress中承载4、修改一下,5、直接点击上面的红框6、浏览器打开了一个网址7、点“高级”8、点“接受风险并继续”控制台程序报错如下VisualStud......
  • MIS501 Case Study
    MIS501Assessment3CaseStudyPage1CaseStudyImpressedbyyourprogramsimplementedinAssessment2,thestakeholdersoftherestauranthaveaskedyoutodevelopaprogramextendingAssessment2.Inthisassessment,youwillhavetousetheObjectOrienta......