jQuery|中国人开发出来的一款框架,火遍全球,全世界很多人都在用( 二 )
二、Vue快速入门1Node和NPM
NPM是Node提供的模块管理工具 , 可以非常方便的下载安装很多前端框架 , 包括Jquery、AngularJS、VueJs都有 。
为了后面学习方便 , 我们先安装node及NPM工具 , 这个NPM就可以初步理解成Java中的maven工程 , 是一个管理工具 。
下载Node后安装 , 就会自带NPM了 。
NPM默认的仓库地址是在国外网站 , 速度较慢 , 建议大家设置到淘宝镜像 。 但是切换镜像是比较麻烦的 。
推荐一款切换镜像的工具:nrm
命令有很多 , 但看名字都很简单 , 做个汇总:
- 查看NPM版本命令:npm -v
- nrm安装命令:npm install nrm -g
- 查看npm的仓库列表命令:nrm ls
- 使用淘宝镜像源命令:nrm use taobao
- 测试速度命令:nrm test npm
- 测试淘宝:nrm test taobao
此时使用Static Web学习下Vue即可 ,
idea开发工具中可以下载vue插件 , 步骤为File-Setting-plugins , 再搜索vue安装即可 。
关于vue的使用 , 可以直接使用公共的CDN服务 , 我们这里使用npm安装 。
在idea的左下角 , 有个Terminal按钮:
这个窗口就等同于前面的dos窗口 , 现在直接在idea开发工具中了 , 使用起来很是方便 。
①项目初始化
命令:npm init -y 。
init即为初始化的意思 , -y表示yes确定的意思 , 初始化完成之后 , 会在项目目录下出现一个package.json文件 。
有对项目的基本描述信息 , 例如名称、版本等 , 这个就有点类似Java中的pom文件 。
②安装Vue
命令:npm install vue --save
安装后会在项目中出现node_modules目录 , 并且在其中会有一个vue目录 。
此时再查看package.json , 会发现变化:
这个package.json文件就和Java中的pom文件很类似 , vue就有点类似于Java的jar包 。
就连引入依赖的关键字都是一样的 , 这些配置完成 , 就可以使用vue进行开发了 。
三、Vue入门案例创建html文件 , 写一个入门案例:
首先导入项目目录中的vue , 这不用多说 。
①对应视图view
这里的视图就可以理解成这个div标签 , 其中它需要一个数据name , 需要从后台查询 。
格式:{{name , 注意有两个大括号 。
②对应模型model
当然这里只是快速学习 , 自己用一个写好的数据代替即可 , 并没有从数据库去查询 , 实际开发过程中是要去数据库查询的 。
- el:element的简写 , 通过id选择器确定模块 , 通过它将视图和模型绑定 。
- data:就是数据的意思 , 很好理解 。
前面我们也说过了VM:即View-Model , 它是指模型与视图间的双向操作 。
上面这个例子只是用model来渲染view , 那view如何修改model呢?
③对话框
推荐阅读
- 玩转电脑应用|办公、设计、开发者必备,比Rolan还好用的免费启动管理工具
- 太空梦想|赛事公告,2020“长安汽车杯”首届中国人因工程设计大赛
- 布谷安妮|电商直播平台开发多样性、内容化发展,5G时代
- W侃科技|联发科取消5nm芯片开发计划,竹篮打水?,因华为无法外购芯片
- 明叔聊科技|三大底牌将揭晓,不再害怕技术限制,华为开发者大会即将来临
- 二氧化碳|植物不够,科技来凑,科学家开发人工光合作用,地球气候有救了?
- 政和通|烟台经济技术开发区科技服务行业联合党委再出击助力企业科技转型
- 挖贝网|开发大量新产品,鸿宝科技2020年上半年净利122.47万增长51%
- 移动支付|德国小伙:中国人太纯真,还在用移动支付,却不知它并不安全
- 某闲人|中国人击毙的第一个日本大将,谁击毙的!,抗战时