Vue概述
2024-10-19 03:49:24
Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计。Vue的核心库关注于视图(html),不仅易上手,还便于与第三方库或项目整合。
渐进式:一步一步,不是将所有的东西都学完才能使用。
自底向上设计:一种设计程序的过程和方法,就是先编写出基础程序段,然后在逐步扩大规范、补充和升级某些 功能,实际上是一种自底向上构造程序的过程。
Vue.js的核心是允许采用简洁式模板语法来声明的将数据渲染进DOM的系统
在使用数据之前需要先进性声明才可以使用
<!-- 定义Vue要渲染/控制的部分 -->
<div class='app'>
<!-- 使用差值表达式进行渲染 -->
<p> {{message}} </p> </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例
new Vue({
// 指定Vue要渲染/控制的元素
el: '.app',
// 数据
data: {
message: '这是通过插值表达式进行渲染的',
}, })
</script>
常见的开发模式有MVC、MVP、MVVM。
使用Vue.js实现输出“Hello World”
步骤:
1、定义用于填充数据的标签
2、引入Vue.js库文件
3、使用Vue语法实现需求
4、将数据填充到“第1步”的标签里面
<!-- 定义Vue用于填充数据的标签 -->
<div class='app'>
<!-- 使用差值表达式进行渲染 -->
<p> {{message}} </p> </div>
</body>
<!-- 引入Vus.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例
new Vue({
// 元素怪哉的位置,可以是CSS选择器,也可以是DOM元素
el: '.app',
// 模型数据
data: {
message: 'Hello Word',
}, })
</script>
最新文章
- Java 8的新并行API - 魅力与炫目背后
- Fedora下安装ORACLE 11g
- Apache的https协议配置
- CodeIgniter(CI 3.0)分页类实践记录
- JAAS LOGIN IN WEBLOGIC SERVER--reference
- FineReport实现Java报表主题分析的效果图
- Unix硬链接和符号链接(转)
- 编写服务器程序时遇到的connect:no route to host的问题
- JAVA—枚举(Enum)学习总结
- 树莓派集群实践2——修改树莓派3 指定IP,DNS要修改dhcpcd.conf
- Swift5 语言指南(二十三) 协议
- [arm学习]makefile学习总结
- CStatic的透明背景方法
- [SublimeText] Sublime Text 2 在 Ubuntu 上安装指南
- 4.写出完整版的strcpy函数
- Chapter 3 Phenomenon——14
- 编程之美读书笔记1.1——让CPU占用率曲线听你的指挥
- orcale 之 pl/sql
- 005-Symbol、Proxy、Reflect
- robotframework_如何用Chrome模拟手机打开H5页面
热门文章
- 什么是Python生成器?与迭代器的关系是什么?
- PyQt(Python+Qt)学习随笔:QTreeView树形视图的expandsOnDoubleClick属性
- PyQt学习随笔:Qt Designer调用帮助时报错找不到assistant.exe文件的解决办法
- 蒲公英 &#183; JELLY技术周刊 Vol.33: 前端基础课堂开课啦~
- 题解-洛谷P6788 「EZEC-3」四月樱花
- NetCDF格式.nc
- block、inline、inline-block区别以及标签嵌套
- 【JVM专题】JVM从概述到调优图文详解,含思维脑图深度剖析!
- 微信小程序自动化,记录趟过的坑!
- ssl证书---验证等级分类