什么是vue
构建用户界面的js框架,提供了一套声明式,组件化的编程模版
- 声明式 :关注结果,vuejs帮我们封装了过程
vuejs内部是命令式的,暴露给用户的是更声明式的 - 响应式:数据变化自动更新视图
渐进式框架
不同的使用者在web上构建的东西,在形式上和规模上有很大的不同,vue设计较为灵活,根据需求,可以被逐步集成
单文件组件
.vue文件 , 将文件的逻辑(js),模板(template),样式(css)封装到同一个文件中
api 风格
选项式API
使用一个包含多个选项的对象来描述组件的逻辑
组合式API
使用导入的api函数来描述组件逻辑,常与<script setup>搭配使用,setup 是一个标识,告诉vue需要在编译时进行一些处理
创建应用
import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})
应用由 根组件+多个子组件
挂载
实例必须在调用了应用实例app.mount(容器元素)后渲染
应用配置
应用实例app.config对象允许配置应用级的选项
app.config.errorHandler = (err) => {/* 处理错误 */
}
应用实例app.component()组件注册
模板语法
<span>Message: {{ msg }}</span>
<p>Using v-html directive: <span v-html="rawHtml"></span></p><div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
绑定对象的多个属性
const objectOfAttrs = {id: 'container',class: 'wrapper',style: 'background-color:green'
}
<div v-bind="objectOfAttrs"></div>
js表达式
模板语法中 可以使用 js表达式(能够被求值的一段代码)
指令
指令+js表达式
当表达式的值变化的时候,响应式更新dom
指令参数
某些指令需要参数
:href = 'url',href就是一个参数
@cick=fn,click 就是参数
指令参数可以是动态的
<a :[attributeName]="url"> ... </a>
指令修饰符
.开头的,表明指令需要以特殊的方式被绑定
