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. 异步编程的类型系统:promise & future & closure & observable----异步编程类型的结构和操作

    异步编程类型的结构和操作. 上下文维护. A promise represents the eventual result of an asynchronous operation. The prim ...

  2. JAVA学习之开发环境配置

    JAVA SDK 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 版 ...

  3. asp.net core MVC 入门学习

    前言 .net core 已经更新到2.0以上的版本了,今天才开始正式接触,深为程序员,丢脸了,作为无所不能的IT人,我着手折腾一下这个跨平台的开发框架. (转载自百度百科).NET Core 是.N ...

  4. PLSQL 登录时弹出(没有登录)空白提示框

    如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上 重启pls ...

  5. cin快读

    ios::sync_with_stdio(false); \\取消同步,cin,cout的速度就不慢了!!

  6. Vue详细介绍模板语法和过滤器的使用!

    表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...

  7. 【开发工具】- Xshell过期了怎么办?

    点击下边链接下载免费版 http://www.netsarang.com/download/free_license.html

  8. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  9. 联盟链IBM的超级账本Hyperledger Fabric框架,JP Morgan’s Quorum

    联盟链IBM的超级账本Hyperledger Fabric框架,JP Morgan’s Quorum JP Morgan’s Quorum https://www.coindesk.com/jpmor ...

  10. WorkFlow三:CLASS事件触发工作流

    1.创建关键字段结构.这里没有新建,使用前面创建的结构: 2.SE24创建类:保存激活. 3.接口里添加IF_WORKFLOW并激活.(其他两个激活就出现了,不用管) 4.在属性页签中定义两个属性,其 ...