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/ 查看安装: $ ...
随机推荐
- Bill Total Value
Bill Total Value time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- XCode: duplicate symbol
XCode: duplicate symbol 2013-05-27 17:28:21| 分类: iOS|字号 订阅 遇到引用库重复定义的问题,需要解决. 项目需要,同时引用ZBar和Q ...
- div里面的margin-top失效
div标签中的元素margin-top失效的解决方法 元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效,下面有个不错的解决方法, ...
- Udp发送
string message = "0302"; byte[] sendbytes = Encoding.ASCII.GetBytes(message); remoteIpep = ...
- java 使用对象
class XiyoujiRenwu { float height,weight; String head, ear; void speak(String s) { head="歪着头&qu ...
- struts1,struts2,hibernate,spring的运行原理结构图
一.struts1运行原理 1.初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总控制器会读取配置文件(s ...
- jquery选择器 之 获取父级元素、同级元素、子元素（转）
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...
- Win下安装Cygwin中的SSH服务
windows和linux各有其优越性,可以安装在同一台电脑上,但切换要重启.同时拥有两台电脑,一台装win,一台装linux,自然非常好,但具备此条件的不多.本文介绍cygwin,它可以让你在win ...
- MDK下调试时提示AXF文件无法导入的解决方法（转）
源:http://blog.163.com/zhaojun_xf/blog/static/3005058020117784643555/ 在开发ARM项目中,很多工程师都不太喜欢使用MDK的调试模式, ...
- i2c的时钟延展问题（转）
源:http://blog.csdn.net/zyboy2000/article/details/7636769 结论: (即在模拟i2c主:在主设置SCL为高后,要超时判断SCL是否为高,再发后面的 ...