01Vue.js快速入门(一)Vue概念及Helloworld
1.1. Vue简介
Vue
是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方式都很有创新,另外Vue自身的一些绑定的语法、用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。
详情请参考Vue官网
1.2. Vue的入门demo
Vue
可以直接把它当做一个js库使用,所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。
比如:我们有一个需求,一个网页上一个Div标签,我们有一个json对象存储数据,把json对象上的数据放到Div上去。
接下来是步骤:
第一步: 创建一个文件夹并创建一个html文件 比如:index.html.
当如你可以选择你自己的编辑器,我就用VSCode。第二步:引入Vue库
<script src="https://unpkg.com/vue/dist/vue.js"></script>
当然了你可以直接下载Vue的js文件,推荐你直接用上面的cdn即可。第三步:创建一个Div,给它一个id,比如:app第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。
最终的代码如下:
<!DOCTYPE html> <!--第一步:创建文件夹及html文件-->
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之Helloworld</title><!--第二步:引入Vue库--><script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body><!--第三步:创建一个Div--><div id="app"><!--Vue的模板的绑定数据的方法, 类似于很多其他前端的模板,可以用两对花括号进行绑定Vue中的数据对象的属性 -->{{ message }}</div><!--第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。--><script>var app = new Vue({ // 创建Vue对象。Vue的核心对象。el: '#app', // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器data: { // data: 是Vue对象中绑定的数据message: 'Hello Vue!' // message 自定义的数据}});</script>
</body>
</html>
最终的结果就是:
Hello Vue!
1.3. Vue的Helloworld总结
Vue构造函数的:选项el属性,就是element缩写,当前Vue对象挂载到哪个标签上的语法,支持CSS选择器或者dom对象,一般用id选择器选择当前页面的标签。
Vue的选项:data属性是自定义数据。这里我们只是演示了一个message属性,vue会把自定义的数据可以与html的模板数据进行绑定。
Vue 数据绑定的方式就是用
{{}}
,类似于handlebars.上面这个demo就是演示了Vue的绑定数据的基本模型。注意点,标签先创建好了之后,再创建Vue对象,具体你应该懂吧。
联系老马
对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码
01Vue.js快速入门(一)Vue概念及Helloworld相关推荐
- vue.js快速入门
以前看到多少天学习系列,我都深感烦躁,短短几天怎么可以精通,那是对于他们而言.但是,今天我要写一个快速入门,本人觉得还是有一点用处,因为,我不可能在一天之内精通某种东西,却可以在一两小时入门. 回到v ...
- (vue基础试炼_01)使用vue.js 快速入门hello world
文章目录 一.需求案例 二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法 三.案例vue简述? 四.案例趣味延伸 五.表达值作用及嘱咐语 一. ...
- Vue.js快速入门之八:实现登录功能
系统登录是指用户必须提供满足一定条件的信息后,才可以进入系统.最早系统一般是指用户名和密码,如今,登录方式已多元化,系统一般登录方式有:用户名+密码.二维码扫码登录.第三方授权登录.手机号+短信登录等 ...
- 54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础 能够与后端程序员更加紧密的配合 ...
- TensorFlow.js快速入门
by Pau Pavón 通过保罗·帕文(PauPavón) TensorFlow.js快速入门 (A quick introduction to TensorFlow.js) TensorFlow ...
- QT Creator快速入门读书笔记:新建HelloWorld工程
窗口部件 QMainWindow是带有菜单栏和工具栏的主窗口类,QDialog是各种对话框的基类,QWidget类是所有用户界面对象的基类,被称为基础窗口部件.QWidget继承自QObject类和Q ...
- Vue.js快速入门之五:Mockjs的使用和语法详解
在前后端分离的开发中,需要前后台同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在.所以开发初始前端会使用模拟数据,这里使用是mockjs. Mo ...
- Three.js快速入门
ThreeJS快速入门 ThreeJS开发 学习准备 安装 基本使用 效果图 控制器 物体移动 效果图 物体缩放与旋转 Clock跟踪时间 Gsap动画 自适应 Gui 效果图 BufferGeome ...
- doodoo.js快速入门教程
快速入门 我们通过3步演示如何快速创建一个doodoo项目 第一步 # 创建doodoo-demo目录 mkdir doodoo-demo && cd doodoo-demo# 初始化 ...
最新文章
- nginx web服务理论与实战
- 机器学习和图像识别是怎样彻底改变搜索的?
- 二十七、Node.js搭建第一个Express应用框架
- BZOJ1026 [SCOI2009]windy数 数位dp
- Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出
- Lync开发实例3—自定义客户端
- LMS赛区公告:DG战队因假赛被永久除名
- windows linux复制文件夹命令,ubuntu下复制目录和文件的指令以及和windows下的copy方式...
- 元宵节正月十五素材图片,可以做壁纸高清!
- Visual Studio Code 1.43 发布
- Bootstrap 图片
- 老话题:自己编写只截窗口客户区的截屏软件(VB2010)
- 开关电源BOOST升压原理
- java.net.ConnectException no available server
- 关于显示屏分辨率的问题
- itools3.0服务器维护,APP Store失联?iTools3.0告诉你如何解决
- Excel序号类操作实例
- 爱伦·坡:写作的哲学
- spring boot 集成xxl-job 学习总结
- Localization of Classified Objects in SLAM using NonparametricStatistics and Clustering(2018,IROS)