前提：

你已有 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. 动画制作 手机APP制作以及响应式的实现

    babber 宽度:浏览器的100% 原则上:高度-=图片高度 banner img 宽度:图片的实际宽度 高度:充满父容器 使用定位:让图片在父容器中绝对居中.     <!DOCTYPE h ...

  2. java 集合框架(TreeSet操作,自动对数据进行排序,重写CompareTo方法)

    /*TreeSet * treeSet存入数据后自动调用元素的compareTo(Object obj) 方法,自动对数据进行排序 * 所以输出的数据是经过排序的数据 * 注:compareTo方法返 ...

  3. "fatal: protocol error: bad line length character: No This"

    git clone 远程地址时候出现 "fatal: protocol error: bad line length character: No This" 错误 在stackov ...

  4. 蓝桥杯-猜字母-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  5. CSS中的字体设置

    五大类:serif, sans-serif, monospace, cursive, fantasy serif 衬线字体,如 Big Caslon, 宋体 sans-serif 非衬线字体,如 He ...

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

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

  7. 学习笔记：JavaScript-入门篇

    1.对话框,输出框,警告框   1. document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容.   2.alert(字符串或变量);   3.conf ...

  8. Linux command not found 问题解释

    执行可执行文件 执行文件就是具有可执行权限的文件,如果在文件所在目录上执行 ll 或 ls -l命令时,可能看到如下结果:-rwxr-xr-- 1 usr users 289 Jul 29 09:15 ...

  9. Welcome to my Blog

    Only English? Oh my god!!! why open live write can't write by Chinese?

  10. java web 导出Excel 的工具类公用实现

    平时我们在开发后端管理的系统时,经常会出现导出Excel的功能.这个功能很简单,但是呢,我一般就会使用公用的工具类,在一个Util中,暴露公用导出的接口,只需要传入需要导出的数据(一般使用list集合 ...