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的 ...
随机推荐
- 三级级联查询省份名称和编码(保证名称不重复)的SQL语句
三级级联查询省份名称和编码(保证名称不重复)的SQL语句 1.省份.地市和县级数据库表 2.SQL语句 SELECT DISTINCT t.`province_name`,t.`province_co ...
- Linux显示系统日期
Linux显示系统日期 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ date 2015年 01月 21日 星期三 20:37:39 CST
- 自用公共js文件
// 加载配置文件var instance = axios.create({ baseURL: 'http://zy-shop.tincent.me/Wechat/', headers: { 'Con ...
- STM32f4 ARM Bootloader
参考资料: 基于ARM 的嵌入式系统Bootloader 启动流程分析 Bootloader 详解 ( 代码环境 | ARM 启动流程 | uboot 工作流程 | 架构设计) Android系统启动 ...
- js运算符单竖杠“|”的用法和作用及js数据处理
js运算符单竖杠“|”的作用 很多朋友都对双竖杠“||”,了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用技巧,js小知识 , 这篇文章里面,js ...
- 自己写的,然后配合zepto+iscroll的上拉加载
/** * Created by jl on 2016/3/28. *///初始化绑定iScroll控件var actHtml="";var myScroll, pullUp ...
- jquery的过滤学习
$("p").eq(1) 匹配下标为1的p标签 $("p").hasClass("a")匹配所有p标签class中包含a的 ...
- Oracle定时任务小案例
需求简述 一个数据表中包含此数据的录入时间,此数据的初始状态是有效,五天后系统自动置该数据的状态为无效. 方案 写一个存储过程,用于更新字段(改状态): 写一个job,用于定时执行存储过程: 方案逻辑 ...
- WPF之DataContext(转)
WPF之DataContext(转) 有时候不是你不够聪明,而是别人教给你的东西太烂!相信自己! 这是我认为,目前网络上对“DataContext”解释最好的一篇文章,跟大家分享. 原文地址:http ...
- C# + Javascript 实现评论回复功能
首先先介绍一下前台 <script type="text/javascript"> function openWindow() { window.open(" ...