Vue学习总结_vue设计为自下而上逐层应用

一、概述

是什么：

        前端领域当前最火的三大js框架之一（Angular 2009由谷歌发布，React 2013年由facebook发布）Vue由我国在校大学生 尤雨溪2014年创建，2015年发布。

        Vue是一套用于构建用户界面的渐进式js框架，与其它大型框架不同的是，Vue被设计为可以自下而上逐层应用。Vue的核心只关注视图层，不仅容易上手，还便于与第三方库或者既有项目整合。

如何使用：

       官网：https://cn.vuejs.org/

       方法一、引入vue的包（<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>）

       方法二、直接使用脚手架(Vue-CLI)构建 (vue init webpack up)

二、常用指令

       v-bind: 将vue对象的data的属性和DOM节点的属性进行绑定【简写为 : 】

       v-text:更新DOM节点标签的文本内容 【简写为{{}}】

       v-html:更新DOM节点标签的文本内容，与v-text不同的是可以将内容中的标签渲染出来

       v-show 控制标签的显示与隐藏，其实就是通过操作CSS的display属性来实现的

       v-if 根据属性的值的真假渲染标签，与v-show的区别在于，v-if控制标签在节点上的上树下数操作

       v-for 遍历vue对象中的data数据

       v-on 给元素绑定事件，【简写为@】

       v-model 给标签绑定数据，注意：只能给表单元素使用

三、生命周期

     以下是Vue对象初始化的过程，重点关注 mounted

    var obj = new Vue({

        el:"#app", // 设置挂载点，制定该对象的作用域

        data:{},   // 数据初始化

        methods: { // 事件处理函数

            add() {}

        },

        watch: {}, // 监听属性代码

        components: { // 注册子组件

            mydiv: {

                template: '#my-tem',

                data() {

                    return {

                        code:200,

                        msg:'成功'

                    }

                },

                methods: {

                    add() {}

                }

            }

        },

        beforeCreate(){

            // 在创建实例之前执行一次

        },

        created() {

            // 实例创建完毕以后执行一次

        },

        beforeMount() {

            // 实例创建完毕且和模板进行关联之前执行一次

        },

        mounted() {

            // 与DOM节点绑定成功之后执行，实际工作中用的最多，在此调用后端接口

        },

        beforeUpdate() {

            // 当数据发生改变时执行一次

        },

        updated() {

            // 当数据改变以后立即执行一次

        }

    });

 

四、组件开发

         组件其实相当于Java中的对象，封装组件的目的就是为了复用。

         Vue中的组件分为两种：【全局组件】【局部组件】

        局部组件需要在Vue 对象的 components里面进行注册，见-第三步。

        组件的使用：自定义的组件，直接通标签的方式来使用，比如我们第三步定义的子组件mydiv,直接在页面vue对象操作的范围内写 <mydiv></mydiv> 即可