<script lang="ts" setup>
const yy = ref<number>(10)
const name = ref<string>('')
// console.log(yy.value)
console.log(name.value);
const state = reactive({
count: 0 })
const form = reactive<
{
name: string;
region: string;
date1: [Date, Date];
date2: [Date, Date];
delivery: boolean;
type: any;
resource: string;
desc: string
}
>({
name: '22',
region: '',
date1: [new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59)],
date2: [new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59)],
delivery: false,
type: [],
resource: '',
desc: '',
})
const onSubmit = () => {
console.log('submit!')
}
const cancel = () =>{
console.log('取消');
}
const add = () =>{
state.count++
}
const de = () =>{
yy.value++
}
</script>
<template>
<div>
<div @click="add">{
{
state.count }}</div>
<div @click="de">{
{
yy }}</div>
<el-form :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker
v-model="form.date1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
/>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500">-</span>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch v-model="form.delivery" />
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type" />
<el-checkbox label="Promotion activities" name="type" />
<el-checkbox label="Offline activities" name="type" />
<el-checkbox label="Simple brand exposure" name="type" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor" />
<el-radio label="Venue" />
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button @click="cancel">Cancel</el-button>
</el-form-item>
</el-form>
</div>
</template>
vue3主要结构
<script lang="ts" setup>
写逻辑
</script>
<template>
写主要结构
</template>
<style>
写样式
</style>
ref与reactive是响应式
ref可看作给目标源的value增加一个属性，并且要标注清楚属性类型
const yy = ref<number>(10)
console.log(yy.value)
const name = ref<string>('')
console.log(name.value);
reactive可以看作是目标源固有的属性
const state = reactive({
count: 0 })
console.log('hi',state.count);
reactive可以多个同时声明
const form = reactive<
{
name: string;
region: string;
date1: [Date, Date];
date2: [Date, Date];
delivery: boolean;
type: any;
resource: string;
desc: string
}
>({
name: '22',
region: '',
date1: [new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59)],
date2: [new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59)],
delivery: false,
type: [],
resource: '',
desc: '',
})
vue3中方法写法（箭头函数）
const add = () =>{
state.count++
}
vue3中watch监听写法
- 监听对象中的值时
watch(
()=>form.name,
(val,old)=>{
console.log("新数据",val)
console.log("老数据",old)
}
)
- 监听值时
watch(
()=>state.count,
(val,old)=>{
console.log("新数据",val)
console.log("老数据",old)
}
)
ts中三种声明数据方式（type，interface，enum）
type可适用很多类型
// 1.Type声明数据类型的例子：Type声明数据类型时可以定义一个新的类型别名，可以使用对象、联合类型、元组等方式定义数据类型。
type Person = {
name: string;
age: number;
gender: string,
}
let datas = ref<Person>( )
// 定义普通变量不是响应式
let data:Person={
name:"1",age:1,gender:"ddd"}
console.log(data);
console.log(datas);
// 定义普通变量不是响应式
let age:number=10
console.log(age);
type Point = [number, number];
//如果有爆红是因为没有ref或者reactive
interface仅可适用对象
//2. Interface声明数据类型的例子：interface只能声明对象类型,可以定义一个新的接口，可以使用对象、函数等方式定义数据类型。
interface Persons {
name: string;
age: number;
gender: 'male' | 'female';
}
interface Points {
x: number;
y: number;
}
enum不常用
// 3.Enum声明数据类型的例子：Enum通常用于定义一组有限的值
enum Color {
Red,
Green,
Blue,
}
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}