01 初始化vue3项目

安装环境

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>
相关推荐
别拿曾经看以后~10 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试15 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR30 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js