Vue (1) - Getting Started

Vue features: progressive [from shallow to deep, from simple to complex]

script can be used to introduce ways:

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

Create an application object using the global function Vue () app] [Vue instance:

1 <div id="app">
2     <p>{{name}}</p>
3 </div>
4 <script type="text/javascript">
5     var app = new Vue({
6         el: '#app',
7         data: { name : "Vue" }
8     });
9 </script>

Named specification: Use vm for the application of a name: [abbreviation ViewModel (view model)]

<script type="text/javascript">
    var vm = new Vue({
        // 省略
    });
</script>

Commonly used methods [] and [] properties : generally $ prefix, to customize the user attributes distinguish

<div id="app">
    {{a}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el   : "#app",
        data : { a : 1 }
    });
    vm.$data.a = "test...." // 等同于 vm.a
    vm.$watch('a', function(newVal, oldVal){
        console.log(newVal, oldVal);
    })
</Script > 
<-! 
　　[Property] 
　　　　(. 1) . $ VM EL - document.getElementById ( 'App') 
　　　　(2) Data VM $ -. Get Data 
   　　      VM data.a $ = 'AAA' -. equivalents to = vm.a 'AAA' 
            Vue data will bind to themselves or method can be used for direct access and content vm.a       
    [method] 
        vm $ watch -. observation of a variable value change
 ->

Responsive concept : simply means that real-time response data

 1 <div id="app">
 2     {{a}}{{b}}
 3 </div>
 4 <script type="text/javascript">
 5     var data = { a : 1 };
 6     var vm = new Vue({
 7         el   : "#app",
 8         data : data
 9     });
10 </script>
11 <!--
12     (1) data.a = 2; a first modified embodiment, - real-time response success
 13 is      (2) = 2 vm.a; second modifications, - Successful real-time response
 14      (. 3). 3 = vm.b; Data [early] there is no ready b - in response to a failure, the directly displayed B} {} {
 15      (. 4) Object.freeze () function is used to modify the properties stop, to disable response of formula []
 16  ->