Vue基础概念，学习环境等 -

名白毅

浏览: 6197 次
性别:
来自: 北京

最近访客更多访客>>

唯一的色彩

chevalier_jack23

jaylhsh

wangyuying

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Vue基础概念，学习环境等

博客分类：

Vue、javascript html

前提：
你已有 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]