前提：

你已有 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. Linux防火墙配置—允许转发

    一.实验目标 在上一次"Linux基础网络搭建实验"中,内.外网虚拟机之所以能Ping通,是因为暂时关闭了防火墙,然而现实中这样操作显然存在很大的安全隐患,所以本次实验在上次实验的 ...

  2. time模块简介

    Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...

  3. hadoop环境搭建之关于NAT模式静态IP的设置 ---VMware12+CentOs7

    很久没有更新了,主要是没有时间,今天挤出时间验证了一下,果然还是有些问题的,不过已经解决了,就发上来吧. PS:小豆腐看仔细了哦~ 关于hadoop环境搭建,从单机模式,到伪分布式,再到完全分布式,我 ...

  4. VueJS 事件修饰符

    事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更 ...

  5. 关于特殊文件权限：suid、sgid和sticky-bit

    用 ls –l 命令时,能看到三个八进制数字,表示文件的权限.其实文件的权限应该用4个八进制文件来表示,没有显示的那个是第一位,用来设定一些特殊的权限,这个八进制数字的三个位是:SUID.SGID.s ...

  6. 学习java的感受

    学习java有一段时间了,发现现在只是才了解java,还在门槛外边. 有时候真感觉这是不是一种外星语言,各种方法各种类各种借口,总是傻傻分不清.  学过的知识过一个星期就开始模糊,有时半夜睡不着的时候 ...

  7. 学好php可以做的事情真多！

    学好php能做什么?其实学好php能做的事情很多! 一. 学好php可以就业 1:大中小公司通吃. 现在几乎所有有前途的公司都会在互联网上安家.只要在网上安家,就需要找这些方面的技术人员,而且很多公司 ...

  8. CI Weekly #18 | flow.ci iOS 最佳实践出炉，正式支持 Git@OSC 构建

    如大家所期待,flow.ci 现已支持开源中国的代码仓库 - 码云,可以直接构建 Git@OSC 的项目了,点击创建项目-选择代码仓库-选择码云-绑定 OSChina 账户-选择要构建项目,教程看这里 ...

  9. TypeScript入门-高级类型

    高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...

  10. 玩转mongodb（九）：通过log4jmongo来实现分布式系统的日志统一管理

    背景 在分布式系统中,我们有多个web app,这些web app可能分别部署在不同的物理服务器上,并且有各自的日志输出.当生产问题来临时,很多时候都需要去各个日志文件中查找可能的异常,相当耗费人力. ...