使用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. PCI设备内存操作函数总结

    1.  ExAllocatePool() 函数说明: ExAllocatePool allocates pool memory of the specified type and returns a ...

  2. 挖一挖不常用到而又很实用的重载-Split

    Split这个基本上所有的程序开发人员都用到,一般使用单字符和长字符串拆分字符串的较多,其实还有一个重载非常好用,那就是多种组合字符来进行拆分. 例如: "aaaaaaaaaa{@}bbbb ...

  3. Flex报错之一

    1.错误描述 TypeError: Error #1009: 无法访问空对象引用的属性或方法. at com.gwtjs.components::DetailWindow/completeHandle ...

  4. Red Hat Enterprise Linux 6 “桌面”、“工作站”、“服务器” 版本差异比较

    Red Hat Enterprise Linux 6,共有三个版本.通过安装发现,所谓的"桌面"."工作站"."服务器"这三个版本的区别就在 ...

  5. Android APP开发入门教程-Button

    代码编写 做好准备工作后,终于可以开始写我们的hello android了,在开始编写代码之前,我们先了解几个文件: res/layout/main.xml App主窗体布局文件,你的应用长什么样都在 ...

  6. filter()和find()的区别

    <div class="css"> <p class="rain">测试1</p> </div> <div ...

  7. 异常-----freemarker.template.TemplateException:Error executing macro:mainSelect

    1.错误描述 freemarker.template.TemplateException:Error executing macro:mainSelect require parameter:id i ...

  8. Hibernate最全面试题

    Hibernate常见面试题 Hibernate工作原理及为什么要用? Hibernate工作原理及为什么要用? 读取并解析配置文件 读取并解析映射信息,创建SessionFactory 打开Sess ...

  9. Redis总结(七)Redis运维常用命令

    redis 服务器端命令 redis 127.0.0.1:6380> time  ,显示服务器时间 , 时间戳(秒), 微秒数 1) "1375270361" 2) &quo ...

  10. 魔改版ss-panel v3前端配置文件

    配置文件所在目录:网站根目录/config/.config.php <?php // ss-panel v3 配置 // // !!! 修改此key为随机字符串确保网站安全 !!! $Syste ...