使用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探索历程(一)的更多相关文章

  1. 从ServerSwitch到SONiC Chassis:数据中心交换机技术的十年探索历程

    从ServerSwitch到SONiC Chassis:数据中心交换机技术的十年探索历程 2019-07-09 | 作者:白巍   编者按:微软交换机操作系统开源项目SONiC (Software f ...

  2. 后端狗的Vue学习历程(一) - demo示例与基本逻辑语法

    目录 demo的三部分结构 判断:v-if.v-else-if.v-else 循环:v-for 事件绑定 v-on:eventType 内容输入的双向绑定v-model 源码:Github demo的 ...

  3. 关于学习Vue的前置工作/技术储备

    关于学习Vue的前置工作/技术储备 1.GitBatch 2.Sublime Text 3.Node-----npm 命令 本人用的idea GitBatch: GitBatch是一个可以编写shel ...

  4. iOS自动化测试驱动工具探索

    本文主要介绍了字节 iOS 自动化测试驱动工具的探索过程及实现原理 作者:字节跳动终端技术--陈友辉 一.背景 随着业务的扩张,单个 App 的功能越来越多,工程复杂度越来越高,每天MR可达上百次,代 ...

  5. net start mysql

    net start mysql 解决的方法: 如何以管理员身份打开黑窗口 左下角开始菜单,找到小娜,cmd 回车, 命令提示符右击,以管理员身份打开 依次输入下面两行代码 mysqld -instal ...

  6. pandas应用之分组因子暴露和分位数分析

    pandas应用之分组因子暴露和分位数分析 首先感谢原书作者Mes McKinney和batteryhp网友的博文, 俺在此基础上继续探索python的神奇功能. 用A股的实际数据, 以书里的代码为蓝 ...

  7. Eclipse in Ubuntu16.04LTS Final Beta

    #2016.03.30 在虚拟机Ubuntu16.04LTS上,用Eclipse编写运行Java,就目前而言,实在不是明智之举.卡顿极其厉害,还是在物理机上运行吧.那么继续Ubuntu的探索历程. 用 ...

  8. Android 性能测试之方向与框架篇

    假期结束,你的状态有没有回归?那么,放空脑袋后,先来学习学习,欢迎大家继续关注腾讯云技术社区. 作者:李帅 导语 借项目的开发周期,把思考了一段时间的场景化性能测试框架搭建起来,包括 耗电性能测试.内 ...

  9. 上海2017QCon个人分享总结

    有幸作为讲师受邀参加InfoQ在上海举办的QCon2017,不得不说,不论是从讲师还是听众的角度衡量,QCon进一步扩大了技术视野.虽然前端专题只有四场,但每一场分享都是目前的热门话题.并且Qcon的 ...

随机推荐

  1. 三级级联查询省份名称和编码(保证名称不重复)的SQL语句

    三级级联查询省份名称和编码(保证名称不重复)的SQL语句 1.省份.地市和县级数据库表 2.SQL语句 SELECT DISTINCT t.`province_name`,t.`province_co ...

  2. Linux显示系统日期

    Linux显示系统日期 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ date 2015年 01月 21日 星期三 20:37:39 CST

  3. 自用公共js文件

    // 加载配置文件var instance = axios.create({ baseURL: 'http://zy-shop.tincent.me/Wechat/', headers: { 'Con ...

  4. STM32f4 ARM Bootloader

    参考资料: 基于ARM 的嵌入式系统Bootloader 启动流程分析 Bootloader 详解 ( 代码环境 | ARM 启动流程 | uboot 工作流程 | 架构设计) Android系统启动 ...

  5. js运算符单竖杠“|”的用法和作用及js数据处理

    js运算符单竖杠“|”的作用 很多朋友都对双竖杠“||”,了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用技巧,js小知识 , 这篇文章里面,js ...

  6. 自己写的,然后配合zepto+iscroll的上拉加载

    /** * Created by jl on 2016/3/28. *///初始化绑定iScroll控件var actHtml="";var myScroll,    pullUp ...

  7. jquery的过滤学习

    $("p").eq(1)  匹配下标为1的p标签        $("p").hasClass("a")匹配所有p标签class中包含a的 ...

  8. Oracle定时任务小案例

    需求简述 一个数据表中包含此数据的录入时间,此数据的初始状态是有效,五天后系统自动置该数据的状态为无效. 方案 写一个存储过程,用于更新字段(改状态): 写一个job,用于定时执行存储过程: 方案逻辑 ...

  9. WPF之DataContext(转)

    WPF之DataContext(转) 有时候不是你不够聪明,而是别人教给你的东西太烂!相信自己! 这是我认为,目前网络上对“DataContext”解释最好的一篇文章,跟大家分享. 原文地址:http ...

  10. C# + Javascript 实现评论回复功能

    首先先介绍一下前台 <script type="text/javascript"> function openWindow() { window.open(" ...