前提：

你已有 HTML、CSS 和 JavaScript 中级前端知识。



概念：

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

关于渐进式，可以理解为：提供选择而尽量降低限制，即你可以选择只用Vue核心实现视图层（状态到界面的映射和组件），而其他的用与Vue无关的技术。或者用核心库以及其他的Vue配套工具，核心虽然只解决一个很小的问题，但它们有生态圈及配套的可选工具，当你 把他们一个一个加进来的时候，就可以组合成非常强大的栈，就可以涵盖其他的这些更完整的框架所涵盖的问题。这种弹性的选择既是其渐进性。

关于自底向上设计，我的理解是（未必对）：设计过程不是由页面到组件，而是由组件到页面。

要进一步理解，这篇文章要读一下：http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484393&idx=1&sn=142b8e37dfc94de07be211607e468030&chksm=9723612ba054e83db6622a891287af119bb63708f1b7a09aed9149d846c9428ad5abbb822294&mpshare=1&scene=1&srcid=1026oUz3521V74ua0uwTcIWa&from=groupmessage&isappinstalled=0#wechat_redirect&utm_source=tuicool&utm_medium=referral



进入动手阶段：

首先提供一个可以在浏览器上直接跑的小页面，需要有网。

这段程序的目的是让你可以找一个环境测试自己写的小段的Vue代码。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Index Page</title>

</head>

<body>

  <form action="" id="demo">

    <input type="text" value="调试 vuejs 2.0" ref="input1">

    <a href="javascript:void(0)" v-on:click="test1">测试</a>

    <br>

    <span>{{ result1 }}</span>

    <br>

    <input type="text" v-model="input2">

    <a href="javascript:void(0)" v-on:click="test2">测试</a>

    <br>

    <span>{{ result2 }}</span>

  </form>

  <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>

  <script type="text/javascript">

  	new Vue({

    el: "#demo",

    data: {

        result1: null,

        result2: null,

        input2: ""

    },

    created: function() {

        // the created hook is called after the instance is created

    },

    methods: {

        test1: function () {

            this.result1 = this.$refs.input1.value + " 成功!";

        },

        test2: function () {

            this.result2 = this.input2 + " 成功!";

        }

    }

})

  </script>

</body>

</html>

或者你更喜欢在线编辑，测试，那我给你网址：

https://jsfiddle.net/chrisvfritz/50wL7mdz/



组件系统是

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：



[img]







[/img]

js中定义组件，body里即可用自定义组件。

Vue基础概念，学习环境等的更多相关文章

  1. Java基础学习之基础概念与环境搭建（1）

    1.Java基础概念 1.1.Java语言的特点 Java语言是简单易学的 Java语言是面向对象(封装.继承和多态) Java语言是平台无关的(一次编译,到处运行) Java语言是可靠的.安全的(异 ...

  2. (转载)小白的linux设备驱动归纳总结（一）：内核的相关基础概念---学习总结

    1. 学习总结 小白的博客讲的linux内核驱动这一块的东西比较基础,因此想通过学习他的博客,搭配着看书的方式来学习linux内核和驱动.我会依次更新在学习小白的博客的过程的感悟和体会. 2.1 内核 ...

  3. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

  4. Elasticsearch技术解析与实战（一）基础概念及环境搭建

    序言 ES数据架构的主要概念(与关系数据库Mysql对比) 集群(cluster) 集群,一个ES集群由一个或多个节点(Node)组成,每个集群都有一个cluster name作为标识.一下是我们的4 ...

  5. vue 基础核心学习

    <html> <body> <div id="app"> {{ message }} </div> <div id=" ...

  6. Vue 基础的开发环境

    本期节目将手把手教你去 NPM 市场买最新鲜的食材,只为搭配 小鲜肉 Vue 下厨. 既然它是当红小鲜肉,我想有必要写一篇文章来帮助大家配置好 Vue 的生产环境,我给它的总体评价是“简单却不失优雅, ...

  7. Vue 基础指令学习

    学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...

  8. Vue基础知识学习笔记

    一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...

  9. Vue基础知识学习（后端）

    ### Vue学习(后端) Vue安装 -引入文件安装,直接在官网下载vue.js引入项目中 -直接引用CDN -NPM安装(构建大型应用使用,在这不用) -命令行工具(构建大型单页应用,在这不用) ...

随机推荐

  1. STM32学习笔记（五）——通用定时器计数延时

    STM32定时器概述 STM32F40x系列总共最多有14个定时器,定时器分为三类:基本定时器.通用定时器和高级定时器.它们的都是通过计数来达到定时的目的,和51的定时器差不多,基本原理都是一样的,就 ...

  2. php操作memcache缓存基本方法

    memcache 是一个高效的分布式的内存对象缓存系统,他可以支持把php的各种数据(数组,对象,基本数据类型)放在它管理的内存中 1.代码使用 <?php //连接 $mem = new Me ...

  3. C#代码将html样式文件转为Word文档

    首先有个这样的需求,将以下网页内容下载为Word文件. html代码: <div class="modal-body">    <div style=" ...

  4. linux下编译安装nginx

    1.首先下载稳定版nginx1.10.2 使用wget命令下载 wget http://nginx.org/download/nginx-1.10.2.tar.gz 2.然后解压 tar -zxvf  ...

  5. bzoj4816 [Sdoi2017]数字表格

    Description Doris刚刚学习了fibonacci数列.用f[i]表示数列的第i项,那么 f[0]=0 f[1]=1 f[n]=f[n-1]+f[n-2],n>=2 Doris用老师 ...

  6. ms_celeb_1m数据提取（MsCelebV1-Faces-Aligned.tsv）python脚本

    本文主要介绍了如何对MsCelebV1-Faces-Aligned.tsv文件进行提取 原创by南山南北秋悲 欢迎引用!请注明原地址 http://www.cnblogs.com/hwd9654/p/ ...

  7. ZJOI2017 Round#2 滚粗记

    在杭州的火车站的KFC餐厅里,独自一人,闲来无事,便写写这篇博客.刚刚的一个礼拜,经历了余姚的省选和杭州的数学集训,感觉有些浪,学校里现在还在上新课,我已经落下一个礼拜的文化课了,回去估计补死:最重要 ...

  8. 前端框架对比之vue与regular(一)

    每次一写到Regular总是忍不住先介绍一下,Regualr是网易杭州研究所的一位叫郑海波的大神写的一款前端框架,目前 这款框架推广的不深,加上其和angular过于相似的框架名,导致接受力并不大,其 ...

  9. java web （j2ee）学习路线 —— 将青春交给命运

    RESON TO DO JAVA WEB:1.JAVA WEB(企业级)  2.Android和iOS过于火爆并且不兼容 一.JAVA WEB开发需要的知识储备 1.      基本的网页设计语言:H ...

  10. POJ1006: 中国剩余定理的完美演绎（非原创）

    问题描述 人自出生起就有体力,情感和智力三个生理周期,分别为23,28和33天.一个周期内有一天为峰值,在这一天,人在对应的方面(体力,情感或智力)表现最好.通常这三个周期的峰值不会是同一天.现在给出 ...