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/ 查看安装: $ ...
随机推荐
- runtime基础知识
看到一篇不错的runtime方面博客: 引言 相信很多同学都听过运行时,但是我相信还是有很多同学不了解什么是运行时,到底在项目开发中怎么用?什么时候适合使用?想想我们的项目中,到底在哪里使用过运行时呢 ...
- C++的精髓——虚函数
虚函数为了重载和多态的需要,在基类中是由定义的,即便定义是空,所以子类中可以重写也可以不写基类中的函数! 纯虚函数在基类中是没有定义的,必须在子类中加以实现,很像java中的接口函数! 虚函数 引入原 ...
- c# 去除文本的html标签
public static string ContentReplace(string input) { input = Regex.Replace(input, @"<(.[^> ...
- 动态规划之----我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形，总共有多少种方法？
利用动态规划,一共有n列,若从左向右放小矩形,有两种放置方式: 第一种:横着放,即占用两列.此时第二行的前两个空格只能横着放,所有,总的放置次数变为1+num(2*(n-2)),其中2*(n-2)代表 ...
- 使用RPM包安装、配置和拆卸MySQL
通过rpm包安装.配置及卸载mysql的详细过程. 以MySQL-server-4.0.14-0.i386.rpm为例,放在/usr/src目录下 cd /usr/src rpm -ivh MySQL ...
- Windows下Apache+Django+mod_wsgi的static和media问题处理
配置好了Apache可以访问Django工程了(参见前篇:Windows编译安装mod_wsgi,配合使用Django+Apahce) 但是Django中的static.media等文件Apache是 ...
- 英文SEO外部链接资源收集之常用的footprints
inurl:/privacy-policy "Using Article Directory plugin"inurl:/terms "Using Article D ...
- 一个opencv 博客 大量文章（老版本编写C ）
http://blog.csdn.net/Augusdi/article/category/747412
- 去掉tomcat中appBase默认的ROOT
我想修改tomcat的项目目录,写成绝对路径后,默认去找ROOT文件夹 怎么去掉呢 <Host name="localhost" appBase="E:\ceshi ...
- stock 当天盘势
看盘 (一)怎样看大盘当天的指数收阴.收阳 投资者每天都看大盘,但多数人看不准大盘.大盘到底当天是收阴,还是收阳?我通过很长时间的记录.验证,发现大盘在正常时间内,收阴.收阳是有规律的.我判断的准确率 ...