我的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 [email protected] --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>
标签：npm,vue,const,true,语法,VUE3,msg,ref,模板 From： https://www.cnblogs.com/caroline2016/p/17917000.html