Vue.js起步
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起步的更多相关文章
- Vue.js 起步
通过实例来看下 Vue 构造器中需要哪些内容 测试时这段代码我直接写在index.html中 <!DOCTYPE html> <html> <head> <m ...
- 第五篇:vue.js起步
<div id="vue_det"> //使改动全部在指定的 div 内,div 外部不受影响 <h1>site : {{site}}</h1> ...
- Vue.js：起步
ylbtech-Vue.js:起步 1.返回顶部 1. Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) ...
- Vue.js官方文档学习笔记(一)起步篇
Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...
- Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...
- 公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...
- Vue.js 教程 -- 实例讲解
一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...
- （私人收藏）Vue.js手册及教程
(私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...
- Vue.js 2.x笔记：安装与起步（1）
1. 环境准备 Vue是一套用于构建用户界面的渐进式框架,设计为可以自底向上逐层应用.Vue 的核心库只关注视图层. 安装Node.js,下载:https://nodejs.org/ 查看安装: $ ...
随机推荐
- Windows快捷键大全（从XP到win8.1）
常见用法 F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F5 刷新 F10或ALT 激活当 ...
- iOS5新特性: Core Image 示例
iOS5给我们带来了很多很好很强大的功能和API.Core Image就是其中之一,它使我们很容易就能处理图片的各种效果,色彩啊,曝光啊,饱和度啊,变形啊神马的. 可惜苹果一直没能完善官方文档,也没有 ...
- Jenkins email-ext邮件通知模板
http://blog.csdn.net/houyefeng/article/details/51344337 示例 以html格式发送送如下内容:邮件内容为项目名称.构建次数.触发原因.构建日志前1 ...
- php 创建删除数据库
<?php $dbhost = 'localhost:3306'; $dbuser = 'root'; $dbpass = ''; $conn = mysql_connect($dbhost, ...
- 转：SQL Case when 的使用方法
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...
- hashmap源码
Java里各种基础容器的实现都是链表外加引用的形式.So,hashmap也不例外. 那小考虑下:hashmap是怎么产生的呢? 常用的两种数据结构数组和链表各有优劣,数组寻址容易,插入和删除困难:而链 ...
- heartbeat集群安装配置
安装配置高可用集群需要注意:1.节点名称:集群每个节点的名称都得能互相解析 /etc/hosts hosts主机名的正反解析结果必须跟"uname -n"的结果保持一致2.时间必须 ...
- loadrunner多负载机联合产生负载
解说一: 多机联合产生负载 LOADRUNNER 对应用程序施压时,采用的方法就是让一台机器模拟很多用户,同时向被 测用户发送请求或进行操作.这样,如果一台测试机器模拟的虚拟用户数过多,他本身性能的下 ...
- Polygone对象
Polylgon对象是由一个或多个Ring对象的有序集合,它可以是由单个Ring 对象构成,也可以使用多个Ring组成.Polygon通常用来代表有面积的多边形矢量对象,如行政区,建筑物等. 组成Po ...
- Ubuntu系统如何修改主机名
1.执行命令 hostname temp_name 这样主机名就改掉了.只不过重启后名字会恢复不一定使我们想要的.机器重启后会重新去读取/etc/hostname里面存储的主机名.所以如果想永久改掉的 ...