Vue（1）- 入门

Vue特点：渐进式【由浅到深，由简单到复杂】

script 方式引入即可使用：

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

使用全局函数Vue()创建 应用对象app【Vue实例】：

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>

起名规范：使用 vm 为应用起名字 ：【ViewModel（视图模型） 的缩写】

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

常用的【属性】和【方法】: 一般都是 $ 前缀 , 以便与用户自定义属性区分开来

<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>
<!--
　　【属性】
　　　　（1）vm.$el         　　　　-- document.getElementById(‘app‘)
　　　　（2）vm.$data       　　　　-- 获取 data
   　　      vm.$data.a = ‘aaa‘  -- 等同于 vm.a = ‘aaa‘
            Vue 会把 data 或 method 绑定到自己身上所以可以直接使用 vm.a 进行获取和修改内容      
    【方法】
        vm.$watch     -- 观察变量a的值的变化
-->

响应式的概念：简单的说就是实时响应数据

 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;      第一种修改方式, - 实时响应成功
13     (2) vm.a = 2;        第二种修改方式, - 实时响应成功
14     (3) vm.b = 3;        data里面没有【提前】准备好b - 响应失败，直接显示了{{b}}
15     (4) Object.freeze()函数用来阻止修改属性,用来禁止【响应式】
16 -->

Vue（1）- 入门

原文：https://www.cnblogs.com/abdusalam10/p/11902036.html