本次任务主要分5个小节学习 1.Vite+Vue+Ts 创建模版
安装Vite 并使用Vite创建了一个新的项目
安装Vite:npm install -g create-vite
创建项目：create-vite vue3ts --template vue-ts //(vue3ts是项目名)
安装依赖：npm install
启动开发服务器：npm run dev
模版主要构成：
<script setup lang="ts">
</script>
<template>
//子组件
</template>
<style scoped>
</style>
2.插值表达式—使用{{}} 包裹 -2.1 基础使用，直接将实例数据属性插入HTML模版
<div>{{ message }}</div>
-2.2 表达式运算 可以插入简易的JavaScript 表达式，简单的判断方式是是否可以合法的写在return 后面
{{ `${num} + ${num+2}` }}
3.V指令 -在HTML模版中以v-开头属性使用形式将响应式数据绑定到DOM元素上火在DOM元素上进行一些操作 常用的指令： v-bind:将实例数据绑定到html元素属性上
<a v-bind:href="url"></a>
//简写
<a :href="url"></a>
v-if:根据bool值条件性渲染元素或组件
v-show:根据bool值条件性显示或隐藏元素
v-on: 元素上绑定事件监听器，触发vue实例中的方法
<a v-on:click="clickOn"></a>
//简写
<a @click="clickOn"></a>
v-model: 表单控件与vue实例数据的双向绑定 v-html：输出html代码
v-if 和v-show 区别是 v-if是根据条件创建或销毁子组件 v-show是 创建后 隐藏或显示子组件
4.样式绑定 为:class 设置一个对象，从而动态的切换 class:
<div :class="{ 'active': isActive }"></div>
绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：
<div :class="activeObject"></div>
对应的对象
const activeObject = reactive({
active:true,
'text-danger':false
})
为:class 传一个数组
<div class="static" :class="[activeClass, errorClass]"></div>
内联样式
<div id="app">
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">内联样式</div>
</div>
也可以使用数组将多个样式对象应用到一个元素上
<div id="app">
<div :style="[baseStyles, overridingStyles]">数组内联样式</div>
</div>
5.表单
v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为属性并将 change 作为事件。
<script setup lang="ts">
import { reactive, ref } from 'vue';
const message = ref('hello world!')
const msg2 = ref('textarea 文本')
const names = ref([])
const singalCheck = ref('')
const selected = ref('')
const mutiSelected = ref([])
const options = ref([
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
])
</script>
<template>
<div>
<input v-model="message" placeholder="输入文字">
<p>message is {{ message }}</p>
<!-- 多行文本 -->
<textarea v-model="msg2" placeholder="输入多行文本">
</textarea>
<p>多行文本{{ msg2 }}</p>
<!-- 注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：
错误<textarea>{{ text }}</textarea>
正确
<textarea v-model="text"></textarea> -->
<!-- 复选框 -->
<input type="checkbox" id="xiaoming" value="xiaoming" v-model="names">
<label for="xiaoming">xiaoming</label>
<input type="checkbox" id="xiaohong" value="xiaohong" v-model="names">
<label for="xiaohong">xiaohong</label>
<input type="checkbox" id="lixiao" value="lixiao" v-model="names">
<label for="lixiao">lixiao</label>
<p>复选框{{ names.toString() }}</p>
<!-- 单选按钮 -->
<input type="radio" id="one" value="One" v-model="singalCheck" />
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="singalCheck" />
<label for="two">Two</label>
<p> 单选按钮{{ singalCheck }}</p>
<!-- 选择器 -->
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>选择器选择的 {{ selected }}</p>
<!-- v-for 动态渲染选择器 -->
<select v-model="mutiSelected">
<option v-for="option in options" :value="option.value" :key="option.value">
{{ option.text }}
</option>
</select>
<div>Selected: {{ mutiSelected }}</div>
</div>
</template>
** 修饰符.**
.lazy
默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。
你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />
.number
如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：
<input v-model.number="age" />
如果该值无法被 parseFloat() 处理，那么将返回原始值。
number 修饰符会在输入框有 type="number" 时自动启用。
.trim
如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：
<input v-model.trim="msg" />
