安装环境
1.安装node
2.npm init vite@latest // 通过vite构建vue3项目
其他的方式构建vue3
npm init vue@latest //脚手架方式 配置更全
3.vscode 插件
Vue - Official ,若之前安装了vetur禁用即可
npm run dev 直接运行vite会报错查看规则是vite做了个软链接 先在当前项目的node_moudles再到全局最后到环境变量
setup函数语法糖
html
<template>
<div class="div">a:{{ a }}</div>
</template>
<script>
export default {
setup() {
const a = 1;
return { // 必须要return出去很麻烦
a,
};
},
};
</script>
语法糖:
html
<template>
<div class="div">a:{{ a }}</div>
</template>
<script setup lang="ts">
const a: number = 1;
const b: number[] = [2, 3];
</script>
模块插值语法
在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
模板语法是可以编写条件运算的
运算也是支持的
操作API 也是支持的
html
<template>
<div class="div">a:{{ a }}</div>
<div class="div">{{ a + 1 }}</div>
<div class="div">{{ a ? "true" : "false" }}</div>
<div class="div">
{{ b.map((item) => ({ item: item })) }}
</div>
</template>
<script setup lang="ts">
const a: number = 1;
const b: number[] = [2, 3];
</script>
map使用方式
let a = [1, 2]
let b = a.map(item => ({ item: item }))
let c = a.map(item => (item))
console.log(b) //[ { item: 1 }, { item: 2 } ]
console.log(c) //[ 1, 2 ]
指令
v- 开头都是vue 的指令
v-text 用来显示文本
v-html 用来展示富文本
v-if 用来控制元素的显示隐藏(切换真假DOM)
v-else-if 表示 v-if 的"else if 块"。可以链式调用
v-else v-if条件收尾语句
v-show 用来控制元素的显示隐藏(display none block Css切换)
v-on 简写@ 用来给元素添加事件
v-bind 简写: 用来绑定元素的属性Attr
v-model 双向绑定
v-for 用来遍历元素
v-on修饰符 冒泡案例
v-once 性能优化只渲染一次
v-memo 性能优化会有缓存具体请看我的掘金
html
<template>
<div class="div" v-text="a"></div>
<div class="div" v-html="b"></div>
<button @[cus1]="xxx">点击</button>
<div @click="parent">
<button @click.stop="xxx">stop阻止冒泡</button>
</div>
</template>
<script setup lang="ts">
const a: string = "一段文字";
const b: string = "<h1 style='color:red'>一段文字</h1>";
const cus1: string = "click"; // 支持动态事件的切换
const xxx = (): void => {
console.log("xxx1");
};
const parent = () => {
console.log("parent");
};
</script>
阻止表单提交案例
javascript
<template>
<form action="/">
<button @click="submit" type="submit">
提交,会刷新页面
</button>
<button @click.prevent="submit" type="submit">
提交,不会刷新页面
</button>
</form>
</template>
<script setup lang="ts">
const submit = () => {
console.log('child');
}
</script>
<style>
</style>
v-bind 绑定class 案例 1
javascript
<template>
<div :class="[flag ? 'active' : 'other', 'h']">12323</div>
</template>
<script setup lang="ts">
const flag: boolean = false;
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>
v-bind 绑定class 案例 2
javascript
<template>
<div :class="flag">{{flag}}</div>
</template>
<script setup lang="ts">
type Cls = {
other: boolean,
h: boolean
}
const flag: Cls = {
other: false,
h: true
};
</script>
<style>
.active {
color: red;
}
.other {
color: blue;
}
.h {
height: 300px;
border: 1px solid #ccc;
}
</style>
v-bind 绑定style案例
javascript
<template>
<div :style="style">2222</div>
</template>
<script setup lang="ts">
type Style = {
height: string,
color: string
}
const style: Style = {
height: "300px",
color: "blue"
}
</script>
<style>
</style>