You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I think the only serious users right now are us here at Google Creative Lab, but hey, I just launched it to public this week! Speed is actually not the major selling point of Vue - simplicity is. Also, Vue is only an interface library, not a framework. For larger projects it's intended to be used with a modular build system e.g. Component or Browserify. That said, here's why you'd want to give Vue a shot over several common frameworks:
18
+
19
+
### Angular
20
+
21
+
If you like everything about Angular you should definitely stick with it. But it's not perfect for everyone. Vue.js tries to provide the benefits of MVVM data binding while being overall much simpler, so you don't have to bend your mind around $digest vs. $apply, preLink vs. postLink, or how dependency injection works. The core API is just a constructor that can be extended with a bunch of options. Vue is also much less opinionated, giving you the flexibility to use it as the view layer in a custom front-end stack.
22
+
23
+
### Backbone
24
+
25
+
Backbone has a simple and friendly API, but it has no data binding and your View will be cluttered with lots of DOM manipulation. You'd have to resort to third party libs such as KnockBack or Rivets.js to achieve that, then it suddenly requires a lot of boilerplate and becomes not that simple. Also, hard dependency on jQuery... which you might not need if you are targeting modern browsers.
26
+
27
+
### Knockout
28
+
29
+
In modern browsers, using ES5 getter/setters gets rid of Knockout's awkward syntax of initializing everything with ko.observable() and getting/setting as invoking functions. Vue.js also provides a declarative way to nest and compose your ViewModels, which can be tricky in Knockout.
30
+
31
+
### Ember
32
+
33
+
Ember is philosophically almost the exact opposite of Vue: heavy, opnionated, all-encompassing, convention over configuration... if you are into that then Vue is probably not for you.
34
+
35
+
### React
36
+
37
+
React is probably the closest to Vue among all these libs in terms of areas covered and position in the stack. It is a great lib, but I'm not a fan of constructing all the HTML in JavaScript - I prefer to write actual HTML and work with the actual DOM, which is what Vue does. Since I'm also a designer, I find Vue's approach makes it easier to work with CSS. Finally, in React the DOM is almost completely abstracted away, but in Vue you still have the flexibility to reach down in custom directives.
38
+
Take note these are my personal opinions and I'm most likely biased, but you are more than welcome to do your own research and see if you agree with me.
39
+
40
+
### Ractive
41
+
42
+
Very very similar. But Vue.js allows you to easily extend the vocabulary with custom directives and filters, a feature which Ractive doesn't seem to offer. Since both libraries
Copy file name to clipboardExpand all lines: source/api/directives.md
+16-8
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,9 @@ type: api
3
3
order: 6
4
4
---
5
5
6
-
# {{title}}
6
+
## Data Binding Directives
7
+
8
+
> These directives can bind themselves to a property on the ViewModel, or to an expression which is evaluated in the context of the ViewModel. When the value of the underlying property or expression changes, the `update()` function of these directives will be called asynchronously on next tick.
7
9
8
10
### v-text
9
11
@@ -61,8 +63,9 @@ Create a child ViewModel for every item in the binding Array. These child ViewMo
61
63
### v-on
62
64
63
65
- This directive requires exactly one argument.
66
+
- This directive requires the value to be a Function or an expression.
64
67
65
-
Attaches an event listener to the element. The event type is denoted by the argument. For more details see [Listening for Events](/guide/events.html).
68
+
Attaches an event listener to the element. The event type is denoted by the argument. It is also the only directive that can be used with the `key` filter. For more details see [Listening for Events](/guide/events.html).
66
69
67
70
### v-model
68
71
@@ -76,15 +79,10 @@ Create a two-way binding on a form or editable element. Data is synced on every
76
79
77
80
Conditionally insert / remove the element based on the truthy-ness of the binding value.
78
81
79
-
### v-component
80
-
81
-
- This directive takes a registered asset id.
82
-
83
-
Compile this element as a child ViewModel with a registered component constructor. This can be used with `v-with` to inehrit data from the parent. For more details see [Composing ViewModels](/guide/composition.html).
84
-
85
82
### v-with
86
83
87
84
- This directive requires the value to be an Object or falsy.
85
+
- You cannot use expressions with this directive.
88
86
89
87
Compile this element as a child ViewModel, using the binding value as the `data` option. Inside the template you can directly access properties on the binding value. This can be used in combination with `v-component`.
90
88
@@ -107,6 +105,16 @@ You can simplify the template like this:
107
105
</div>
108
106
```
109
107
108
+
## Literal Directives
109
+
110
+
> Literal directives treat their attribute value as a plain string; they do not attempt to bind themselves to anything. All they do is executing the `bind()` function with the string value once.
111
+
112
+
### v-component
113
+
114
+
- This directive takes a registered asset id.
115
+
116
+
Compile this element as a child ViewModel with a registered component constructor. This can be used with `v-with` to inehrit data from the parent. For more details see [Composing ViewModels](/guide/composition.html).
Copy file name to clipboardExpand all lines: source/api/index.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: api
3
3
order: 1
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
The `Vue` Class is the core of vue.js. It is a constructor that allows you to create ViewModel instances. Creating a ViewModel instance is straightforward:
> This is a basic example of how to structure a modular Vue.js application using Component as the build system. For more details on this topic, see [Building Larger Apps](/guide/application.html).
Copy file name to clipboardExpand all lines: source/examples/firebase.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: examples
3
3
order: 2
4
4
---
5
5
6
-
# Firebase + Validation Example
7
-
8
6
> This example uses [Firebase](https://www.firebase.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using Vue.js filters and triggers CSS transitions when adding/removing items.
> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines). It is also [one of the fastest implementations](/perf/).
Copy file name to clipboardExpand all lines: source/guide/application.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 11
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
Vue.js is designed to be as flexible as possible - it's just an interface library that doesn't enforce any architectural decisions. While this can be very useful for rapid prototyping, it could be a challenge for those with less experience to build larger scale applications with it. The following is an opinionated perspective on how to organize larger projects when using Vue.js.
Copy file name to clipboardExpand all lines: source/guide/computed.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 8
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
Vue.js' inline expressions are very convenient, but the best use cases for them are simple boolean operations or string concatenations. For more complicated logic, you should use **computed properties**.
9
7
10
8
In Vue.js, you define computed properties with the `computed` option:
Copy file name to clipboardExpand all lines: source/guide/directives.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 3
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
## Synopsis
9
7
10
8
If you have not used AngularJS before, you probably don't know what a directive is. Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute that takes the following format:
Copy file name to clipboardExpand all lines: source/guide/events.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 6
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
You can use the `v-on` directive to bind event listeners to DOM events. It can be bound to either an event handler function (without the invocation parentheses) or an inline expression. If a handler function is provided, it will get the original DOM event as the argument. The event also comes with an extra property: `targetVM`, pointing to the particular ViewModel the event was triggered on:
Copy file name to clipboardExpand all lines: source/guide/filters.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 4
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
## Synopsis
9
7
10
8
A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (`|`) and can be followed by one or more arguments:
Copy file name to clipboardExpand all lines: source/guide/forms.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 7
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
You can use the `v-model` directive to create two-way data bindings on form input elements and elements with `contenteditable` attribute. It automatically picks the correct way to update the element based on the input type.
In addition, you can use triple mustaches for unescaped HTML, which translate to `v-html` internally. However, since this can open up window for potential XSS attacks, it is suggested that you only use triple mustaches when you are certain about the security of the data source.
70
+
<pclass="tip">You can also use triple mustaches for unescaped HTML, which translate to `v-html` internally. However, since this can open up window for potential XSS attacks, it is suggested that you only use triple mustaches when you are certain about the security of the data source.</p>
Copy file name to clipboardExpand all lines: source/guide/list.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 5
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
You can use the `v-repeat` directive to repeat a template element based on an Array of objects on the ViewModel. For every object in the Array, the directive will create a child ViewModel using that object as the data object. On and inside the template element you have access to properties of both the child ViewModel and the parent ViewModel. In addition, you also have access to the current child ViewModel's `$index` property, which is the index of its data object in the Array.
Copy file name to clipboardExpand all lines: source/guide/transitions.md
-2
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,6 @@ type: guide
3
3
order: 9
4
4
---
5
5
6
-
# {{title}}
7
-
8
6
You can add transition effects when elements are inserted into or removed from the DOM using the `v-transition` directive. There are two types of transitions: CSS-based and JavaScript-based. All Vue.js transitions are triggered only if the DOM manipulation was applied by Vue.js, either through built-in directives, e.g. `v-if`, or through ViewModel instance methods, e.g. `vm.$appendTo()`.
0 commit comments