Giter Site home page Giter Site logo
vue

vuejs / vue Goto Github PK

View Code? Open in Web Editor NEW
198.4K 6.1K 31.7K 30.98 MB

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Home Page: http://vuejs.org

License: MIT License

JavaScript 1.83% HTML 0.94% Shell 0.04% CSS 0.60% TypeScript 96.60%
vue javascript frontend framework

vue's Introduction

Vue logo

Build Status Coverage Status Downloads Version License Chat

This repo is for Vue 2

You are looking at the repository for Vue 2. The repo for Vue 3 is vuejs/core.

Sponsors

Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider sponsor Vue's development.

sponsors


Introduction

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

Browser Compatibility

Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).

Ecosystem

Project Status Description
vue-router vue-router-status Single-page application routing
vuex vuex-status Large-scale state management
vue-cli vue-cli-status Project scaffolding
vue-loader vue-loader-status Single File Component (*.vue file) loader for webpack
vue-server-renderer vue-server-renderer-status Server-side rendering support
vue-class-component vue-class-component-status TypeScript decorator for a class-based API
vue-rx vue-rx-status RxJS integration
vue-devtools vue-devtools-status Browser DevTools extension

Documentation

To check out live examples and docs, visit vuejs.org.

Questions

For questions and support please use the official forum or community chat. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Changelog

Detailed changes for each release are documented in the release notes.

Stay In Touch

Contribution

Please make sure to read the Contributing Guide before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to this curated list!

Thank you to all the people who already contributed to Vue!

License

MIT

Copyright (c) 2013-present, Yuxi (Evan) You

vue's People

Contributors

yyx990803 avatar vue-bot avatar Hanks10100 avatar posva avatar defcc avatar kazupon avatar pikax avatar ktsn avatar HerringtonDarkholme avatar javoski avatar dependabot[bot] avatar jkzing avatar gebilaoxiong avatar Kingwl avatar Jinjiang avatar chrisvfritz avatar phanan avatar S-YOU avatar blake-newman avatar clarkdo avatar Justineo avatar sodatea avatar dwelch2344 avatar KaelWD avatar HcySunYang avatar shasharoman avatar dsonet avatar nickmessing avatar znck avatar ulivz avatar

Stargazers

Donald Filimon avatar Matthew Roknich avatar Clement Lumumba avatar Александра avatar Ahmad avatar  avatar Zirui Cai avatar goldennick5 avatar nguyen hieu minh avatar  avatar  avatar Alex avatar 雷Ray avatar  avatar limix avatar voooc avatar romepeng avatar Zak avatar  avatar Mdminhazahmed avatar Ibrahim Ahmad avatar zhenbo.zheng avatar  avatar  avatar Alankai avatar Fasil Getie avatar  avatar Paulo Almeida avatar  avatar Bana avatar  avatar DRA&PHO avatar Zion Chen avatar  avatar  avatar Dany C. avatar  avatar Jamie Cha avatar Wesley Vlk avatar  avatar Ony Tiana Olive avatar  avatar Ali Buğra Okkalı avatar Mariana Siano avatar  avatar Ahsanul Haque avatar myclooe avatar  avatar ZhenYuChen2000 avatar Ali Orhun Akkirman avatar Kaya Altın avatar Wael Ramadan avatar Chet Jones avatar  avatar  avatar Teshane Crawford avatar Afsah Nasir avatar Abu Baker Siddique avatar  avatar  avatar ceyang avatar  avatar Roboticol avatar  avatar  avatar  avatar  avatar Andrew Mitchell avatar  avatar  avatar hippolyte avatar Manouchehr Ghalevand avatar 循 avatar  avatar Denis Krayushkin avatar Serkan Algur avatar Wesam Alalem avatar 毕冷冷 avatar  avatar Nikolay avatar  avatar Jason avatar PUM4CH3И avatar  avatar  avatar Oren Ghelerter avatar  avatar Skyler.Ab avatar  avatar  avatar  avatar  avatar Matthieu Duran avatar Thamer Ayachi avatar Teboho Thapeli avatar Gabriel R. Barbosa avatar liu zhu avatar  avatar  avatar LiuJin avatar

Watchers

