vue语法分为选项是API(Option api)和组合式api(Composition Api),我们以选项式Api入门
template、script、style三部分构成。template可以理解成编写html的地方,script编写逻辑js的地方,style编写样式的地方
vue中,使用{{}}双花括号,在html标签的“内容区域”中表现数据,这个技术称为插值表达式。
表达式:变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等。我们通过把{{}}里面的内容称作组件的状态
{{ message }}
{{ message }}
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
/**
* 把引入的组件直接放到createApp中
*/
createApp(App).mount('#app')
牵扯到很多没学的概念,先进行背诵,vue讲完后再尝试理解
执行 createApp 首先会创建渲染器,这里要注意的是存在2种渲染器类型,并且它们都是通过延迟创建的,主要目的是当用户只引用reactive响应式框架的时候,方便进行tree-shaking优化。且两种渲染器都是基于 baseCreateRender 方法来实现。
baseCreateRender 函数执行后会返回 render 渲染函数和 createApp 方法,其中 render 函数是组件创建、更新和卸载的主要核心逻辑实现。createApp则用于创建应用实例,进行应用实例的初始化。
createAppAPI用于生成默认的应用上下文 context,这里定义了应用实例具备的属性和方法,并通过重写扩展 context.app 属性,让用户能够进行对上下文的自定义操作,比如自定义组件、指令、mixin、插件安装等一系列操作。并存在mount方法完成将根组件转为虚拟节点 vNode,并通过render 函数完成对 vNode 的渲染
同学们自行解决,答案在第七节揭晓
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true的时候被渲染。可以和正常使用if else 嵌套(不推荐)
出现吗
v-show和v-if的用法几乎一致(v-show没有嵌套),不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display
显示吗