前提：

你已有 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. 关于mpu6050的几个很好的帖子

    最近在研究6050,真是很磨人啊,这个小东西还挺复杂,一个读取程序竟然需要600多行. 这几天连查资料找到了几个很好的帖子,要是以后有人看到这篇帖子,可以避免误入歧途,也可以省去很多时间. 1.阿西莫 ...

  2. GoldenGate实施步骤

    一.GoldenGate实施环境 source database:oracle 11.2.0.3 target  database:oracle 11.2.0.3 需要配置的进程如下: source ...

  3. Pycharm实用技巧汇总

    Pycharm中输入 a = list 按住Command点鼠标左键,即可查看该类下的所有用法,如下图 获取类中有哪些成员

  4. office web apps 整合Java web项目

    之前两篇文章将服务器安装好了,项目主要的就是这么讲其整合到我们的项目中,网上大部分都是asp.net的,很少有介绍Java如何整合的,经过百度,终于将其整合到了我的项目中. 首先建个servlet拦截 ...

  5. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  6. poj3020二分图匹配

    The Global Aerial Research Centre has been allotted the task of building the fifth generation of mob ...

  7. 对游览器遭到劫持的处理方案（RemoveAds Not By This Site）

    近期游览器一直被劫持 :火狐用不了,ie出毛病了,谷歌游览器也不好使了,已经快被逼疯!!! 但是事情总是向着美好的方向发展的么! 接下来就和大家一起分享一下我的解决经验! 首先用360杀毒(虽然大多数 ...

  8. Python常见的错误汇总

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 错误: [错误分析]第二个参数必须为类,否则会报TypeError,所以正确的应 ...

  9. ReactiveCocoa学习总结(1)

    1. 它是什么? 官方解释: [RACSignal] is a push-driven stream with a focus on asynchronous event delivery throu ...

  10. SharePoint Application Page启用匿名访问

    现在的项目需要使用sharepoint application page来展示图片影像,并让其它应用系统匿名访问,经过一番认真研究,主要有下面的步骤: 1. 在web applicaiton leve ...