前提：

你已有 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代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>Index Page</title>
  7. </head>
  8.  
  9. <body>
  10.   <form action="" id="demo">
  11.     <input type="text" value="调试 vuejs 2.0" ref="input1">
  12.     <a href="javascript:void(0)" v-on:click="test1">测试</a>
  13.     <br>
  14.     <span>{{ result1 }}</span>
  15.     <br>
  16.  
  17.     <input type="text" v-model="input2">
  18.     <a href="javascript:void(0)" v-on:click="test2">测试</a>
  19.     <br>
  20.     <span>{{ result2 }}</span>
  21.   </form>
  22.  
  23.   <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
  24.   <script type="text/javascript">
  25.  
  26.   	new Vue({
  27.     el: "#demo",
  28.  
  29.     data: {
  30.         result1: null,
  31.         result2: null,
  32.         input2: ""
  33.     },
  34.  
  35.     created: function() {
  36.         // the created hook is called after the instance is created
  37.     },
  38.  
  39.     methods: {
  40.         test1: function () {
  41.             this.result1 = this.$refs.input1.value + " 成功!";
  42.         },
  43.  
  44.         test2: function () {
  45.             this.result2 = this.input2 + " 成功!";
  46.         }
  47.     }
  48. })
  49.   </script>
  50. </body>
  51.  
  52. </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基础网络搭建实验

    一.实验目标 利用3台虚拟机,搭建vmnet2和vmnet3两个host-only网络,实现两个网络的互联 二.实验环境   内网 外网 网关 IP 192.168.0.10/24 202.3.4.1 ...

  2. IOC容器的依赖注入

    1.依赖注入发生的时间 当Spring IoC容器完成了Bean定义资源的定位.载入和解析注册以后,IoC容器中已经管理类Bean定义的相关数据,但是此时IoC容器还没有对所管理的Bean进行依赖注入 ...

  3. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  4. APP反编译第一课《如何找到核心代码》

    相信很多人都应该会去接触APP反编译,本小七给大家带来入门级别套路,自己也在慢慢摸索学习,一起成长吧.第一步,反编译需要的工具有:一.java环境,其实这里你只要安装了burp就不用管这个的二.apk ...

  5. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...

  6. 使用wcf编写坐标字符串生成shapefile文件，在iis发布供前端调用

    项目有一需求,需要由坐标字符串(格式:x,y,点名)生成shapefile,由于在前台开发类似功能比较麻烦而且也不适用,最终决定使用WCF来实现,不借助现有GIS软件,基于GDAL实现. 实现过程如下 ...

  7. 一起来学jquery!

    jquery学习之旅!(未完待续) ------------(一)jquery书写步骤 ------------(二)jquery事件与函数 ------------(三)jquery修改css属性 ...

  8. poj3304计算几何直线与线段关系

    Given n segments in the two dimensional space, write a program, which determines if there exists a l ...

  9. 安装hexo报错（npm WARN deprecated swig@1.4.2: This package is no longer maintained），已解决

    问题:在使用npm安装hexo时报错 $ npm install -g hexo npm WARN deprecated swig@1.4.2: This package is no longer m ...

  10. C# selenium环境配置

    1.下载C#selenium     selenium官网:  http://www.seleniumhq.org/download/   下载后解压:     打开net35后,将里面的dll文件添 ...