Vue.js是一套构建用户界面的 渐进式框架,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子

你可以查看安装指南来了解其他安装 Vue 的选项。请注意我们不推荐新手直接使用 vue-cli,尤其是对 Node.js 构建工具不够了解的同学。

第一个例子:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> </head>
<body>
<div id="app">
{{ message }}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>

index.js

window.onload=function() {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
}

  

实例二:v-bind 属性被称为指令

指令带有前缀 v-,以表示它们是 Vue.js 提供的特殊属性。它们会在渲染过的 DOM 上应用特殊的响应式行为。

这个指令的简单含义是说:将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

<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()
}
});

  

条件与循环

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> </head>
<body>
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>

  

var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})

  

这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。而且,Vue.js 也提供一个强大的过渡效果系统,可以在 Vue 插入/删除元素时自动应用过渡效果

也有一些其它指令,每个都有特殊的功能。例如, v-for 指令可以绑定数据到数组来渲染一个列表

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>

  

var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
});

  

处理用户输入

为了让用户和你的应用进行互动,我们可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法

<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('')
}
}
});

  

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!'
}
})

  

用组件构建(应用)

<div id="app-7">
<ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
<!--使用 v-bind 指令将 todo 传到每一个重复的组件中:-->
<!--groceryList中的每一个text(其实是item)传给todo(其实是li的属性)-->
</ol>
</div>

  先遍历groceryList的每一条,这里把每一条设置为item,v-for="item in groceryList";遍历好后,把每一条item,v-bind给todo(todo是lodo-itm,也就是li的一个属性),然后再给魔板里的li填充内容为todo.text,也就是item的每一条内容,也就是groceryList里面的text的每一条内容。

Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
});

  本文是在官方文档

Vue.js起步的更多相关文章

  1. Vue.js 起步

    通过实例来看下 Vue 构造器中需要哪些内容 测试时这段代码我直接写在index.html中 <!DOCTYPE html> <html> <head> <m ...

  2. 第五篇:vue.js起步

    <div id="vue_det"> //使改动全部在指定的 div 内,div 外部不受影响 <h1>site : {{site}}</h1> ...

  3. Vue.js:起步

    ylbtech-Vue.js:起步 1.返回顶部 1. Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) ...

  4. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  5. Vue.js 2.0 学习重点记录

      Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...

  6. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  7. Vue.js 教程 -- 实例讲解

    一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...

  8. (私人收藏)Vue.js手册及教程

    (私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...

  9. Vue.js 2.x笔记:安装与起步(1)

    1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ ...

随机推荐

  1. 初学.net 网页打开过程

    一个网页打开的过程 1.进入控制器里的方法里  控制器的命名必须以Controll结尾前面的名字要和view层的命名一致 2.控制器完了以后 就进入view层对应的视图里 3.视图里调用model   ...

  2. 【转】对于JNI方法名,数据类型和方法签名的一些认识

    [转]对于JNI方法名,数据类型和方法签名的一些认识   之前一直用jni,但是没有考虑Java重载函数,如何在jni-C++里命名,今天看到一篇文章,讲到了类型签名. 原文链接:http://www ...

  3. 关于js向jsp中传输中文乱码问题

    最近做项目遇到的js向jsp中传中文结果是乱码,不知道是否是我换了用eclipse的原因还是什么,以前用的MyEclipse反正最后解决办法如下: 1.把js文件复制到桌面: 2.打开文件并用另存为u ...

  4. 转载 Deep learning:四(logistic regression练习)

    前言: 本节来练习下logistic regression相关内容,参考的资料为网页:http://openclassroom.stanford.edu/MainFolder/DocumentPage ...

  5. ajax2016/4/15 post与get

    post方式,数据放在send()里面作为参数传递 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); ...

  6. android 5.0新特性学习--视图阴影

    android 5.0的视图阴影主要是体验出层次性,就是在一个物体上面叠加上一层的设计,而这种设计就是除了传统的,x,y的纸面层,还有就是透过纸面的z轴的层次设计. elevation: 高度,静态属 ...

  7. android 在代码中使用 #ffffff 模式 设置背景色

    differentsum.setBackgroundColor(Color.parseColor("#F3733F"));

  8. ratingbar设置不可调节星星数量

    <RatingBar android:id="@+id/rb_bar" android:layout_width="wrap_content" andro ...

  9. hibernate事务并发问题(脏读,不可重复读,幻读)

    脏读  dirty read:  读了别的事务没有提交的事务, 可能回滚, 数据可能不对. 不可重复读 non repeatable read: 同一个事务里前后读出来的数据不一样, 被另一个事务影响 ...

  10. 表达式语言--在MVC中应用表达式语言

    之前讲解的MVC设计模式中一直有DAO存在,而且所有的对象都保存在VO之中,那么这时如果将一个VO传递到JSP文件中,那么JSP需要导入VO包,如果使用表达式语言的话,导入VO包就没有任何意义了. V ...