Vue探索历程(一)
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单,先看看几个例子:
例一:Helloworld
html代码:
let arr = [1,2,3]
<div id="app">
{{ message }}
</div>
js代码:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
例二:双向绑定
说明:html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。
html代码:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js代码:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
例三:渲染列表
说明:v-for表示遍历集合数据,下面的代码遍历集合todos并输出每项。
html代码:
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
js代码:
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
例四:事件绑定
说明:v-on是vue.js特性,表示绑定事件方法。
html代码:
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
js代码:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
看完上面的4个例子,感觉vue.js挺容易入门,确实是这样,不得不说vue.js深受开发人员喜爱,简单易学。前面的例子只是展示了如何使用vue.js,但它到底包含了哪些功能?vue.js提供了两大核心功能:响应的数据绑定、视图组件化。接下来我们看看vue.js是怎么定义这两大功能的。
Vue探索历程(一)的更多相关文章
- 从ServerSwitch到SONiC Chassis:数据中心交换机技术的十年探索历程
从ServerSwitch到SONiC Chassis:数据中心交换机技术的十年探索历程 2019-07-09 | 作者:白巍 编者按:微软交换机操作系统开源项目SONiC (Software f ...
- 后端狗的Vue学习历程(一) - demo示例与基本逻辑语法
目录 demo的三部分结构 判断:v-if.v-else-if.v-else 循环:v-for 事件绑定 v-on:eventType 内容输入的双向绑定v-model 源码:Github demo的 ...
- 关于学习Vue的前置工作/技术储备
关于学习Vue的前置工作/技术储备 1.GitBatch 2.Sublime Text 3.Node-----npm 命令 本人用的idea GitBatch: GitBatch是一个可以编写shel ...
- iOS自动化测试驱动工具探索
本文主要介绍了字节 iOS 自动化测试驱动工具的探索过程及实现原理 作者:字节跳动终端技术--陈友辉 一.背景 随着业务的扩张,单个 App 的功能越来越多,工程复杂度越来越高,每天MR可达上百次,代 ...
- net start mysql
net start mysql 解决的方法: 如何以管理员身份打开黑窗口 左下角开始菜单,找到小娜,cmd 回车, 命令提示符右击,以管理员身份打开 依次输入下面两行代码 mysqld -instal ...
- pandas应用之分组因子暴露和分位数分析
pandas应用之分组因子暴露和分位数分析 首先感谢原书作者Mes McKinney和batteryhp网友的博文, 俺在此基础上继续探索python的神奇功能. 用A股的实际数据, 以书里的代码为蓝 ...
- Eclipse in Ubuntu16.04LTS Final Beta
#2016.03.30 在虚拟机Ubuntu16.04LTS上,用Eclipse编写运行Java,就目前而言,实在不是明智之举.卡顿极其厉害,还是在物理机上运行吧.那么继续Ubuntu的探索历程. 用 ...
- Android 性能测试之方向与框架篇
假期结束,你的状态有没有回归?那么,放空脑袋后,先来学习学习,欢迎大家继续关注腾讯云技术社区. 作者:李帅 导语 借项目的开发周期,把思考了一段时间的场景化性能测试框架搭建起来,包括 耗电性能测试.内 ...
- 上海2017QCon个人分享总结
有幸作为讲师受邀参加InfoQ在上海举办的QCon2017,不得不说,不论是从讲师还是听众的角度衡量,QCon进一步扩大了技术视野.虽然前端专题只有四场,但每一场分享都是目前的热门话题.并且Qcon的 ...
随机推荐
- [Err] 1136 - Column count doesn't match value count at row 1
1 错误描述 [Err] 1136 - Column count doesn't match value count at row 1 Procedure execution failed 1136 ...
- Java常量定义
Java常量定义 /** * char 类型常量 */ private static final char CHAR = 'A'; /** * byte 类型常量 */ private static ...
- 双硬盘RAID 0全攻略
. RAID53 RAID7即高效数据传送磁盘结构,是RAID3和带区结构的统一,因此它速度比较快,也有容错功能.但价格十分高,不易于实现. 为什么需要磁盘阵列 如何增加磁盘的存取(ac ...
- Axure RP一个专业的快速原型设计工具
Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure简要介绍 Axur ...
- 关于ios手机游览器针对overflow:hidden设置无效的解决办法
Ordinarily, overflow: hidden; on the body tag is sufficient to prevent scrolling a web page, if for ...
- 【BZOJ1911】【APIO2010】特别行动队(斜率优化,动态规划)
[BZOJ1911][APIO2010]特别行动队 题面 Description 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 n 编号, 要将他们拆分成若干特别行动队调入战场.出于默契的考 ...
- [Luogu2973][USACO10HOL]赶小猪
Luogu sol 首先解释一波这道题无重边无自环 设\(f_i\)表示\(i\)点上面的答案. 方程 \[f_u=\sum_{v,(u,v)\in E}(1-\frac PQ)\frac{f_v}{ ...
- 关系型数据库工作原理-查询优化器(翻译自Coding-Geek文章)
本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...
- 查询Date时时间查询不出来
今天项目开发时,遇到了一个小问题,就是使用Hibernate用sql查询时,查询不出来时间部分, 网上没有找到答案,最终使用:to_char(sx.createtime,'yyyy-MM-dd hh2 ...
- .Net Remoting使用总结
刚开始接触Remoting的时候,有点排斥,我都使用过webservice,wcf.以及rest.想一想,Remoting是不是过时了?由于公司前辈的缘故,公司的产品用的就是Remoting,那时候w ...