Vue核心基础6:Vue内置指令、自定义指令、生命周期

1 Vue中的内置指令

    

1.1 v-text

 

1.2 v-html

Vue核心基础6:Vue内置指令、自定义指令、生命周期_第1张图片

 

1.3 v-cloak

Vue核心基础6:Vue内置指令、自定义指令、生命周期_第2张图片

 

1.4 v-once

初始化的n值: {{n}}

当前的n值: {{n}}

Vue核心基础6:Vue内置指令、自定义指令、生命周期_第3张图片

 

1.5 v-pre

Vue其实很简单的

当前的n值: {{m}}

当前的n值: {{m}}

2 自定义指令

【代码】





    
    
    自定义指令
    



    
    

    

当前的n值:

放大十倍后的n值:


Vue核心基础6:Vue内置指令、自定义指令、生命周期_第4张图片

3 生命周期

【代码】





    
    
    分析生命周期
    



    

当前的n值是: {{n}}

Vue核心基础6:Vue内置指令、自定义指令、生命周期_第5张图片

Vue核心基础6:Vue内置指令、自定义指令、生命周期_第6张图片


 

Vue核心基础6:Vue内置指令、自定义指令、生命周期_第7张图片

 

你可能感兴趣的:(Vue,vue.js,javascript)