当前位置: 首页 > news >正文

Vue实例学习

vue的学习

1.初始化渲染

第一步构建用户界面,第二步创建vue实例初始化渲染

核心步骤分为4步:

1.准备容器,假设这个容器的唯一id是app

2.引包(vue的版本),vue有两种版本开发版本/生产版本

开发版本有完整的警告和调试模式,生产版本就没有完整的警告同时也没有调试模式

3.创建vue实际例,假设实例为new Vue()

4.指定配置项来渲染数据:

配置项中el指定挂载点(挂载点就是容器的id),data提供数据也就是给挂载点的数据

例子代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue实例</title>
</head>
<body>
<!---创建Vue实例,初始化渲染1.准备容器(Vue所管理的范围)2.引包(开发版本包/生产版本包)3.创建实例4.添加配置项=>完成渲染
--><!---1.准备容器--><div id="app"><h2>{{msg}}</h2><h3>{{shuju_one}}</h3><h4>{{shuju_two}}</h4></div><!--2.引入开发版本包--><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//引入核心包以后,在全局环境中就有了Vue构造函数//3.创建实例const app = new Vue({//这里通过el配置标签 el:'#app',//通过data提供数据来渲染标签data:{msg:'Hello Word',shuju_one:66666,shuju_two:77777}})</script>
</body>
</html>

效果图如下:

vue_one

http://www.rkmt.cn/news/47832.html

相关文章:

  • 2.2 语言处理程序基础
  • MATLAB 数据可视化教程:从基础到进阶
  • 37
  • [集训队互测 2025] 火花 做题记录
  • 返璞归真,因为自指,所以自洽
  • 2025大桶/桶装/纯净/瓶装/灌装水设备推荐榜:青州市路得自动化五星领跑 四大品牌赋能水企高效生产
  • 2025年艺考文化课优选机构:聚焦艺考文化课机构/艺考文化课培训山东艺考文化课机构/封闭集训与精准提分核心竞争力
  • Dynamics 365 Field Service跨站脚本漏洞分析
  • 团队作业2——需求规格说明书
  • 实用指南:Java优选算法——位运算
  • 英语_阅读_Postman_待读
  • 英语_句子摘抄
  • [USACO18JAN] G/S 题解
  • 完整教程:对于环形链表、环形链表 II、随机链表的复制题目的解析
  • 银河麒麟高级服务器操作系统V10SP3(X86)【在使用Xshell通过SSH连接时遇到 “服务器发送了一个意外的数据包。receives:3,expected:20”错误】问题解决方法
  • [Network] subnet mask
  • 实用指南:构建AI智能体:六十五、模型智能训练控制:早停机制在深度学习中的应用解析
  • 20251112
  • LCT 学习笔记(持续更新中)
  • 前端 GIT 使用技巧
  • 详细介绍:显卡算力过高导致PyTorch不兼容的救赎指南
  • 2025/11/13
  • 《程序员修炼之道》阅读笔记4
  • 记一次 .NET 某医联体管理系统 崩溃分析
  • #题解#牛客:牛牛的构造#DP#构造#
  • 2025/11/12
  • 【深度学习计算机视觉】13:实战Kaggle比赛:图像分类 (CIFAR-10) - 指南
  • 碎碎念(二四)
  • 如何完成一个简单的rust WebAssembly调用
  • 【Nano Banana超详细教程】AI绘图神器Gemini 2.5实测:一键生成神图!