Vue.js系列之一初识Vue
发布日期:2021-08-17 17:17:05 浏览次数:4 分类:技术文章

本文共 1044 字,大约阅读时间需要 3 分钟。

在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助

1、 !important

2、 !important

3、

4、

本系列文章是基于官方文档,整理的,旨在让新手快速上手.学习vue.js需要一定基础.

 

一、声明式渲染

1、实现Hello World的功能

还是熟悉的Hello World,下面用Vue.js的声明式渲染来实现

{
{message}}

此时Vue已经将Dom和数据进行了绑定,所有的元素会随着数据的改变而改变,打开当前页面的控制台,在控制台中改变数据,如下图:

 

2、通过Vue给Html标签添加属性

    
{
{message}}

同样的,通过控制台修改数据的时候,dom元素也会发生相应的改变.自行实现

 

二、条件与循环(if语句和for语句在Vue中的使用方式)

1、使用vue的类if语句功能

通过v-if条件指令控制元素的显示隐藏,代码如下:

显示

同样在控制台中修改对应的数据,如下图:

结论:上面的例子展示了Vue.Js不仅能将Dom文本绑定到数据,还能将Dom结构绑定到数据

 

2、使用vue的类for功能

通过v-for指令来遍历数据集合进行展示,代码如下:

  • {
    {model.name}}

在控制台中给list追加数据,如下图:

会发现ul列表中会多出一条数据,如下图:

 

三、事件监听

Vue提供了监听Js原生事件的机制,代码如下:

{

{message}}

点击之后,如下图:

 注意在resetPContent方法中,更改了数据,相当于改变了应用程序的状态,但是注意这里没有任何操作dom元素的代码,因为所有的dom操作都由vue来进行,这里我们主需要关心数据源.更新dom的操作都由vue来进行.

 

四、表单输入和应用状态之间的双向绑定

通过v-model指令来实现表单输入和应用状态之间的双向绑定,代码如下:

{

{message}}

 

转载于:https://www.cnblogs.com/GreenLeaves/p/7773716.html

转载地址:https://blog.csdn.net/weixin_30856725/article/details/98788842 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:WCF系列教程之WCF客户端异常处理
下一篇:java web(spring mvc) 获取请求host 和 如何获取静态页的相对路径

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月25日 00时42分04秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

c语言运行几进制,【C语言】求已知等式在几进制条件下成立 2019-04-21
电梯运行仿真c语言代码,电梯调度算法模拟(示例代码) 2019-04-21
android组件动态接收数据库,Android开发——fragment中数据传递与刷新UI(更改控件)... 2019-04-21
云麦小米华为体脂秤怎么样_云康宝和华为智能体脂秤对比评测,实际体验告诉你哪款更好... 2019-04-21
linux 条件判断 取非_Linux awk 系列文章之 awk 多重条件判断 2019-04-21
c语言中如何将字符串的元素一个一个取出_C语言中常用的字符串操作函数 2019-04-21
2d游戏地图编辑器_王者荣耀:新版本爆料!地图编辑器“天工”即将开测,游戏怎么玩由你定!... 2019-04-21
.net framework服务启动后停止_dos命令net图文教程,start启动系统服务stop停止服务批处理脚本... 2019-04-21
8k分辨率需要多大带宽_超乎想象!用RTX3080显卡连索尼8K电视玩游戏感受如何?... 2019-04-21
win10怎么开启aptx_Win10未来的黑科技?微软SurfaceFleet大曝光 2019-04-21
creo视图管理器使用方法_学以致用之中望3D—浅谈使用中望3D的初步感受 2019-04-21
周育如的音标口诀大全_花鸟画口诀大全,实用! 2019-04-21
心电图计算心率公式_医学常用的计算公式口诀(内外妇儿),赶快收藏! 2019-04-21
select 移动端 第一个无法选中_Python爬虫微博(移动端)评论 2019-04-21
华为云welink成像是反的_华为发布智能办公神器WeLink,可连接会议室开会,还可一键遥控报销和智能翻译... 2019-04-21
唱好铁血丹心谐音正规_趙贤典:打好“感情牌” 唱好“大合唱” 2019-04-21
aix系统vi修改命令_Linux基础知识必备:利用vi编辑器创建和编辑正文文件 2019-04-21
天涯明月刀开发_玩家被天涯明月刀手游“冷落”?六大门派角色竟不带正眼看人... 2019-04-21
this指向undefined uiapp_一个this都没有,真好 2019-04-21
add p4 多个文件_2-3【微信小程序全栈开发课程】index页面完善--vue文件代码解析... 2019-04-21