1.What is Vue.js?

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.引入

<script src="https://unpkg.com/vue/dist/vue.js">

在页面文件头加入上述代码,即可将Vue.js引入

3、声名式渲染

1)

<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>

这时候页面就会出现:

Hello Vue

注意:js代码必须在div的后面,否者js无法找到相应的节点对象,出现报错。

2)

<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
});

当我们将鼠标放置于文段上面,就会出现相应的时文字。

4、条件与循环

1)

<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});

加入我们将seen中设置为fasle,文字就会消失。

2)

<div id="app-4">
<ol>
<li v-for="e in List">
{{ e.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
List: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});

效果:

Learn JavaScript
Learn Vue
Build something awesome

5、处理用户输入

1)通过v-on 来进行用户页面交互

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});

我们会发现,点击按钮后,文字会反转。主要是因而调用js方法,改方法使其返回。

2)Vue 也提供了 v-model 指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});

通过上述代码,在input输入的信息都会显示在<p>标签中。

6、总结:

Vue.js是一个非常好的框架,使数据与视图之间的交互变得更加容易,能较少程序员在实现细节上的思考,更加专注地编写业务逻辑代码。

虽然上述代码只是官方例子照搬,但融入了个人的理解与描述,相对只是简单学习,这种方式有更加深刻的印象。同时,当我们忘记的时候,我们可以翻看博客,温故知新。

Reference:
[1] 介绍, http://doc.vue-js.com/v2/guide/

Vue.js之入门的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  2. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  3. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  4. Vue的理解:Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  5. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  6. Vue.js的入门

    介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...

  7. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  8. Vue.js 介绍入门

    Vue.js 的目标 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. ...

  9. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  10. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

随机推荐

  1. mysqlbinlog恢复误删数据

    概述 代码bug,在处理上传出现异常时执行了DELETE FROM t_resource WHERE resource_id = ? OR parent_id = ?因为OR条件导致用户的上传的所有数 ...

  2. PIE SDK Alpha通道数据渲染

    1.  功能简介 在计算机图形学中,一个RGB颜色模型的真彩图形,用由红.绿.蓝三个色彩信息通道合成的,每个通道用了8位色彩深度,共计24位,包含了所有彩色信息.为实现图形的透明效果,采取在图形文件的 ...

  3. crawler_app_在Airtest无线模式控制手机

    无线模式开启: adb tcpip 48887 参考引用:  https://www.cnblogs.com/xieqiankun/p/wireless-mode-of-poco.html

  4. 消息队列mq总结

    一.消息队列概述消息队列中间件是分布式系统中重要的组件,主要解决应用解耦,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构.目前使用较多的消息队列有ActiveMQ,RabbitM ...

  5. log4net 写数据到sql数据库

    最近需要把用户的一些行为添加到数据库中,所以想到了用log4net ,如果有别的好的方案,大家可以给我指正. 先看一下配置文件 我这个是控制台文件 app.config <layout type ...

  6. CDA数据分析【数据收集】

    一.机器收集数据 机器收集数据会从不同角度对数据进行抓取和采集,与之前手动收集数据不同,机器收集数据不再是用小样本.特定样本来采集和分析整体数据,而是采用大样本或整体数据进行分析,这打破了原来的数据分 ...

  7. MySQL 错误代码:2003 idea错误:ERROR DruidDataSource:1846 - create connection error

    idea项目一启动就报错: 20:01:13,047 ERROR DruidDataSource:1846 - create connection error com.mysql.jdbc.excep ...

  8. Django框架(三)-- orm增删改查、Django生命周期

    一.orm介绍 1.什么是orm ORM即Object Relational Mapping,全称对象关系映射. 2.使用orm的优缺点 优点: 不用写SQL语句 开发效率高 缺点: SQL的效率低 ...

  9. MySQL数据库(二)--库相关操作、表相关操作(1)、存储引擎、数据类型

    一.库相关操作 1.创建数据库 (1)语法 create database 数据库 charset utf8; (2)数据库命名规范 可以由字母.数字.下划线.@.#.$ 区分大小写 唯一性 不能使用 ...

  10. STL杂记

    STL介绍: 我所理解的stl: 容器: 是一种数据结构,如list,vector,和deques ,以模板类的方法提供.为了访问容器中的数据,可以使用由容器类输出的迭代器: 算法:  是用来操作容器 ...