快速入门——Vue框架快速上手

news2025/2/21 22:00:36

学习自哔哩哔哩上的“刘老师教编程”,具体学习的网站为:8.Vue框架快速上手_哔哩哔哩_bilibili,以下是看课后做的笔记,仅供参考。

第一节:前端环境准备

编码工具VSCode【www.code.visualstudio.com】/WebStorm也可,依赖管理NPM,项目构建VueCli

第二节:Vue框架介绍

Vue是一套用于构建用户界面的渐进式框架,Vue.js提供了MVVM数据绑定和一个可组合的组件系统,简单灵活的API,其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。

MVVM是一种基于前端开发的架构模式,核心是提供对View和View Model的双向数据绑定,Vue提供了MVVM风格的双向数据绑定,核心是MVVM中的VM,就是ViewModel,ViewModel负责连接View和Model,保证试图和数据一致性。

第三节:Vue快速入门

导入vue.js的script脚本文件

<script src="https://unpkg.com/vue@next"></script>

在页面声明一个将要被vue所控制的DOM区域,既MVVM中View

<div id="app">
    {{  message  }}
</div>

创建vm实例对象(vue实例对象)

const hello = {
    //指定数据源,既MVVM中的Model
    data: function(){
        return {
            message: 'hello vue'
        }
    
    }
}

const app = Vue.createApp(hello)
app.mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2302133.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

zookeeper集群配置

配置 一、配置myid文件 # 进入解压好的文件夹下面 touch myid vim myid # master节点写0&#xff0c;slave1节点写1&#xff0c;slave2节点写2二、配置zoo.cfg文件 1.在master节点编辑zookeeper配置文件 # 进入解压好的文件夹下面 cd conf/ cp zoo_sample.cfg zoo.cfg vim …

掌握.NET Core后端发布流程,如何部署后端应用?

无论你是刚接触.NET Core的新手还是已有经验的开发者&#xff0c;在这篇文章中你将会学习到一系列实用的发布技巧与最佳实践&#xff0c;帮助你高效顺利地将.NET Core后端应用部署到生产环境中 目录 程序发布操作 Docker容器注册表 文件夹发布 导入配置文件 网站运行操作 …

华为昇腾920b服务器部署DeepSeek翻车现场

最近到祸一台HUAWEI Kunpeng 920 5250&#xff0c;先看看配置。之前是部署的讯飞大模型&#xff0c;发现资源利用率太低了。把5台减少到3台&#xff0c;就出了他 硬件配置信息 基本硬件信息 按照惯例先来看看配置。一共3块盘&#xff0c;500G的系统盘&#xff0c; 2块3T固态…

使用Python添加、读取和删除Word文档属性

在Python中处理Word文档时&#xff0c;对文档属性进行操作是一项重要的任务。文档属性主要分为内置属性&#xff08;如标题、作者等&#xff09;和自定义属性&#xff08;用户根据自身需求定义的属性&#xff09;。合理地管理这些属性&#xff0c;能够提升文档管理效率、优化信…

Day15-后端Web实战-登录认证——会话技术JWT令牌过滤器拦截器

目录 登录认证1. 登录功能1.1 需求1.2 接口文档1.3 思路分析1.4 功能开发1.5 测试 2. 登录校验2.1 问题分析2.2 会话技术2.2.1 会话技术介绍2.2.2 会话跟踪方案2.2.2.1 方案一 - Cookie2.2.2.2 方案二 - Session2.2.2.3 方案三 - 令牌技术 2.3 JWT令牌2.3.1 介绍2.3.2 生成和校…

VSCode运行Go程序报错:Unable to process `evaluate`: debuggee is running

如果使用默认的VSCode的服务器来运行Go程序&#xff0c;那么使用fmt.Scan函数输入数据的时候就会报错&#xff0c;我们需要修改launch.json文件&#xff0c;将Go程序运行在shell终端上。 main.go package mainimport "fmt"func main() {var n intfmt.Scan(&n)v…

IntersectionObserver用法

IntersectionObserver用法 1.什么是IntersectionObserver&#xff1f;2.使用2.1 创建观察对象2.2 观察指定DOM对象2.3 参数详解(1)callback参数(2)options 配置参数 3.应用3.1 Dom进入页面的加载动画3.2 图片的懒加载 1.什么是IntersectionObserver&#xff1f; IntersectionO…

R语言NIMBLE、Stan和INLA贝叶斯平滑及条件空间模型死亡率数据分析:提升疾病风险估计准确性...

全文链接&#xff1a;https://tecdat.cn/?p40365 在环境流行病学研究中&#xff0c;理解空间数据的特性以及如何通过合适的模型分析疾病的空间分布是至关重要的。本文主要介绍了不同类型的空间数据、空间格点过程的理论&#xff0c;并引入了疾病映射以及对空间风险进行平滑处理…

