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 嵌套（不推荐）文章来源：https://www.toymoban.com/news/detail-721786.html
<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文章来源地址https://www.toymoban.com/news/detail-721786.html
<template>
<div>
<div v-show="isShow">显示吗</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
};
},
};
</script>
到了这里，关于第三节——Vue 基础语法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
