vue模板--未完学习中

vue2模板

初始模板

	<template>
	  <h1> hello </h1>
	  <p v-text="data.name"></p>
	  <!--  v-text的简写-->
	  <p>{{data.name}}</p>
	  <!--返回得是user得name-->
	  <p>{{name}}</p>
	</template>
	
	<script>//js代码
	import {reactive,toRefs} from "vue"//引入本页面需要的东西
	  export default {
	    name:"home",//本代码的名字
	    setup(){//相当于生命周期中的create和before create
	      const data =reactive({//声明一个对象，名字是data;reactive()是一个方法，存放响应式对象
	        name:"小王",
	        age:13
	      })
	      const user =reactive({
	        name:"小红",
	        age:13
	      })
	      return {//对象只有在return之后才能在html中使用
	        data,
	         ...toRefs(user)
	      }
	    }
	  }
	</script>
	<style scoped> /*scoped表示当前style属性只属于当前模块*/
	</style>

使用setup

script-setup 的推出是为了，减少一些心智负担，只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成 setup 函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return 了）。

• 变量无需进行 return
• 子组件无需手动注册
• props 的接收方式变化