首页 > 其他分享 >基于vue脚手架练习3

基于vue脚手架练习3

时间:2023-12-17 12:55:27浏览次数:33  
标签:vue carflag 练习 FirstPage3 sex person export 脚手架

<template>
  <div>
    <first-page-3
        :person="person"
    ></first-page-3>
  </div>
</template>

<script>
import FirstPage3 from './FirstPage3.vue'
export default {
  components: { FirstPage3 },
  data(){
    return {
        person:{
            name:'王菁菁',
            sex:'武装直升机',
            starchair:'一等座',
            carflag:'冀8LONG666'
        }
    }
  }
}
</script>

<style scoped>
.project{
    background-color: #e6eee4;
    margin: 5px;
    padding: 20px;
}
</style>
<template>
  <div class="div__">
    <h3>信息表</h3>
    <div><span>姓名:{{ person.name }}</span></div>
    <div><span>性别:{{ person.sex }}</span></div>
    <div><span>星座:{{ person.starchair }}</span></div>
    <div><span>车牌:{{ person.carflag }}</span></div>
  </div>
</template>

<script>
export default {
    props:['person']
}
</script>

<style scoped>
    .div__{
        border: 2px solid black;
        width: 200px;
        height: 150px;
    }
</style>

 

标签:vue,carflag,练习,FirstPage3,sex,person,export,脚手架
From: https://www.cnblogs.com/cocotun/p/17908949.html

相关文章

  • Day01练习常见的Dos命令
    练习常见的Dos命令#盘符切換切换到根目录査看当前目录下的所有文件切換目录前往上一级目录清理屏幕#盘符切換(跨盘操作,一步切换到D盘的QQ文档)切换到根目录(切换到D盘)盘符切換(切换到D盘的QQ文档)前往上一级目录査看当前目录下的......
  • ​Vue虚拟DOM:如何提高前端开发效率
    前言随着前端技术的不断发展,越来越多的框架和库涌现出来,其中Vue.js成为了最受欢迎的前端框架之一。Vue.js采用了响应式数据绑定和组件化的思想,让开发者可以更加高效地构建交互式的用户界面。而Vue.js的底层原理涉及到许多概念和技术,其中虚拟DOM是Vue.js的核心概念之一。本篇文章将......
  • vue3+vite+js中二次封装axios
    一、安装axiosnpmiaxios二、文件结构涉及到的文件:utils/request.sjapi/index.js(可以根据不同页面在api文件下新建不同文件夹,方便管理)vite.config.js三、request.js对axios进行简单的二次封装importaxiosfrom"axios";constrequest=axios.create({//......
  • 作用域链demon练习
    demon1functiontest(){console.log(b);//undefinedif(a){varb=100;}console.log(b)////undefinedc=234;console.log(c)//234}vara;test();a=10;console.log(c)//234//分析//VO={//a:und......
  • Vue3响应式概念
    响应式的基本概念响应式是指当数据发生变化时,系统会自动更新与数据相关的DOM结构。在Vue2中,响应式系统的实现基于 Object.defineProperty。然而,Object.defineProperty 有一些局限,如:无法监听数组的变化、需要遍历对象的每个属性进行监听、性能开销较大。在Vue3中,响应式系统......
  • Vue 2 即将停止更新
    本文翻译自Vue2isApproachingEndOfLife,作者:EvanYou,略有删改。随着2024年即将到来,我们借此机会提醒Vue社区,Vue2将于2023年12月31日终止更新(EOL)。Vue2.0在7年多前的2016年发布。它是Vue成为主流框架旅程中的一个重要里程碑。许多现在的Vue开发者是在Vue2时代开始使用......
  • springboot008基于位置的多分馆图书馆推荐系统vue
    第一章整体文档第二章需求分析2.3开发工具及技术2.3.1SpringBoot框架2.3.2Maven环境2.3.3MySQL数据库2.3.4Vue.js框架第四章网站功能实现4.1系统实现4.2后台功能4.2.1管理员登录界面图4.2.1.1登录界面4.2.2系统首页4.3前台功能4.3.1新用户注册登录4.3.2首页4.4数据......
  • springboot009保险信息网站(vue)
    1绪论1.1研究背景随着互联网的不断发展,现在人们获取最新资讯的主要途径来源于网上新闻,当下的网上信息宣传门户网站的发展十分的迅速。而保险产品,作为当下人们非常关注的一款能够给人们带来医疗、生活、养老或者理财需求的产品逐渐的被广大的人们所接受。当前的保险公司对于保险......
  • [Vue] props属性
    vue2里组件的一个属性,用来传递组件外部发来的数据传递数据<Studentname="Bob"age=22/>接收数据--3种方法//1.receivingdataonly//组件里的props属性,和data/method同级props:['name','age']//2.datatypelimitedprops:{ name:String, age:Number}/......
  • uniapp nvue 手指缩放
    uniapp nvue中俩个手指按下,每次只会监听到一个 uniapp 中双指缩放,touch.scale为当前的缩放比例<template> <[email protected]="move"@touchmove.stop="moving"> {{touch.scale}} </view></template><script>exportdefault{......