vue从入门到精通day03

day03

1、生命周期钩子（回调函数）

​ 给我们机会可以干预vue的工作流程
​ 生命周期的执行顺序是固定的
​

创建前  初始化数据前    数据打印看不到
创建后    初始化数据后    数据打印可以看到

挂载前    初始页面不显示  初始页面的元素看不到
挂载后    初始页面显示    初始页面元素可以看到




更新前    页面更新前    实例数据是对的页面渲染的数据是错的
更新后    页面更新后    实例数据是对的页面渲染的数据是对的

销毁前    实例销毁前    在销毁前内部清除定时器
销毁后    实例销毁后    一般不用


使用mounted和beforeDestory比较频繁，mounted内部我们经常去做异步操作，添加事件 定时器  ajax
当调用了vm.$destroy(),    beforeDestory和destoryed才会执行，beforeDestory做收尾工作：清除定时器等

2、过渡和动画的实现

​ 参考官网
​ 类名会自动添加给需要的元素，也就是transition标签内部的元素

3、vue的内置指令

​ v-text
​ v-html
​ v-on //绑定事件 简写@
​ v-bind //单向数据绑定 ：
​ v-for //列表渲染
​ v-if //条件渲染
​ v-else
​ v-show //条件渲染
​ v-model
​ ref //为特定的元素添加引用标识，实例的$refs内部可以获取到

​

4、自定义过滤器（参考官网）

​ 展示数据的时候，对数据进行处理（格式化之后再显示，不会影响原数据）
​ 使用moment插件
​ 定义全局过滤器
​ Vue.filter('过滤器名字'，回调函数)；
​ 定义局部过滤器
​ 在vm当中fliters对象当中配置

5、自定义指令(和定义过滤器很像，参考官网)

定义全局指令
    Vue.directive('过滤器名字'，回调函数)；
定义局部指令
    在vm当中directives对象当中配置

注意：指令的名称必须是全小写，不能大写

6、自定义插件（参考官网）

​ 插件的作用：
​ 定义插件对象，为Vue和Vue的实例添加一些额外功能

插件对象必须声明使用  Vue.use（）

7、自定义组件（非单文件组件）

定义全局组件：
    复杂方式：
        1、定义组件，本质是通过Vue.extend(option配置对象)定义一个组件函数（以后用来作为构造函数使用）
        2、注册组件，本质就是为组件定义一个组件名称（组件标签名） Vue.component('标签名'，组件函数)
        3、使用组件，组件标签名在解析的时候会自动对应到每一个组件函数的实例，每个实例服务一个组件标签
    简化方式：
        简化方式： Vue.component('标签名'，option配置对象)

    组件当中的data选项为什么非得是一个函数，而不能是一个对象？

定义局部组件：

​
​
​

缺点：
    这样定义组件麻烦、模板没提示
    样式没法单独搞，
    没法使用模块化解析ES6语法

​

8、单文件组件（把上面的父子组件改为单文件组件）

1、先在你的项目当中创建一个components文件夹，用于放置我们后期定义的组件（配置对象）
2、在你写代码的地方，一般我们需要创建一个App.vue的文件，它用于组装我们定义好的组件，App本质也是一个组件
3、vm实例最终只需要去把App组件给注册然后去渲染就好了

​
​

一个.vue文件，里面包含了组件的结构样式和行为，其实本质就是我们的配置对象（文件）



写法高亮 比较明了  但是需要模块化  需要搭建环境

​

9、脚手架的安装和目录结构

10、组件模板解析

​ Vue渲染两种方式：
​ 1、render：h => h(App)
​ 2、components注册组件，template解析，但是vue导入需要导入带解析器的版本