From: http://www.cnblogs.com/longsf/p/6676182.html
A brief introduction and features of AngularJS
Angular is an MVC framework that uses MVC decoupling to organize code in models, controllers, and Views. It divides an HTML page into modules, each with its own scope, service, and directive. Modules can communicate with each other, but the structure is clear. That is, the code organization is modular. An Angular View may be a framework, and dom manipulation of the view or time monitoring is implemented in the directive. As long as you listen to the Model, the View changes when the Model changes. This is a two-way binding mechanism. Angularjs is suitable for single-page development
In angularJS, a template is an HTML file. But the HTML content has been expanded to include a lot of stuff to help you map your Model to your View.
The HTML template will be parsed into the DOM by the browser. The DOM then becomes the input to the AngularJS compiler. AngularJS will traverse the DOM template to generate some guidance, namely, a directive. All directives are responsible for setting the data binding for the view.
AuguarJS does not operate on templates as strings. You type angularJS into the DOM instead of a string. Data binding is a DOM change, not a string concatenation or innerHTML change. Using DOM as input, rather than strings, is the biggest reason AngularJS is different from other frameworks. Using the DOM allows you to extend the vocabulary of directives and create your own directives, and even develop reusable components. Angular uses less memory, is compatible with mainstream browsers, and has a built-in dependency injection subsystem that makes it easier for developers to develop, understand, and test and apply. DI allows you to request your dependencies instead of finding them yourself. For example, if we need something, DI is responsible for finding and creating it and providing it to us. AngularJS can do that. Directives can be used to create custom labels. They can be used to decorate elements or manipulate DOM attributes.
A brief introduction to vuejS features
Website: http://cn.vuejs.org/
Vue is an incremental framework, a lightweight framework, not a framework at all, with a focus on layers at its core, a data-driven Web interface that is easy to get started with, easy to use for third-party libraries or integration with existing projects, and capable of providing drivers for complex single-page applications
1. The core of VUE
Is a tool that allows declarative rendering of data into the DOM using concise template syntax
Start by creating a file with the suffix.html
The code is as follows:
html: <div id=”app”></div>
Var app = new Vue({
2. Vue instructions
Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and they apply special responsive behavior to the rendered DOM
V-bind: v-bind: STR = “MSG” Matches the STR attribute of the node of this element with the MSG attribute of the vue instance object
V-if = Boolean conditional render instruction, which determines whether to render the element based on the Boolean value of the following expression. V-if only renders the element after which the expression is true
V-show = booleans are similar to v-if, except that elements with false expressions behind them will be rendered, and CSS code will be added to such elements. Style = “display: None”
V-else must be followed by v-if/ V-show, otherwise it will not work. If v-if/ V-show is true, else is not displayed. If V-if/V-show is false, else elements are displayed on the page
V-for is similar to js traversal, used as V-for =”(item,index) in IMgs “:key=”index”, items is an array, item is an array element in the array,index is the index number, key is to efficiently find the specified element
V-on is used to listen for DOM events on the specified elementv-on:click="greet"
3. Bidirectional data binding of Vue
VueJS uses the object.defineProperty () method provided by ES5 to monitor operations on data so that data can be triggered automatically and, because synchronization is triggered on different data, changes can be sent precisely to the bound view rather than all data being checked at once
Both Vue and Angular declare binding relationships between view elements and data by adding directives to HTML
<from id= “app”>
<input type=”test” v-model=”name”>
</from>
The above HTML code shows that the input element is bound to the name data, which can always be initialized in JS code
var vm = new Vue({
el: “#app”,
data:{
Name: “Please enter your name”
}
})
After the code is executed correctly, the initial value “Please enter your name” given by the above code will be displayed in the corresponding position of the input element on the page. Since the two-way binding data is already established, the input will also be updated to xiao Ming when vm.name=” mi “. The value obtained by vm. Name is Xiaoming
4. Plug-in of Vue
Plug-ins typically add global functionality to the VUE, and there is no limit to the scope of plug-ins
I don’t know how to add a global method or attribute called vue-element
Add global resource directives/filters/transitions
To add vUE instances, add them to the VUE-Prototype implementation
Introduce a library that provides its own API and provides one or more of the above functions, such as vue-Router
import vueRouter from ”vue-router’; Vue.com Ponent is used to register global components or vue.com Ponents is used to register local components. If the latter is the case, there is no need to introduce vUE in each single file component.
Because a single-file component is packaged by Webpack, the resulting module is just a component options object that is registered by other components or Vue instances using syntactic sugar, and only the component options object of the literal object is required.
Using plug-ins:
vue.use(vueRouter); Using a plug-in with the global method vue.use () prevents the same plug-in from being registered more than once
The difference between Angular and jquery
Angular avoids DOM manipulation. Angular is data-driven and suitable for projects where data manipulation is cumbersome. Angular is a comprehensive MVVM framework for single-page development, including templates and two-way data binding, routing, modularity, services, filters, and so on. Dependency injection and other functions, but Angular authentication is weak, requires a lot of template tags, and ngView can only have one, not multiple views nested, Angular compatibility is good, jquery is based on DOM manipulation, suitable for projects with a lot of DOM manipulation. Jquery is a large library that is compatible with most browsers and has a large number of plugins that are extensible. Jquery is not backward compatible, and there may be conflicts when using plugins.
The difference between Angular and Vue
Angular is the MVVM framework, and Vue is a progressive framework equivalent to the View layer. Both have bidirectional data binding, but Angular’s bidirectional data binding is based on dirty checking, while Vue’s bidirectional data binding is based on ES5 getters and setters. Angular implements its own set of template compilation rules. Vue is lighter, more efficient, easier to learn, and cheaper to learn than Angular. Vue requires an EL object to instantiate, whereas Angular is a single-page application with an entire HTML page. Vue can have an instance of vUE