Ivan Kozik avatar Jonathan Lahijani avatar Will Chang avatar Terry Tai avatar Marcin Stefaniak avatar Khang Toh avatar arden avatar Kris Hedges avatar 吴少斌 avatar Stig Kleppe-Jørgensen avatar Khang Pham avatar David Turton avatar Dinesh Puspparajah avatar azu avatar Yasumasa Ashida avatar zbage avatar  avatar Solaiman Shaikh avatar tell-k avatar Renato Marinho avatar Tony Trinh avatar  avatar Gonzalo Ruben Benitez avatar jimxl avatar XQ Kuang avatar James Young avatar Halo Master avatar Eugene Trounev avatar Derek avatar Daidai Xiao avatar moyashi avatar alberto.garcia avatar Chun-Ping (Jeremy) Chang avatar Matt Tyson avatar Noam  Vergain avatar Ford Guo avatar Jeff Fox avatar Jasper Poppe avatar Alex Ausch avatar Yu Xie avatar Ross Mahony avatar Matthew Pietz avatar kazuya kawaguchi avatar Bruno Campos avatar Abhijeet Kaulgud avatar  avatar Markus Geiger avatar Jawf avatar Marek Dajnowski avatar Maciej Kuś avatar Greco Shi avatar  avatar Raul Fortes avatar 简单框架(马克) avatar Thiago Reis avatar  avatar Steve O'Brien avatar Disa Johnson avatar Joel Mandell avatar Aaron Law avatar jlw123199 avatar GQ Lewis avatar AsO avatar Jae Lee (pronounced as Jay) avatar Max Castro avatar Chinedu Okonkwo avatar 大鹏 avatar Masao Ochi avatar Kxllen Xu avatar takeratta(tm)* avatar Tobias Sailer avatar bihicheng avatar Jason Kende avatar SpartanPHP avatar 遣唐君 avatar Michael Russell avatar Victor Roșu avatar  avatar Hiroki K avatar  avatar Gopal Patel avatar 大鼻子 avatar Taobility avatar flossy avatar Hugues Brunelle avatar James Augustus Hall avatar Stef avatar David Arturo Carrillo Atondo avatar Gavin Henry avatar junlei zhang avatar Reggie Zhang avatar Wolfgang Born avatar Mehdi Rande avatar Chandra Patni avatar Marco Verdecchia avatar evandrix avatar  avatar kenny avatar Paul Matunog avatar 阿杰 avatar

vue's Issues

Website

  • style design
  • home redesign
  • live examples

Observer rewrite

  • Currently child objects nested under an observed object cannot be observed again... The proper way to do it is probably make EVERY object self-contained with an __observer__ and propagate the events up.
  • This would make data objects completely decoupled from each other and allow a VM to simply observe its scope instead of copying stuff over.

seed-animation

This should probably be a separate module / extension / plugin / whatever

seed-filters

Rip out the default filters into a separate module. Basic case transforms can be done with CSS since we are IE9+; More complicated filters are better customized anyway.

documentation

  • api
    • class Vue
    • instantiation options
    • instance properties
    • instance methods
    • global methods
    • directives
    • filters
  • guide
    • installation
    • getting started
    • displaying a list
    • listening for events
    • Directives in depth
    • Filters in depth
    • computed properties
    • handling forms
    • using transitions
    • composing viewmodels
    • app architecture

sd-partial

should be able to include partial templates...

Like this:

<div sd-partial="#temp"></div>

Or like this:

