JavaScript教程之Vue.js 相关知识（组件）(2)

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之Vue.js 相关知识（组件）(2)

id="app"> 出生年月： <input v-model="birthday" type="" name=""><br> 年龄：<p>{{age}}</p> </div> <script type="text/javascript"> let app = new Vue({ el:'#app', data:{ birthday:'', age:0 }, watch:{ birthday(){ setTimeout(()=>{ this.age = new Date().getFullYear()-new Date(this.birthday).getFullYear(); },3000) } } }) </script>

8. Vue 实例的生命周期

实例化的Vue对象（根组件）以及自定义的组件对象都有生命周期，Vue 设计者为方便调试程序，提供了8个钩子函数：

    <div id="app">
    　　{{name}}    
    </div>
    <script type="text/javascript">
        let app = new Vue({
            data:{
                name:'David'
            },
            beforeCreate(){
                alert('beforeCreate')
            },
            created(){
                alert('created')
            },
            beforeMount(){
                alert('beforeMount')
            },
            mounted(){
                alert('mounted')
            },
            beforeUpdate(){
                alert('beforeUpdate')
            },
            updated(){
                alert('updated')
            },
            beforeDestory(){
                alert('beforeDestory')
            },
            destroyed(){
                alert('destroyed')
            }
        })    
        app.$mount('#app')
        app.$destroy('name')    
    </script>

生命周期函数作用：在不同的阶段，做相应的工作

created阶段，初始化数据，创建数据对象
mounted阶段，使用数据项替换模板，即将数据挂载到DOM元素节点上
updated阶段，当DOM节点中的数据发生改变，在此阶段进行更新

9. 动态组件

可定义多个组件，再使用 :is 属性动态地在多个组件之间切换

语法：<component v-bind:is=”组件名”></component>

Component 相当于一个占位符，具体显示哪个组件，通过:is指定

    <div id="app">
        <span @click="currentCom='FirstCom'">第一个</span>
        <span @click="currentCom='SecondCom'">第二个</span>
        <component :is="currentCom"></component>
    </div>
    <template id="com1">
        <div>第一个组件</div>
    </template>
    <template id="com2">
        <div>第二个组件</div>
    </template>
    <script type="text/javascript">
        let FirstCom={
            template:'#com1',
            mounted(){
                console.log("第一个被渲染")
            }
        }
        let SecondCom={
            template:'#com2',
             mounted(){
                console.log("第二个被渲染")
            }
        }
        let app = new Vue({
            el:"#app",
            data:{
                currentCom:''
            },
            components:{
                FirstCom,
                SecondCom
            }
        })
    </script>

keep-alive 组件

无 keep-alive 组件时，每次切换组件都重新创建一次组件，使用 keep-alive后，会将创建过的组件保存在内存中，以后使用时直接使用，而不会每次重新创建

    <div id="app">
        <span @click="currentCom='FirstCom'">第一个</span>
        <span @click="currentCom='SecondCom'">第二个</span>
        <keep-alive>
            <component :is="currentCom"></component>
        </keep-alive> 
    </div>
    <template id="com1">
        <div>第一个组件</div>
    </template>
    <template id="com2">
        <div>第二个组件</div>
    </template>
    <script type="text/javascript">
        let FirstCom={
            template:'#com1',
            mounted(){
                console.log("第一个被渲染")
            }
        }
        let SecondCom={
            template:'#com2',
             mounted(){
                console.log("第二个被渲染")
            }
        }
        let app = new Vue({
            el:"#app",
            data:{
                currentCom:''
            },
            components:{
                FirstCom,
                SecondCom
            }
        })
    </script>

栏目列表