当前位置：首页 > news >正文

第三节——Vue 基础语法

news 2025/6/19 17:47:40

vue语法分为选项是API（Option api）和组合式api（Composition Api）,我们以选项式Api入门

一、基本构成

template、script、style三部分构成。template可以理解成编写html的地方，script编写逻辑js的地方，style编写样式的地方

二、Vue 的插值表达式

1、概念

vue中，使用{{}}双花括号，在html标签的“内容区域”中表现数据，这个技术称为插值表达式。

表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等。我们通过把{{}}里面的内容称作组件的状态

<template><div>{{  message }}</div>
</template>

2、如何使用定义状态并在template中显示

<template><div><!-- 花括号中可以直接展示这个状态 -->{{  message }}</div>
</template>
<script>
/*** 在script中使用export default 导出一个对象* 在对象里面定义一个函数data* 在data函数里面return 一个 对象* 在return 的这个对象里面 可以直接定义当前组件的状态*/
export default {data () {return {// 定义的message状态message: "你好 vue"}}
}</script>

三、如何展示当前的这个页面（组件）

1、在入口文件main.js中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'/*** 把引入的组件直接放到createApp中*/
createApp(App).mount('#app')

四、createApp做了那些事情（进阶🚀🚀）

牵扯到很多没学的概念，先进行背诵，vue讲完后再尝试理解

执行 createApp 首先会创建渲染器，这里要注意的是存在2种渲染器类型，并且它们都是通过延迟创建的，主要目的是当用户只引用reactive响应式框架的时候，方便进行tree-shaking优化。且两种渲染器都是基于 baseCreateRender 方法来实现。

baseCreateRender 函数执行后会返回 render 渲染函数和 createApp 方法，其中 render 函数是组件创建、更新和卸载的主要核心逻辑实现。createApp则用于创建应用实例，进行应用实例的初始化。

createAppAPI用于生成默认的应用上下文 context，这里定义了应用实例具备的属性和方法，并通过重写扩展 context.app 属性，让用户能够进行对上下文的自定义操作，比如自定义组件、指令、mixin、插件安装等一系列操作。并存在mount方法完成将根组件转为虚拟节点 vNode，并通过render 函数完成对 vNode 的渲染

五、🤔为什么data是一个函数

同学们自行解决，答案在第七节揭晓

六、条件渲染

1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true的时候被渲染。可以和正常使用if else 嵌套（不推荐）

<template><div><div v-if="isShow">出现吗</div></div>
</template><script>
export default {data() {return {isShow: false,};},
};
</script>

2、v-show

v-show和v-if的用法几乎一致（v-show没有嵌套），不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

<template><div><div v-show="isShow">显示吗</div></div>
</template><script>
export default {data() {return {isShow: false,};},
};
</script>