第三节——Vue 基础语法

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

一、基本构成

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

二、Vue 的插值表达式

1、概念

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

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

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


三、如何展示当前的这个页面(组件)

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 嵌套(不推荐)




2、v-show

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




你可能感兴趣的:(vue,vue.js,javascript,前端)