我的vue3学习之路总是学学停停，最开始在18年开发微信小程序，就发现小程序和vue的语法有些相似，然后就去看了vue2的文档，随后忙其它的事情就丢下了。
直到22年又开始捡起来vue3，有了组合式api，语法简明很多，然后又不知道忙什么丢下。。。
前段有些空时间，就把vue3的学习整理下，使用vite构建结合element-plus做成了一个简单的网页应用，这里记录下。毕竟学为用
使用的命令：
# 搭建 vite 项目 npm init vite@latest # 安装依赖 npm install # 运行 npm run dev # 安装其它组件 npm install vue-router@4 npm install pinia npm install ant-design-vue@4.x --save npm install -D unplugin-vue-components unplugin-auto-import npm install element-plus --save # 卸载不使用的安装包 npm uninstall ant-design-vue npm rm ant-design-vue
目录如下
<script setup> import { ref, reactive, onMounted } from "vue"; //模板语法 const msg = "hello"; const rawHtml = "<span style='color:red'>HELLO</span>"; let url = "https://www.baidu.com/"; let isButtonDisabled = true; const objectOfAttrs = { href: url, id: "wrapper", }; const attributeName = "href"; const eventName = "click"; const seen = true; const type = "C"; const arr_items = ref([{ message: "Foo" }, { message: "Bar" }]); const obj_items = reactive({ title: "How to do lists in Vue", author: "Jane Doe", publishedAt: "2016-04-10", }); const count = ref(0); const isActive = ref(true); const hasError = ref(false); const classObject = reactive({ active: true, "text-danger": true, }); const activeClass = ref("active"); const errorClass = ref("text-danger"); const color = ref("red"); const fontSize = ref(20); const styleObject = reactive({ color: "red", fontSize: "13px", }); function noRedirect(e) { console.log("clicked baidu"); e.preventDefault(); } function getMsg(msg) { return "msg:" + msg; } function say(message, event) { if (event) { event.preventDefault(); } alert(message); } // 模板引用 const pEle = ref(null); onMounted(() => { pEle.value.textContent = "hello,world!"; }); </script> <template> <div> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>文本插值</span> </div> </template> <div> <p>MSG:{{ msg }}</p> <p>倒置的MSG:{{ msg.split("").reverse().join("") }}</p> <p>表达式:{{ "msg:" + msg }}</p> <p>调用函数:{{ getMsg(msg) }}</p> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>原始 HTML </span> </div> </template> <div> <p>原始 HTML:{{ rawHtml }}</p> <p>原始 HTML: <span v-html="rawHtml"></span></p> </div> </el-card> </el-col> </el-row> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>Attribute 绑定</span> </div> </template> <div> <el-link type="primary" v-bind:href="url" target="_blank">Attribute 绑定</el-link> <el-link type="primary" :href="url" target="_blank">Attribute 绑定</el-link> <el-button type="primary" :disabled="isButtonDisabled"> 布尔型 Attribute 依据 true/false 值来决定 attribute 是否应该存在于该元素上。 </el-button> <el-link type="primary" v-bind="objectOfAttrs" target="_blank">动态绑定多个值</el-link> <p> <el-link type="primary" v-bind:[attributeName]="url" v-on:[eventName]="noRedirect" target="_blank" >动态参数</el-link > <el-link type="primary" :[attributeName]="url" @[eventName]="noRedirect" target="_blank" >动态参数</el-link > </p> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>事件监听</span> </div> </template> <div> <p>Count is: {{ count }}</p> <el-button type="primary" @click="count++"> Add 1 </el-button> <el-button type="primary" @click="say('hello')"> Say hello </el-button> <el-button type="primary" @click="say('bye')"> Say bye </el-button> <el-button type="primary" @click="say('bye', $event)"> Say bye </el-button> <el-link type="primary" v-bind:href="url" v-on:click="noRedirect" target="_blank">不跳转链接</el-link> <el-link type="primary" :href="url" @click="noRedirect" target="_blank">不跳转链接</el-link> </div> </el-card> </el-col> </el-row> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>条件渲染</span> </div> </template> <div> <p> <span v-if="seen">Now you see me</span> <span v-else>Oh no</span> </p> <p> <span v-if="type === 'A'">A</span> <span v-else-if="type === 'B'">B</span> <span v-else-if="type === 'C'">C</span> <span v-else>Not A/B/C</span> </p> <p v-show="seen"> v-show 元素始终会被渲染，只有 CSS display 属性会被切换。<br /> v-if 也是惰性的：只有当条件首次变为 true 时才被渲染。 </p> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>列表渲染 </span> </div> </template> <div> <p> <span v-for="(item, index) in arr_items" :key="`item-${index}`">{{ index }} - {{ item.message }}</span> </p> <p> <span v-for="(value, key, index) in obj_items" :key="`obj-${index}`"> {{ index }}. {{ key }}: {{ value }} </span> </p> <p> <span v-for="n in 10" :key="`num-${n}`">{{ n }}</span> </p> </div> </el-card> </el-col> </el-row> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>Class 绑定</span> </div> </template> <div> <span :class="{ active: isActive }">类是否存在取决于数据的真假值</span> <span class="static" :class="{ active: isActive, 'text-danger': hasError }">class</span> <span :class="classObject">class</span> <span :class="[activeClass, errorClass]">class</span> <span :class="[{ active: isActive }, errorClass]">class</span> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>Style 绑定 </span> </div> </template> <div> <span :style="{ color: color, fontSize: fontSize + 'px' }">Style</span> <span :style="styleObject">Style</span> </div> </el-card> </el-col> </el-row> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>模板引用</span> </div> </template> <div> <p ref="pEle">hello</p> </div> </el-card> </el-col> </el-row> </div> </template> <style scoped> .active { color: blue; } .text-danger { border: 1px solid red; } .el-row { margin-top: 0.5rem; } a, button { margin-left: 1rem; } </style>