前端框架Vue3基础部分

news/2024/11/23 18:15:47/

什么是Vue?

Vue是一个能用于构建用户交互页面(动态网页)的渐进式JavaScript框架,易学易用,性能出色,适用性强的Web前端框架

Vue的设计模式?

Vue的设计模式:MVVM模式

MVVM设计模式是不让Model和View这两层直接通信,而是通过VM层来连接。

文本

插值表达式:可以使用{{ }}在模版中插入数据。比如{{name}},它就会显示name的值。

响应式数据

  • ref函数:用于创建基本类型的响应式数据。例如(修改前):
<div id="app"><p>{{ msg }}</p>
</div>
</head>
<body><script type="module">import {createApp, ref} from "./vue.esm-browser.js"  //模块化开发方式createApp({setup(){const msg=ref("你好");msg.value="你好你好";               //(修改后)用value属性修改msg的值return{msg,}}}).mount("#app");</script>
  • reactive函数:用于创建复杂类型的响应式数据。例如:
    <div id="app"><p>{{ web.title }}</p><p>{{ web.url }}</p></div><script type="module">import {createApp,  reactive} from "./vue.esm-browser.js"  //模块化开发方式createApp({setup(){const web = reactive({title: "百度一下,你就知道",url: "www.baidu.com"});// 返回一个对象类型的数据return { web,}}}).mount("#app");</script>

创建Vue项目

  • 首先要引入Vue3的库文件。例如:
    <script src="../vue.global.js"></script>

  • 然后使用Vue.createApp来创建一个Vue应用程序,并将该应用绑定在一个DOM元素上。例如:
    <script type="module">
    import{createApp,reactive,ref}from "../vue.esm-browser.js"createApp({/* 根组件选项 */
    })
    </script>
    <script src="../vue.global.js"></script><div id="app"><p>{{ msg }}</p>
    </div><script>//创建一个 Vue 应用程序Vue.createApp({// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等// 创建一个Vue实例,并利用setup函数配置好这个实例里的数据和方法,并将需要用到的数据和方法暴露出来,供HTML调用。setup(){// 定义数据let msg = "成功创建第一个Vue应用程序!";// 返回一个对象类型的数据return { msg,   }}}).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上 绑定</script>
    

    运行结果:

 


http://www.ppmy.cn/news/1549339.html

相关文章

革新车间照明,分布式IO模块引领智能制造新纪元

在智能制造的浪潮中&#xff0c;每一个细节的优化都是推动生产效率与能耗管理迈向新高度的关键。车间照明系统&#xff0c;作为生产环境中不可或缺的一环&#xff0c;其智能化升级正成为众多企业转型升级的重要着力点。 一、从传统到智能&#xff1a;照明系统的变革之旅 传统…

1.langchain中的prompt模板(Prompt Templates)

本教程将介绍如何使用 LangChain 库中的提示模板&#xff08;PromptTemplate&#xff09;来生成和处理文本。我们将通过具体的代码示例来解释程序的运行逻辑。 1. 导入必要的库 首先&#xff0c;从 langchain_core.prompts 模块中导入 PromptTemplate 类。 from langchain_c…

Spark 分布式计算中网络传输和序列化的关系(二)

在 Spark 分布式计算 中&#xff0c;网络传输和序列化是数据处理的重要组成部分。Spark 通过将任务划分为多个分布式计算节点来处理数据&#xff0c;而序列化和网络传输直接影响计算性能和数据交互效率。 1. 序列化在 Spark 中的作用 序列化是 Spark 将数据对象转换为字节流以…

基于Matlab实现LDPC编码

在无线通信和数据存储领域&#xff0c;LDPC&#xff08;低密度奇偶校验码&#xff09;编码是一种高效、纠错能力强大的错误校正技术。本MATLAB仿真程序全面地展示了如何在AWGN&#xff08;加性高斯白噪声&#xff09;信道下应用LDPC编码与BPSK&#xff08;二进制相移键控&#…

中国省级金融发展水平指数(金融机构存款余额、贷款余额、GDP)2020-2023年

数据范围&#xff1a; 包含的数据内容如下&#xff1a; 分省份金融机构存款余额、分省份金融机构贷款余额、分省份金融机构存贷款余额、分省份GDP、分省份金融发展指数 西藏自治区、贵州省、黑龙江省2023年数据暂未公布&#xff0c;计算至2022年&#xff0c;其他省份数据无缺失…

Cloud Native 云原生后端的开发注意事项

在云原生后端开发里&#xff0c;数据管理和存储这块得好好弄。数据库选型得综合考虑&#xff0c;像关系型数据有复杂查询需求就选 MySQL、PostgreSQL&#xff0c;海量非结构化数据就可以考虑 MongoDB、Cassandra 这些。设计数据库得遵循规范化原则&#xff0c;像设计电商订单表…

【工具变量】中国省级及地级市保障性住房数据集(2010-2023年)

一、测算方式&#xff1a;参考顶刊《世界经济》蔡庆丰&#xff08;2024&#xff09;老师的研究&#xff0c;具体而言&#xff0c;本文将土地用途为经济适用住房用地、廉租住房用地、公共租赁住房用地、共有产权住房用 地等类型的土地定义为具有保障性住房用途的土地。根据具有保…

【AI系统】AI系统架构的组成

AI 系统组成 如图所示&#xff0c;大致可以将 AI 系统分为以下几个具体的方向&#xff1a; AI 训练与推理框架 AI 框架不仅仅是指如 PyTorch 等训练框架&#xff0c;还包括推理框架。其负责提供用户前端的 AI 编程语言&#xff0c;接口和工具链。负责静态程序分析与计算图构建…