Progressive JavaScript Framework--vue

Objective

Flexible

A thriving ecosystem that can scale freely between a library and a complete set of frameworks.

Efficient

20kB Min+gzip Run Size
Hyper-Fast Virtual DOM
The most hassle--optimized

1 Calculation Properties

Computed properties Keywords: computed.

Computed properties are useful when dealing with some complex logic.

<div id= "App" >  <p> Raw string: {{message}}</p>  <p> inverse string after calculation: {{reversedmessage}}</p ></div>

Here is the JS code:

var New Vue ({  ' #app ',  data: {    ' runoob! ')   },  computed: {    //  the Getter function () of the computed attribute      () {       // ' This ' points to the VM instance      return this. Message.split ("). Reverse (). Join (')}}}  )

Operation Result:

Original string: runoob!

Inverse string after calculation:!boonur

Computed vs methods

We can use the methods to replace the computed, the effect of two is the same, but computed is based on its dependent cache, only the dependent dependency changes when the value will be re-evaluated. With methods, the function will always re-invoke execution when it is re-rendered.

methods: {  function  () {    returnthis. Message.split ("). Reverse (). Join (')  }}

Difference:

[Methods and computed]
There are methods and computed two ways to use it dynamically as a method.
1. The difference in writing is that the computed calculates the attribute without adding (), while the methods mode is used
To be used as a method, it must be added ();

2. Using computed to calculate a property is to bind the content to a message and only trigger content if the message changes.
The methods approach is to execute the method every time you enter a page, but when using real-time information, such as displaying the current time to enter the page,
Must be in methods mode.

If you use computed to calculate a property, the first message will be used every time you enter the page, and now will no longer be triggered.

Computed setter

The computed property defaults to getter only, but you can also provide a setter when needed:

varVM =NewVue ({el:' #app ', data: {name:' Google ', URL:' Http://www.google.com '}, computed: {site: {//GetterGetfunction () {        return  This. Name + "+ This. URL},//SetterSetfunction(newvalue) {varnames = Newvalue.split (")         This. Name = Names[0]         This. url = names[names.length-1]      }    }  }})//call Setter, Vm.name and Vm.url will also be updated by the correspondingVm.site = ' Rookie tutorial http://www.runoob.com ';d Ocument.write (' Name: ' +vm.name);d ocument.write (' <br> ');d Ocument.write (' URL: ' + vm.url);

2 Components

Component (Component) is one of the most powerful features of Vue.js.

Components can extend HTML elements to encapsulate reusable code.

The component system allows us to build large applications with independent reusable widgets, and the interface of almost any type of application can be abstracted into a single component tree.

Global components

All instances can use global components.

Global Component Instances

Register a simple global component, Runoob, and use it:

<div id= "App" >    <runoob></runoob></div> <script>//  registration Vue.component (' Runoob ', {  ' })//  Create root instance new  Vue ({  ' #app '})</script>

Local components

We can also register the local component in the instance option so that the component can only be used in this instance:

Local Component Instances

Register a simple local component Runoob and use it:

<div id= "App" >    <runoob></runoob></div> <script>var child = {  ' //  Create root instance new  Vue ({  ' #app '  , components  : {    //  <runoob> will be available only in parent template    ' Runoob ': Child  }} )</script>

Prop

Prop is a custom property that the parent component uses to pass data.

The parent component's data needs to pass the data to the child component through props, and the subcomponent needs to explicitly declare "prop" with the props option:

<div id= "App" >    <child message= "hello!" ></child></div> <script>//  registration vue.component (' child ', {  //  declaration Props  Props: [' message '],  //  can also be used in VM instances like "This.message"   Template: ' <span>{{message}}</span> '})//  Create root instance new  Vue ({  ' #app '})</script>

Progressive JavaScript Framework--vue