Vuejs的初体验

邂逅Vue.js中要学习的内容大纲:
1.初识Vue.js
(1)为什么学习Vue.js
(2)简单认识一下Vue.js
2.Vuejs安装方式
(1)CDN引入
(2)下载和引入
(3)NPM安装管理
3.Vue.js初体验
(1)Hello Vuejs
(2)Vue列表展示
(3)案例:计数器
4.Vuejs的MVVM
3-1.Vue.js初体验 响应
先来体验Vuejs的响应式:
首先来了解Es6中,let是定义变量,const是定义常量
const定义的是以后都不能修改的
新建一个HelloVuejs.html文件:
运行结果如下:
如果用js或者jQuery的逻辑方法写:
1.创建div元素,设置id属性
2.定义一个变量叫message
3.将message变量放在前面的div元素中显示
以上这种范式叫做命令式编程
但是我们刚才使用的两个大括号{{}}再加Vue的代码方式来写的,这就是用vue来管理div
即你只需要告诉我这里需要写什么东西就可以了,比如两个大括号{{}}
这种方式叫做声明式编程
如果我们想要添加属性,就直接添加逗号+属性名和属性值即可
运行结果如下:
这样做的好处:数据和界面可以实现完全分离
再来体验一下修改代码:
如果使用传统的js或者jQuery借着上面的3步来写:
4.修改message的数值:今天天气不错!
5.将修改后的数据再次替换到div元素
我们如果使用Vue来修改文字,可以直接修Vue代码段中的数值,HTML标签里的数值就会自动改变:
比如还是上面写的这个代码:
从浏览器中F12打开控制台,先拿到app.message
直接通过app.message = ‘要修改的值’ 回车后即可修改
以上就是我们对Vuejs的初体验
响应式:当数据发生改变的时候,界面会自动发生响应
代码做了什么事情?
1.我们来阅读JavaScript代码,会发现创建了—个Vue对象。
2.创建Vue对象的时候,传入了一些options:{} 参数
(1){}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
(2){}中包含了data属性︰该属性中通常会存储一些数据
①这些数据可以是我们直接定义出来的,比如像上面这样。
(0)

相关推荐

  • Go实战:Vue.js + Golang 组合打造应用

    GCTT:M1seRy Go语言中文网 2021-09-25 时间回到 2018 年,我写了一篇获得 15k 阅读的文章:Django + Angular 4 = A powerful Web app ...

  • 浅谈vue原理(一)

    哎,不知道多久之前说的要说说vue原理的,后来就忘记了,嘿嘿,这次就来看看vue的大概原理吧! 看过我博客的人应该知道,我不是很喜欢用那种太专业的术语的,喜欢用小白都能看懂的话来说,所以可能有的地方表 ...

  • js中in关键字的使用方法

    js中in关键字的使用方法

  • vue.js同一元素实现单击click和双击事件dblclick,执行不同功能

    做项目的时候,总是会遇见一个元素或者按钮在不同的需求下,需要做不同的功能处理. 在这里我们以table表为例,我这里是用的vue.js和element做的前端 如图所示:(可以单击姓名或者双击姓名) ...

  • 如何用vue-cli4.0构建多页面模板脚手架!?本文实战教你

    multipage Github地址 github.com/qinouz/mult- 基于 vue-cli4.0 构建 多页面 模板脚手架! 启动项目 git clone https://github ...

  • 得明亲子春令营初体验

    孩子身体的毛病,年龄越大,越难以根除,在无意识中影响他一生的发展,为解决这样的问题,得明健身在五一期间,特推出为期四天的,亲子春令营,锻炼.经络体检(建档并跟踪追访),给孩子一个健康光明的未来!!! ...

  • 【广东】夏雪晴《厨房初体验——凉拌海带丝》指导老师:林燕玲

    厨房初体验--凉拌海带丝 东华小学东城校区二年级 夏雪晴 一个风和日丽的早上,我开开心心地和外婆.妈妈一起去菜市场买菜,因为我今天要亲自尝试制作一道我最喜欢吃的美味菜肴--凉拌海带丝. 在制作之前,外 ...

  • 3千元贵在了哪?——贝纳利Tornado302赛道初体验

    前两天贝纳利正式发布了新款的飓风302,并以Tornado302的全新命名正式回归品牌,当然售价也回到了起初的29800元,在这个国产品牌降价的大潮,就有人质疑贝纳利是不是飘了? 品牌回归 29800 ...

  • 草堂小学之开学初体验

    成都学区房已获授权 本文是模仿另一篇热门文章<五朵金花小学的入读初体验-成师附小>,强行蹭热度. 开学已经2个多月了,草堂小学给我的总体感觉是那么好,放弃成外本部名额不亏. (请参考挨骂之 ...

  • 五朵金花之入读初体验——成师附小

    成都学区房已获授权 溜爸前言 这位家长是:跨城市搬到成都来读书的那种,之前还在东部一个沿海城市居住,现在已然来到成都,开始小学生活. 关于为什么要来成都,可查看这篇:上学是一件举家搬迁的事情,总要折腾 ...

  • Alibaba EasyExcel初体验

    简介 EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel.相对于Apache POI来说,EasyExcel是从磁盘上一行行 ...

  • 开塞露の初体验o(╥﹏╥)o

    姐不在江湖,但江湖却有姐的传说...... 我身体有一个鸡肋的生理本能,去到一个新的地方,开始的几天都很难排便. 刚上高中那阵子,要再学校住宿,周末才能回家. 这就让我那个神奇的生理特质兴奋过了头. ...

  • 雪落无声伴课来——网络教学初体验

    清晨,拉开窗帘,见天灰蒙蒙的,像笼着一层薄烟. 细细地观看,哦!是下雪了! 这雪,轻,柔,细,像柳絮一般,从空中缓缓地飘落下来,袅袅婷婷,轻柔曼妙. 低头,俯瞰楼下的路,路面已经被罩上了一层薄薄的雪, ...

  • 试驾初体验 女司机全方位感受范爷同款科雷嘉

    点击上方 e汽车 关注我们 文 | 饭冰冰 微信号 | eautocar 写在前面的话 这里没有高大上的试驾图,也没有专业的测评词汇,有的只是一个女司机的真实试驾初体验-- 试驾车辆:东风雷诺科雷嘉 ...