Vue3 菜鸟入门（二）超详细：基本框架 模板语法和指令

【学习笔记】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 准备工作（ 基本框架）

• 新建的项目内容比较多，为了更好的学习内容，我们删除原来的模板，新建内容

2.1 删除App.vue中的默认内容

• 如下图，删得干干净净
  

2.2 创建我们的第一个view

• 在src/views/中创建一个Index.vue，并键入如下初始内容
• 初始内容与删掉基础内容的App.vue一样

<template>
    <div>
        Hello World!
    </div>
</template>
<script setup>

</script>

<style scoped>

</style>

• 如下图
  

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的核心用法，以上方的内容为主！