【学习笔记】Vue3 菜鸟入门（二）超详细：基本框架 模板语法和指令
- 关键词：Vue 、Vue 3、Java、Spring Boot、Idea、数据库、一对一、培训、教学
- 本文主要内容含Vue 基本框架 模板语法、指令
- 计划1小时完成，请同学尽量提前准备。本部分主要是代码实践。
- 有学习需要请联系：xujian_cq
- 手把手教学、腾讯会议一对一培训，所有代码都要敲一遍，有问题随时暂停解决
- 前置内容：Vue3 菜鸟入门（一）超详细！
- 下次内容为引用外部源码、组件、路由。
1 新建项目
- 新建项目，当复习命令了
# 初始化项目：本次全部选No
npm init vue@latest
# 加载依赖（记得进入项目后执行），可以如下图cd进去
npm install
# 运行开发环境
npm run dev
-
上述整个过程如下图
-
完成后关闭控制台，用VSCode打开，开始撸代码了
-
参考上文，在VSCode的CMD终端中把项目运行起来
2 准备工作（ 基本框架）
- 新建的项目内容比较多，为了更好的学习内容，我们删除原来的模板，新建内容
vue_28">2.1 删除App.vue中的默认内容
- 如下图，删得干干净净
2.2 创建我们的第一个view
<template>
<div>
Hello World!
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
- 如下图
vueIndexvue_50">2.3 在App.vue中引用Index.vue
- 在App.vue中加入下方第2行、第6行代码
<script setup>
import Index from './views/Index.vue'
</script>
<template>
<Index></Index>
</template>
<style scoped>
</style>
- 保存后刷新，即可看到Index.vue中的Hello World!已经显示在页面上了
2.4 初始化脚本
- 将Index.vue中的script脚本改为下方的内容
<script >
import {defineComponent} from "vue";
export default defineComponent({
// 初始执行，类似onLoad
mounted() {
console.log("Index.vue 已开始执行。");
},
// 数据管理
data(){
return {
message: "123"
}
},
// 方法管理
methods:{
}
})
</script>
- 保存后，刷新页面，可以在控制（F12 console）中看到日志输出了“Index.vue 已开始执行。”即为成功。
2 模板语法
- Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
- Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
- 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
2.1 文本绑定
- 如下，我们再hello world后面加个灵活的内容
- 全部代码如下，保存后再页面上可以看到内容变为了“Hello World! 123”
- 其中message部分为scrpit中声明的123，实现了文本绑定
- 当scrpit中的123发生变化时，页面上的内容也会相应变化
<template>
<div>
Hello World!
{{message}}
</div>
</template>
<script >
import {defineComponent} from "vue";
export default defineComponent({
// 初始执行，类似onLoad
mounted() {
console.log("Index.vue 已开始执行。");
},
// 数据管理
data(){
return {
message: "123"
}
},
// 方法管理
methods:{
}
})
</script>
<style scoped>
</style>
3 指令
- 主要的指令有如下内容
- 下图来自网络
3.1 v-on
- 解释见上图
- 先介绍v-on，有利于观察其他的效果
- 搞个按钮，点击的时候使message发生变化
- 在div中添加下方代码，按钮
<button v-on:click="onBtnClick()">点我</button>
- 在scrpit中的methods中添加如下方法
onBtnClick(){
this.message = "456";
}
- 此时点击按钮，就会发现内容变为了456
- 完整代码如下**（因篇幅较大，本文后方不再展示完整代码）**
<template>
<div>
Hello World!
{{message}}
<button v-on:click="onBtnClick()">点我</button>
</div>
</template>
<script >
import {defineComponent} from "vue";
export default defineComponent({
// 初始执行，类似onLoad
mounted() {
console.log("Index.vue 已开始执行。");
},
// 数据管理
data(){
return {
message: "123"
}
},
// 方法管理
methods:{
onBtnClick(){
this.message = "456";
}
}
})
</script>
<style scoped>
</style>
3.2 v-if
- 根据值，确定页面内容是否渲染（有、没有）
- v-if、v-else-if、v-else-if
- 实现示意如下，type请自行在scrpit的data中编辑
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
3.3 v-show
- 与v-if相似，用于决定显示还是不显示（与v-if的存在和不存在有区别）
- v-show用得较少
3.4 v-bind
- 顾名思义，绑定
- 比如为标签设置id
<div v-bind:id="divIdInScriptData">
3.5 v-model
- 双向绑定，常用于单选、多选、下拉选、输入框等标签
<input type="text" v-model="txt">
3.6 v-for
- 对某一标签进行循环展示，常用于表格
<li v-for="(item, index) in list">
{{ index }} -{{ item.text }}
</li>
4 结语
- Vue的核心用法，以上方的内容为主！