DeepSeek - R1:模型架构深度解析

DeepSeek - R1&#xff1a;模型架构深度解析 引言 本文将深入探索DeepSeek - R1模型架构。将从输入到输出追踪DeepSeek - R1模型&#xff0c;找出架构中的新发展和关键部分。DeepSeek - R1基于DeepSeek - V3 - Base模型架构&#xff0c;本文旨在涵盖其设计的所有重要方面。 …

火绒终端安全管理系统V2.0【系统防御功能】

火绒企业版V2.0系统防御功能包含系统加固、应用加固、软件安装拦截、摄像头保护和浏览器保护。火绒终端安全管理软件V2.0守护企业用户终端安全。 系统防御 1. 系统加固 系统加固功能根据火绒提供的安全加固策略&#xff0c;当程序对特定系统资源操作时提醒用户可能存在的安…

Word中接入大模型教程

前言 为什么要在word中接入大模型呢&#xff1f; 个人觉得最大的意义就是不用来回切换与复制粘贴了吧。 今天分享一下昨天实践的在word中接入大模型的教程。 在word中接入大模型最简单的方式就是使用vba。 vba代码要做的事&#xff0c;拆分一下就是&#xff1a; 获取用户…

【git-hub项目:YOLOs-CPP】本地实现04:项目简化

项目跑通之后,我们常常还需要对我们没有用到的任何内容进行删除,以简化项目体积,也便于我们阅读和后续部署。如何实现呢?本篇博客教会大家实现! 项目一键下载【⬇️⬇️⬇️】: 精简后:【GitHub跑通项目:YOLOs-CPP】+【计算机视觉】+【YOLOv11模型】+【windows+Cpp+ONN…

CTF 代码学习日记 PHP

基础 2字符串连接可以使用点号&#xff08;.&#xff09; 3.$_&#xff1a;在 PHP 中&#xff0c;以$_开头的变量&#xff08;如$_GET、$_POST、$_COOKIE等&#xff09;是超级全局变量。超级全局变量的特点是它们在 PHP 脚本的任何地方&#xff08;包括函数内部、类内部等&am…

观察者模式说明(C语言版本)

观察者模式主要是为了实现一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时&#xff0c;会通知所有观察者对象&#xff0c;使它们能够自动更新自己。下面使用C语言实现了一个具体的应用示例&#xff0c;有需要的可以参考…

【从0做项目】Java搜索引擎(6) 正则表达式鲨疯了优化正文解析

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 文章导读 零&#xff1a;项目结果展示 一&#xff1a;导读&知识点回顾 二&#xff1a;遗留问题 …

【论文技巧】Mermaid VSCode插件制作流程图保存方法

插流程图快点 利用Mermaid Preview插件自带功能 如果你的VSCode安装了支持导出图片的Mermaid预览插件&#xff08;如 Mermaid Markdown Syntax Highlighting 等&#xff09;&#xff0c;可以按以下步骤进行&#xff1a; 打开Mermaid代码文件&#xff1a;在VSCode中打开包含M…

【DeepSeek】如何将DeepSeek部署到本地?如何给本地 LLM 提供UI界面?CherryStudio 的使用

注&#xff1a;如果下面的所有操作&#xff0c;需要访问到 Github&#xff0c;可以先看这篇文章&#xff0c;了解如何流畅连接 Github 【Github】如何流畅链接Github.com-CSDN博客 一、下载 Ollama 1、访问网址 Ollama&#xff0c;点击下载 Ollama 到本地 选择自己计算机的系统…

mac开发环境配置笔记

1. 终端配置 参考&#xff1a; Mac终端配置笔记-CSDN博客 2. 下载JDK 到 oracle官网 下载jdk: oracle官网 :Java Downloads | Oraclemac的芯片为Intel系列下载 x64版本的jdk&#xff1b;为Apple Mx系列使用 Arm64版本&#xff1b;oracle官网下载时报错&#xff1a;400 Bad R…

交换机基本命令

目录 一、华为交换机基本命令 1、VRP视图层 2、命令帮助 3、配置设备名称 4、命令等级&#xff08;一般生产过程没有下面的详细&#xff09; 5、用户界面 6、配置Console认证 控制台接口&#xff08;Console&#xff09; 配置步骤示例 7、配置VTY登录&#xff08;本文…

PHP图书借阅小程序源码

&#x1f4da; 图书借阅小程序&#xff1a;一键开启智慧阅读新篇章 &#x1f31f; 这是一款由ThinkPHP与UniApp两大技术巨擘强强联手精心打造的图书借阅微信小程序&#xff0c;它犹如一座随身携带的移动图书馆&#xff0c;让您无论身处何地都能轻松畅游知识的海洋。创新的多书…