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的 ...
随机推荐
- PCI设备内存操作函数总结
1. ExAllocatePool() 函数说明: ExAllocatePool allocates pool memory of the specified type and returns a ...
- 挖一挖不常用到而又很实用的重载-Split
Split这个基本上所有的程序开发人员都用到,一般使用单字符和长字符串拆分字符串的较多,其实还有一个重载非常好用,那就是多种组合字符来进行拆分. 例如: "aaaaaaaaaa{@}bbbb ...
- Flex报错之一
1.错误描述 TypeError: Error #1009: 无法访问空对象引用的属性或方法. at com.gwtjs.components::DetailWindow/completeHandle ...
- Red Hat Enterprise Linux 6 “桌面”、“工作站”、“服务器” 版本差异比较
Red Hat Enterprise Linux 6,共有三个版本.通过安装发现,所谓的"桌面"."工作站"."服务器"这三个版本的区别就在 ...
- Android APP开发入门教程-Button
代码编写 做好准备工作后,终于可以开始写我们的hello android了,在开始编写代码之前,我们先了解几个文件: res/layout/main.xml App主窗体布局文件,你的应用长什么样都在 ...
- filter()和find()的区别
<div class="css"> <p class="rain">测试1</p> </div> <div ...
- 异常-----freemarker.template.TemplateException:Error executing macro:mainSelect
1.错误描述 freemarker.template.TemplateException:Error executing macro:mainSelect require parameter:id i ...
- Hibernate最全面试题
Hibernate常见面试题 Hibernate工作原理及为什么要用? Hibernate工作原理及为什么要用? 读取并解析配置文件 读取并解析映射信息,创建SessionFactory 打开Sess ...
- Redis总结(七)Redis运维常用命令
redis 服务器端命令 redis 127.0.0.1:6380> time ,显示服务器时间 , 时间戳(秒), 微秒数 1) "1375270361" 2) &quo ...
- 魔改版ss-panel v3前端配置文件
配置文件所在目录:网站根目录/config/.config.php <?php // ss-panel v3 配置 // // !!! 修改此key为随机字符串确保网站安全 !!! $Syste ...