1、新建实例

引入vue.js之后就会生成一个全局变量Vue(),通过new Vue()的方式可以获得一个vue应用对象

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

• 新建实例

        <div id="app">
        <!-- 变量声明 -->
         {{title}}
          {{ message }} {{name}}
        </div>
        
        <script type="text/javascript">
        var app = new Vue({
            //引入vue.js之后就会生成一个全局变量Vue(),通过new Vue()的方式可以获得一个vue应用对象
          el: '#app',//el 表示元素，这里就表示app为id 的元素
          data: {//data 用于保存数据
            message: 'Hello Vue!',
            name:'vue',
            title:'第一个应用'
          }
        });
        </script>

2、 数据与方法

对变量a进行修改，可以采用
data1.a="helle ... new..."
vm.a="helle ... new..."
vm.$data.a="test..."

        <div id="firstdate">
            {{a}}
        </div>
        
        <script type="text/javascript">
        var data1={a:1};
        var vm= new Vue({
            el:"#firstdate",
            data:data1
        });

还可以使用watch方法跟踪变量的变化，记录变化前后的最新值和原来值
watch 方法一定要写在修改变量值之前

        vm.$watch('a',function(newVal,oldVal){
            console.log(newVal,oldVal);
        })
        
        vm.$data.a="test..."

3、生命周期

每个Vue实例在被创建时，都要经过一系列的初始化过程，比如设置数据监听、编译模板，将实例挂载到DOM并在数据变化时更新DOM等。在这个过程中Vue允许我们运行一些叫做生命周期钩子的函数，这样我们就可以在不同阶段添加自己的代码。
生命周期钩子需要写在新建new Vue()中，以属性的方式声明。
在Vue运行的每个阶段会自动的调用这些生命周期钩子。
在生命周期的函数中，不能使用this箭头函数
beforecreate create .....

var vm = new Vue({
    el : "#app",
    data : {
        msg : "hi vue",
    },
    在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    beforeCreate:function(){
        console.log('beforeCreate');
    },
    在实例创建完成后被立即调用。
    在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
    然而，挂载阶段还没开始，$el 属性目前不可见。 
    created :function(){
        console.log('created');
    },
    在挂载开始之前被调用：相关的渲染函数首次被调用
    beforeMount : function(){
        console.log('beforeMount');

    },
    el 被新创建的 vm.$el 替换, 挂在成功    
    mounted : function(){
        console.log('mounted');
    
    },
    数据更新时调用
    beforeUpdate : function(){
        console.log('beforeUpdate');
            
    },
    组件 DOM 已经更新, 组件更新完毕 
    updated : function(){
        console.log('updated');
            
    }
});
setTimeout(function(){
    vm.msg = "change ......";
}, 3000);