{{>#temp}}

Component encapsulation (& custom html tags?)

Basically a component can be distributed alone with an extended VM constructor and a template string. So globally there needs to be a method that registers these VMs to a unique id so they can be nested in other views.

improve Observer performance

When an object is observed by many anonymous expression bindings (>100) the new ViewModel instantiation gets increasingly slow. Currently has no idea why - but it has something to do with the exp parser / anon directive thing. Need to do more profiling.

seed-router

options:

  • seed-router as a separate module
  • embedded in core to enable tighter integration with the ViewModel

remove component as pre-processor?

  • pros:
    • slightly smaller code size
    • slightly better performance (no resolving relative require paths on startup, everything is in the same closure)
  • cons:
    • have to avoid naming collisions
    • have to duplicate emitter when used with component

sd-id

use sd-id to be able to reference a child Seed from a parent Seed.

Example:

<div id="parent">
    <div sd-id="child" sd-viewmodel="abc"></div>
</div>
var parent = new Seed({ el: '#parent' })
// a node with `sd-viewmodel` and `sd-id` both present will
// have its corresponding VM instance registered under parent VM's "$" property
var child = parent.$.child

Seed.element()

Define a custom element!

Pass in a simple function:

Seed.element('tabs', function (el) {
  // ...
})

Or pass in a Seed viewmodel constructor / option object:

Seed.element('tabs', {
  tagName: 'ul',
  replace: true,
  template: '...',
  init: function () {
    // ...
  }
})

add `replace` option

This should indicate whether to replace the VM root node being compiled with the template. Only works if the template has only one node.

allow custom binding prefix

Instead of changing the global/default prefix, allow users to create namespaced directives with their own prefixes.

Further API improvements

  • change the exposed entity to Seed
  • change sd-each to sd-repeat
  • put all API methods on Seed
  • rename data option to scope
  • rename props option to proto
  • properties that start with _ should also be ignored and used as a convention: $ is library properties, _ is user properties and non-prefixed properties are data.

Additional extensions

This is a far reach, God knows when will I get to these.

  • seed-restful
  • seed-tailbone
  • seed-firebase

VM $[event methods]

provide these methods for nested VMs to communicate with each other (Angular style): $on, $off, $broadcast, $emit

complete functional tests

Use CasperJS (see travis integration from ghost)

  • simple directive
  • template
  • form elements
  • expressions
  • component encapsulation
  • nested properties
  • nested viewmodels
  • repeated items
  • repeated viewmodels
  • sharing data between viewmodels
  • todomvc

make conditional output work in dep tracking

e.g.

ok ? yesMsg : noMsg

With the current deps tracking, because of the short-circuiting of the ternary expression, if ok is true then only yesMsg gets tracked and we will miss noMsg.

Solution

access everything with a var statement...

sd-transition

sd-transition comes in two flavors:

  • CSS class toggle
  • JavaScript functions
  • tests

CSS class toggle

Use sd-transition-class. e.g:

<div class="test" sd-transition-class="fade">
.test {
    transition: opacity .5s linear;
}
.test.fade {
    opacity: 0;
}

Custom JavaScript transition functions

Use sd-transition and define them like this:

<div class="test" sd-transition="fade">
Seed.transition('fade',  {
    enter: function (el, attach) {
        // ...
        attach()
    },
    leave: function (el, detach) {
       // ...
       detach()
    }
})

Implementation notes

Transitions are triggered during append/remove operations of the following directives:

  • sd-if
  • sd-repeat (leave via vm.$destroy())
  • sd-show

General procedure:

  • enter
    • set to start state
    • append
    • trigger end state transition on next tick
  • leave
    • trigger start state transition
    • wait transition duration / listen for transitionend
    • remove

template that makes more sense

template should simply be a string. the VM constructor makes real nodes out of it and then cache it for future instantiation, because cloneNode() is faster than innerHTML. So - remove util.collectTemplates() and let the users handle where/how to store templates. This also allows better capsulation for component distribution.

seed-router

This should be a separate module.

  • parse stuff on hash change / history push
  • can build on top of an existing router component, e.g. page.js
  • store parsed data somewhere
  • ViewModels automatically observes $route if the router is present.

batch value updates asynchronously

  • implementation
  • unit test for batch.js
  • fix functional tests

Pseudo code

  • for each created binding, give it a uid;
  • on each binding update
    • check its uid in the global update hash.
      • if not waiting for update
        • push itself to a global update stack
        • if a nextTick stack flush callback is not registered, register it;
      • set its uid to true in the global update hash.
  • in the flush callback, update every binding in the queue.

Settle down on initialization API

General Thoughts

  • Allow component encapsulation and easy reuse.
  • Flexible while not being too confusing
  • a defined VM constructor should not be able to use a different template for consistency. (i.e. when you new something, it should always look the same) If you want the same logic but a different template, you should extend it as a new VM constructor. Therefore, no more sd-template
  • If you want to inline a template you should use sd-partial.
  • add seed.vm('id', VM) so it can be used inline via sd-vm, id should be no longer an init option.
  • add seed.partial('id', 'partial')

Options Spec for seed.ViewModel.extend

  • el
    • if present
      • if string: querySelector
      • if node: use as is
    • if not
      • create per tagName
    • apply elProps/className etc
  • template
    • if present
      • if starts with '#': getElementById
      • else: use as is
      • replace current el innerHTML
  • id, className, attributes: stuff to add to el (same as Backbone)
  • init: init function to call when instantiating
  • props: stuff that will be put onto the constructor's prototype
  • data: stuff that will be copied to each instance

Tentative

How can we allow access to nested component VMs in code, while allowing declarative compositing in markup?

  • directives: hash of directives to register
  • filters: hash of filter functions to register
  • vms: hash of VM constructors to register
  • partials: private partials that can be used in the template

References

Currently I'm torn on how the final API should look like. There are three main references: Angular, Backbone & Ractive.

Angular

Markup everything, define everything, bootstrap() once
Declarative

Backbone

Creates .el if not exist using options like tagName, properties, etc...

Ractive

Takes a string template, also allows inline by treating it as an ID if it starts with '#'

remove contextual bindings

Is contextual bindings really needed any more now that we have expression bindings?
It looks unused in current implementation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.