home PYTHONJAVA
 

Vue.js Getting Started

Each Vue app needs to be instantiated by Vue.

The

syntax is as follows:

var vm = new Vue({
  // Options
})

Next let's take a look at what's needed in the Vue constructor:

Instance

<div id=" vue_det"> <h1>site : {{site}}</h1 > <h1>url : {{url}}</h1 > <h1>{{details()}}</h1 > </div> <script type="text/javascript"> Var vm = new Vue({ El: '#vue_det', Data: { Site: "The Programming tutorial", Url: "www.welookups.com", Alexa: "10000" }, Methods: { Details: function() { Return this.site + " - Learning is not only technology, but also a dream!"; } } }) </script>

You can see that there is an el parameter in the Vue constructor, which is the id in the DOM element. In the above example, the id is vue_det, in the div element:

<div id = "vue_det "></div>

This means that our next changes are all within the div specified above, and the div outside is not affected.

Next we look at how to define data objects.

data is used to define attributes. There are three attributes in the instance: site, url, alexa.

methods A function used to define a function that returns a function value via return.

{{ }} is used to output object properties and function return values.

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

When a Vue instance is created, it adds all of the properties found in its data object to Vue's responsive system. When the values ​​of these properties change, the html view will also change accordingly.

Instance

<div id=" vue_det"> <h1>site : {{site}}</h1 > <h1>url : {{url}}</h1 > <h1>Alexa : {{alexa}}</h1 > </div> <script type="text/javascript"> // our data object Var data = { site: "Programming tutorial", url: "www.welookups.com", alexa: 10000} Var vm = new Vue({ El: '#vue_det', Data: data }) // They refer to the same object! Document.write(vm.site === data.site) // true Document.write("<br >") / / Set properties will also affect the original data Vm.site = "welookups" Document.write(data.site + "<br>") // welookups // ……vice versa Data.alexa = 1234 Document.write(vm.alexa) // 1234 </script>

Instance

<div id=" vue_det"> <h1>site : {{site}}</h1 > <h1>url : {{url}}</h1 > <h1>Alexa : {{alexa}}</h1 > </div> <script type="text/javascript"> // our data object Var data = { site: "Programming tutorial", url: "www.welookups.com", alexa: 10000} Var vm = new Vue({ El: '#vue_det', Data: data }) // They refer to the same object! Document.write(vm.site === data.site) // true Document.write("<br >") / / Set properties will also affect the original data Vm.site = "welookups" Document.write(data.site + "<br>") // welookups // ……vice versa Data.alexa = 1234 Document.write(vm.alexa) // 1234 </script>

......





welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.