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/ 查看安装: $ ...
随机推荐
- kinect for windows - DepthBasics-D2D详解
引自:http://blog.csdn.net/itcastcpp/article/details/20282667 Depth在kinect中经常被翻译为深度图,指的是图像到摄像头的距离,这些距离数 ...
- python注意事项
以下基于python3.4.3 1.python3与python2不兼容 2.python语言正确的缩进很重要!事实上缩进是种语法 C中需要 { } 的的地方,python使用 : +缩进 实现 3. ...
- php 四种基础的算法 ---- 冒泡排序法
1. 冒泡排序法 * 思路分析:法如其名,就是像冒泡一样,每次从数组当中 冒一个最大的数出来. * 比如:2,4,1 // 第一次 冒出的泡是4 * ...
- jquery获得select的文本
本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...
- Android中Edittext的属性
//此为转载别人的,挺不错的 1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password="true" ...
- seo步骤
1. 关键词.找trends主词.去渣渣.(扩展).(去重tool sort) .打乱 :https://adwords.google.com/https://www.google.com/trend ...
- springMVC如何访问静态文件
在进行Spring MVC的配置时,通常我们会配置一个dispatcher servlet用于处理对应的URL.配置如下:<servlet><servlet-name>mvc- ...
- Ubuntu系统搭建PPTP，VPN
1.先安装pptp apt-get install pptpd 2.打开pptp的DNS vim /etc/ppp/option.pptpd 去掉下面两行内容前的# ms-dns 8.8.8.8 ms ...
- 4-20ma转 0-5V
源:4-20ma转 0-5V 关于4-20ma转0-5v------解决方案--------------------------------------------------------恒流源(内阻 ...
- [jQueryUI] – Chosen：select下拉选择框美化插件及问题
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...