Vue与Element知识点

Vue：

        Vue概念：

                Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

                基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上

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

        Vue快速入门：

                1、新建HTML页面，引入Vue.js文件

                2、在JS代码区域，创建Vue核心对象，进行数据绑定

                3、编写视图

        Vue常用指令：

                指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义，例如v-if，v-for...

                常用指令：

                        v-bind        为HTML标签绑定属性值，如href，css样式等

                        v-model        在表单元素上创建双向数据绑定

                        v-on        为HTML标签绑定事件

                        v-if

                        v-else        条件性的渲染元素，判定为true时喧嚷，否则不渲染

                        v-else-if        

                        v-show        根据条件展示元素，区别在于切换的时display属性的值

                        v-for        列表渲染，遍历容器的元素或者对象的属性

        Vue生命周期：

                生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）：

                        beforeCreate：        创建前

                        created:                    创建后

                        beforeMount             载入前

                        mounted                    挂载完成

                        beforeUpdate             更新前

                        updated                      更新后

                        beforeDestory             销毁前

                        destoryed                    销毁后

                mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。

                        发送异步请求，加载数据        

Element：

        Element：是饿了吗公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页

        组件：组成网页的部件，例如：超链接、按钮、图片、表格等等

        Element快速入门：

                1、引入Element的css、js文件和Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

                2、创建Vue核心对象

new Vue({
    el:"#app"
})

                3、官网复制Element组件代码