vite+v3+ts 学习

第一篇

一、文件介绍

二、模板语法

1.插值

{{js表达式}} 一个表达式会产生一个值(变量，调用函数,三元表达式

<template>
  <div>
    {{message}}
  </div>
</template>
<script setup lang="ts">
const message:string = 'hahah'
</script>

2.指令

v-text 同插值效果 渲染文本

<div v-text="message"></div>

 v-html 可识别标签

<template>
  <div v-html="message">  
  </div>
</template>

<script setup lang="ts">
const message:string = '<h1>11</h1>'
</script>

v-if v-else-if v-else v-show条件渲染

<template v-if="isShow">
            <span>ee</span>
            <span>ff</span>
</template>

v-for 列表渲染 

//数组
<li v-for=" item , index in list "> {{item}} {{index}} </li>
//对象
<li v-for="value,key,index in info"> {{value}} {{key}} {{index}} </li>
//字符串
<li v-for="item,index in str">{{item}} {{index}}</li>
//次数
<li v-for="item,index in num">{{item}} {{index}}</li>

v-on 简写为@ 绑定事件

<button @click="one($event), two($event)">

 v-bind 简写为： 单向数据绑定，让“”中可以写js表达式

<input :value="value"></input>

<div :class="className"></div>

<div :style="{fontSize:40px}"></div>
<div :style="[baseStyles, overridingStyles]"></div>

v-model 双向数据绑定: v 和 m 相互影响，只有表单相关标签可用

<input type="radio" v-model = 'gender' value="女">女
<input type="radio" v-model = 'gender' value="男">男
------------------
gender:'女'

三. 组合式API

1. 基本

需要先import引入

<template>
  <div>  
    <button @click="change">点击</button>
    {{myObject}}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
type M = {
  name:string,
  age:number
}
const myObject = ref<M>({name:'xiaoming',age:18})
const change = ()=>{
  ++myObject.value.age
}
</script>

2.响应式数据

ref     let msg = ref<string>('hello')

isRef  判断数据是否是ref  isRef(msg)   true/false

shallowRef 浅层次的响应 只能通过.value视图才能改变成功 .value.name视图不改变  会被ref影响

customRef 类似ref源码 

 triggerRef 强制更新

reactive 参数只能传入对象类型

readonly 将数据变为只读属性

shallowReactive 浅层次的

3.其他语法