Vue.js之入门
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之入门的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue的理解:Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js的入门
介绍 vue.js 是一个客户端js库,可以用来开发单页应用.为了一个项目的选型,我前前后后的看了angular.react.vuejs ,对前两者是佩服,对后者是爱.因为它简洁干净利索,并且还有高大 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js 介绍入门
Vue.js 的目标 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
随机推荐
- W tensorflow/core/util/ctc/ctc_loss_calculator.cc:144] No valid path found 或 loss:inf的解决方案
基于Tensorflow和Keras实现端到端的不定长中文字符检测和识别(文本检测:CTPN,文本识别:DenseNet + CTC),在使用自己的数据训练这个模型的过程中,出现如下错误,由于问题已经 ...
- table布局 常见问题总结
table实用属性: 属性 值 作用 描述 table-layout auto 自动计算列宽 对table和td.th指定的宽度无效 浏览器会计算所有单元格的内容宽度才能得出一列宽度 (默认值) fi ...
- Dapper学习(一)之Execute和Query
Dapper是一个用于.NET的简单的对象映射,并且在速度上有着轻ORM之王的称号. Dapper扩展IDbConnection,提供有用的扩展方法来查询数据库. 那么Dapper是怎样工作的呢? 总 ...
- vertx 异步编程指南 step7-保护和控制访问
保护和控制访问与Vert.x很容易.在本节中,我们将: 从HTTP转移到HTTPS,以及 使用基于组的权限将用户身份验证添加到Web应用程序,以及 使用JSON Web令牌(JWT)控制对Web AP ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- sigaction信号处理
1. sigaction int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); signu ...
- 个人项目-wc
个人项目-WC (C语言) 一.Github地址:https://github.com/Lin-J-F/WC 二.PSP表格 PSP2.1 Personal Software Process St ...
- springboot搭建dubbo+zookeeper简单案例
背景:只是自己使用单机版zookeeper搭建dubbo的一个学习案例,记录成功的过程 1.搭建zookeeper坏境 使用docker来构建环境 1.1 拉取镜像:docker pull zooke ...
- Odoo中的字段显示方式和行为控制
在odoo的视图中,字段都是通过widget来控制显示效果和行为的. 一般情况下,不同类型的字段odoo会使用默认的widget来显示和控制它的行为. options以一种JSON对象的形 ...
- PHP的SOLID设计原则
SOLID Design Principles, 这是一个比设计模式更高级别的概念, 以构建良好代码为目标,真正掌握了就是大师级别了. 我~~~仅知晓~ /*SOLID Design Principl ...