Vue过滤器、自定义指令、组件

目录

一：生命周期

1.1 生命周期实例

1.2 生命周期函数（引入）

二：过滤器

三：自定义指令

四：组件

4.1 非单文件组件

4.2 组件的嵌套

4.3 单文件组件

模板

4.3.1 架构 

4.3.2 不同版本的vue.JS

4.3.3 vue脚手架默认配置的修改文件

---

一：生命周期

1.1 生命周期实例

解析js代码

变成虚拟DOM

变成真实DOM

放到页面

在初始的真实DOM放到页面的时候，调用一个函数，只调用一次

    
    
    
    
    


    

        
生命周期
    
    

1.2 生命周期函数（引入）

特殊的时间点，vm帮忙调用的函数 

二：过滤器

    
    
    
    
    
    


    

        
显示格式化后的时间
        
{{fmttime}}
        
{{getTime()}}
        
{{time | timeFormater}}
        
{{time | timeFormater('YYYY-MM-DD') | myslice}}
        

    
    

        {{msg | myslice}}
    
    

三：自定义指令

    
    
    
    
    


    

        
当前的n:
        
目前的n:
        点我n++
        
    
    

    

        
当前的m:
        
    
    

四：组件

子组件放在父组件的上面

4.1 非单文件组件

4.2 组件的嵌套

4.3 单文件组件

搭建node.js

安装vue脚手架

创建目录rby

使用管理员cmd进入rby目录

vue create rby-vue

创建完成以后用自己的组件、App.vue、index.html、main.js去替换脚手架自己创建的文件

模板

MySchool.vue

MyStudent.vue

App.vue

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4.3.1 架构 

4.3.2 不同版本的vue.JS

4.3.3 vue脚手架默认配置的修改文件

pages修改默认启动路径

lintOnSave：false关闭语法检查

4.4 组件实例对象(ref)

组件间的通信

4.5 组件声明接受对象(props)

接收到的props不允许修改