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. 如何将云上的Linux文件自动备份到本地服务器

    需求场景: 将云上一台Linux服务器文件备份到本地服务器,一周一备即可. 面对这样一个需求,我们可能面临下列几个问题, 备份方式:是云服务器推文件到本地服务器写入,还是本地服务器从云服务器拉文件?这 ...

  2. spring 核心容器

    核心容器包括了:Beans.Core.Context.SpEL 1. core和beans模块提供了整个框架最基础的部分,包括了IoC(控制反转)和Dependency Injection(依赖注入) ...

  3. LinQ in 写法

    有时候会碰到一个需求,又一堆id 1,2,3,4,循环遍历id再去数据库查不仅效率低,而且代码难看,可以用in来实现: string[] codes = item.ExamPaperCode.Spli ...

  4. pip 命令安装 rdbtools

    命令 pip install tdbtools 如果出现类似如下错误  Could not fetch URL https://pypi.org/simple/redis/ 说明morning的pip ...

  5. 1-RocketMq 学习 中文文档(一)

    原文:https://blog.csdn.net/weixin_40533111/article/details/84451096 1.基本概念及优势 rocketmq是一个基于发布订阅队列模型的消息 ...

  6. nginx配置ssl证书实现https

    一,环境说明 服务器系统:centos6 服务器IP地址:0.0.0.0 域名:bjubi.com 二,域名解析到服务器 在阿里云控制台-产品与服务-云解析DNS-找到需要解析的域名点“解析”,进入解 ...

  7. 2019-09-09 memcache

    什么是缓存呢???缓存就是存贮数据(使用频繁的数据)的临时地方缓存可以认为是数据的大池子 一.数据缓存这里所说的数据缓存是指数据库查询缓存,每次访问页面的时候,都会先检测相应的缓存数据是否存在,如果不 ...

  8. Python常用模块大全(转)

    os模块:os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有文件 os.chdir() 改变当前工作目 ...

  9. vue-cli随机生成port源码

    const portfinder = require('portfinder'): const port = await portfinder.getPortPromise(): 两行代码 端口搜索范 ...

  10. Elasticasearch Web管理工具-Cerebro

    cerebro是一个使用Scala,Play Framework,AngularJS和Bootstrap构建的开源(MIT许可)elasticsearch web管理工具.需要Java 1.8或更高版 ...