Vue 元素挂载、方法、生命周期钩子函数

目录

一、元素挂载

 二、vue的方法

三、生命周期钩子函数

---

 

一、元素挂载

        在Vue.的构造函数中有一个el选项，该选项的作用是为了Vue实例提供挂载元素。

        如下在div中定义了一个id "element",在script引入vue.js后创建vue实例，vue实例中的el即挂载元素，需要与div中的id对应。data选项定义数据，在div中使用双括号{{}}绑定data中的数据。

<div id="element">
    <h3>{{text}}</h3>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo=new Vue({
        el:'#element',
        data:{
            text:'Hello World'
        }
    })
</script>

元素的挂载，如果div中有多个相同的id，vue实例的元素的挂载匹配为从上往下第一个id，有效范围为第一个id下的所有深度

---

 二、vue的方法

        在Vue实例中，通过methods选项可以定义方法，一样通过双括号进行绑定。实例如下：

<div id="element">
    <h3>{{demo()}}</h3>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo=new Vue({
        el:'#element',
        data:{
            text:'Hello World'
        },
        methods:{
            demo:function(){
                return 'Hello World'+this.text;
            }
        }
    })
</script>

---

三、生命周期钩子函数

        每个vue在创建的时候都会有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到DOM并在数据变化时触发DOM更新、销毁实例等，在这个过程中会运行一些叫做生命周期钩子的函数。Vue实例中的钩子函数如下：

        创建期间的四个声明周期函数

1. beforeCreate() Vue实例完全被创建出来之前，会执行它，当beforeCreate，data和methods数据还未初始化
2. created() 实例创建之后调用，data和methods中的数据已经被初始化
3. beforeMount() 实例对象挂载之前，模板已经在内存中编辑完成，但还没有渲染到页面
4. mounted() 实例对象挂载之后，将内存中编译好的模板替换到浏览器页面中，用户可以看到渲染好的页面了，这时候，Vue组件已经创建完毕

        运行和销毁期间一共有两个声明周期函数：

1. beforeUpdate() 界面还没有被更新，但是数据更新了
2. updated() 事件执行的时候，界面和data数据保持同步了（最新）

        其它声明周期函数

1. beforeDestroy() Vue实例已经从运行阶段进入到了销毁阶段，组件中的数据、方法仍然可用
2. destroyed() Vue实例完全被销毁了，组件中的数据、方法都不可用了

<div id="element">{{text}}</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            text: 'Hello world'
        },
        beforeCreate: function () {
            console.log('beforeCreate'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        created: function () {
            console.log('created'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        beforeMount: function () {
            console.log('beforeMount'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        mounted: function () {
            console.log('mounted'+' —— el:'+this.$el+' —— data: '+this.text)
            this.text='Hello World';
        },
        beforeUpdate: function () {
            console.log('beforeUpdate'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        updated: function () {
            console.log('updated'+' —— el:'+this.$el+' —— data: '+this.text)
            this.$destroy();
        },
        beforeDestroy: function () {
            console.log('beforeDestroy'+' —— el:'+this.$el+' —— data: '+this.text)
        },
        destroyed: function () {
            console.log('destroyed'+' —— el:'+this.$el+' —— data: '+this.text)
        }
    })
</script>