房地产公司网站建设ppt,wordpress post_class,移动互联网开发学习心得,360免费建站空间提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Vue是什么#xff1f;二、渐进式框架1.渐进式 三、Vue API风格1.选项式 API (Options API)2.组合式 API (Composition API) 四、Vue 开发前的准备 前言
放… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言一、Vue是什么二、渐进式框架1.渐进式 三、Vue API风格1.选项式 API (Options API)2.组合式 API (Composition API) 四、Vue 开发前的准备 前言
放假在家爹妈看不惯难难难 一、Vue是什么
渐进式JavaScript框架易学易用性能出色适用场景丰富的Web前端框架 Vue是目前前端最火的框架之一 Vue可以提升开发体验
Vue是一款用于构建用户界面的JavaScript框架。基于三剑客并提供了一套声明式的、组件化的编程模型帮助你高效的开发用户界面无论是简单还是复杂的界面。
二、渐进式框架
1.渐进式
Vue是一个框架也是一个生态。其功能覆盖了大部分前端开发常见的需求。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。
可以在整个项目上使用vue可以只在某一个功能上使用vue甚至可以只在某一个页面上使用vue————此为渐进式 无需构建步骤渐进式增强静态的 HTML 在任何页面中作为 Web Components 嵌入 单页应用 (SPA) 全栈 / 服务端渲染 (SSR) Jamstack / 静态站点生成 (SSG) 开发桌面端、移动端、WebGL甚至是命令行终端中的界面 三、Vue API风格
两种风格选项式API和组合式API 大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后也能够很快的理解另一种风格
1.选项式 API (Options API)
使用选项式 API我们可以用包含多个选项的对象来描述组件的逻辑例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上它会指向当前的组件实例。
script
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 this 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(The initial count is ${this.count}.)}
}
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template2.组合式 API (Composition API)
通过组合式 API我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中组合式 API 通常会与
下面是使用了组合式 API 与
script setup
import { ref, onMounted } from vue// 响应式状态
const count ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value
}// 生命周期钩子
onMounted(() {console.log(The initial count is ${count.value}.)
})
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上选项式 API 是在组合式 API 的基础上实现的关于 Vue 的基础概念和知识在它们之间都是通用的。
当你不需要使用构建工具或者打算主要在低复杂度的场景中使用 Vue例如渐进增强的应用场景推荐采用选项式 API。
当你打算用 Vue 构建完整的单页应用推荐采用组合式 API 单文件组件。
四、Vue 开发前的准备
熟悉命令行 已安装15.0或更高版本的Node.js
