Vue快速入门、Vue常用命令、Vue生命周期、Element快速入门、Element布局、Element组件

喜欢ヅ旅行 2023-10-07 20:57 25阅读 0赞

#### 文章目录 ####

*  Vue
 *   *  Vue快速入门
     *  Vue常用命令
     *  Vue生命周期
 *  Element
 *   *  Element 快速入门
     *  Element 布局
     *  Element 组件

## Vue ##

*  Vue 是一套前端框架，免除原生 JavaScrpit 中的 DOM操作，简化书写
 *  基于 MVVM（Model-View-ViewModel）思想，实现数据的双向绑定,将编程的关注点放在数据上
 *  官网：[官网][Link 1]  
    ![在这里插入图片描述][d69282b1335e469c92fea91a56450716.png]  
    ![在这里插入图片描述][d278f3352d604132bc84d4d6936de9d3.png]

### Vue快速入门 ###

*  1.新建 HTML 页面，引入 Vue.js文件  
    ![在这里插入图片描述][8928270af6ec4122812cd1833940c580.png]
 *  2.在 JS 代码区域，创建 Vue 核心对象，进行数据绑定  
    ![在这里插入图片描述][80d438ec28e9470aafe4bec1dffa6d4e.png]
 *  3.编写视图  
    ![在这里插入图片描述][c22a3ff8575e42f7a73586640fd2d183.png]

### Vue常用命令 ###

*  指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同意义。例如 v-if,v-for…
 *  常用指令  
    ![在这里插入图片描述][71e685c2bbb14cdfa51ff88d1be45306.png]  
    ![在这里插入图片描述][77930097cd1c4f929fdb290170413be2.png]
 *  v-bind：  
    ![在这里插入图片描述][ed0a2513a21943c28d2fe255f32be7bf.png]
 *  v-model:  
    ![在这里插入图片描述][9bbea9f1761c430796756e551afb5b43.png]  
    ![在这里插入图片描述][42e7feb16cf54a7d86aa350642c9e1e8.png]
 *  html:  
    ![在这里插入图片描述][ae7a21f1547a44aab147e1b543e3c8b6.png]
 *  vue:  
    ![在这里插入图片描述][65398a2fe84b4cd78575827fab3ccd3f.png]  
    ![在这里插入图片描述][ca2b952ffe954c569b885acb445f6e59.png]
 *  v-if:  
    ![在这里插入图片描述][9ccf6792fe404889a2fdad25f53675e5.png]
 *  v-show:  
    ![在这里插入图片描述][4027d190961b40d8b5282417cfe2b12e.png]  
    ![在这里插入图片描述][48e44f5ea23149419c9bed290b464611.png]
 *  v-for:  
    ![在这里插入图片描述][91f79b159bb44ff78fa6b720dc253ffc.png]
 *  加索引  
    ![在这里插入图片描述][f659c8c6d7b84d899731608edae038a2.png]

### Vue生命周期 ###

*  生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）  
    ![在这里插入图片描述][ce5df37dd7a84a09afeb062c43852032.png]  
    ![在这里插入图片描述][73e2c258bbc54b118dacd8665c5bc269.png]
 *  mounted:挂载完成，Vue初始化成功，HTML页面渲染成功
    
     *  发送异步请求，加载数据
 *  示例：  
    ![在这里插入图片描述][c12e9c38bf754cf0ab1a22d0175261de.png]

## Element ##

*  Element: 是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页
 *  组件：组成网页的部件，例如：超链接、按钮、图片、表格等等
 *  自己完成的按钮  
    ![在这里插入图片描述][6d53a993e06c4c5caf453b15df052bdc.png]
 *  Element 提供的按钮  
    ![在这里插入图片描述][19a32dd6e7624c8ead38a02cf0c79f86.png]
 *  Element 官网：[官网][Link 2]

### Element 快速入门 ###

*  1.引入 Element 的 css、js文件和 Vue.js  
    ![在这里插入图片描述][cd2ed89549374478a8a486de6901820f.png]
 *  2.创建 Vue 核心对象  
    ![在这里插入图片描述][61048e502b934df285a5e7b7ed59e63a.png]
 *  3.官方复制 Element 组件代码

### Element 布局 ###

*  Element 中有两种布局方式
    
     *  Layout 布局：通过基础的 24 分栏，迅速简便地创建布局  
        ![在这里插入图片描述][f05e1285757a49288e746f158e841f35.png]
 *  Container 布局管理器：用于布局的容器组件，方便快捷搭建页面的基本结构  
    ![在这里插入图片描述][0a5df91d37b94c7398f3ff2f72e27da1.png]

### Element 组件 ###

![在这里插入图片描述][5e154a591fe64872b742008d5afd67c8.png]

[Link 1]: https://cn.vuejs.org
[d69282b1335e469c92fea91a56450716.png]: https://img-blog.csdnimg.cn/d69282b1335e469c92fea91a56450716.png
[d278f3352d604132bc84d4d6936de9d3.png]: https://img-blog.csdnimg.cn/d278f3352d604132bc84d4d6936de9d3.png
[8928270af6ec4122812cd1833940c580.png]: https://img-blog.csdnimg.cn/8928270af6ec4122812cd1833940c580.png
[80d438ec28e9470aafe4bec1dffa6d4e.png]: https://img-blog.csdnimg.cn/80d438ec28e9470aafe4bec1dffa6d4e.png
[c22a3ff8575e42f7a73586640fd2d183.png]: https://img-blog.csdnimg.cn/c22a3ff8575e42f7a73586640fd2d183.png
[71e685c2bbb14cdfa51ff88d1be45306.png]: https://img-blog.csdnimg.cn/71e685c2bbb14cdfa51ff88d1be45306.png
[77930097cd1c4f929fdb290170413be2.png]: https://img-blog.csdnimg.cn/77930097cd1c4f929fdb290170413be2.png
[ed0a2513a21943c28d2fe255f32be7bf.png]: https://img-blog.csdnimg.cn/ed0a2513a21943c28d2fe255f32be7bf.png
[9bbea9f1761c430796756e551afb5b43.png]: https://img-blog.csdnimg.cn/9bbea9f1761c430796756e551afb5b43.png
[42e7feb16cf54a7d86aa350642c9e1e8.png]: https://img-blog.csdnimg.cn/42e7feb16cf54a7d86aa350642c9e1e8.png
[ae7a21f1547a44aab147e1b543e3c8b6.png]: https://img-blog.csdnimg.cn/ae7a21f1547a44aab147e1b543e3c8b6.png
[65398a2fe84b4cd78575827fab3ccd3f.png]: https://img-blog.csdnimg.cn/65398a2fe84b4cd78575827fab3ccd3f.png
[ca2b952ffe954c569b885acb445f6e59.png]: https://img-blog.csdnimg.cn/ca2b952ffe954c569b885acb445f6e59.png
[9ccf6792fe404889a2fdad25f53675e5.png]: https://img-blog.csdnimg.cn/9ccf6792fe404889a2fdad25f53675e5.png
[4027d190961b40d8b5282417cfe2b12e.png]: https://img-blog.csdnimg.cn/4027d190961b40d8b5282417cfe2b12e.png
[48e44f5ea23149419c9bed290b464611.png]: https://img-blog.csdnimg.cn/48e44f5ea23149419c9bed290b464611.png
[91f79b159bb44ff78fa6b720dc253ffc.png]: https://img-blog.csdnimg.cn/91f79b159bb44ff78fa6b720dc253ffc.png
[f659c8c6d7b84d899731608edae038a2.png]: https://img-blog.csdnimg.cn/f659c8c6d7b84d899731608edae038a2.png
[ce5df37dd7a84a09afeb062c43852032.png]: https://img-blog.csdnimg.cn/ce5df37dd7a84a09afeb062c43852032.png
[73e2c258bbc54b118dacd8665c5bc269.png]: https://img-blog.csdnimg.cn/73e2c258bbc54b118dacd8665c5bc269.png
[c12e9c38bf754cf0ab1a22d0175261de.png]: https://img-blog.csdnimg.cn/c12e9c38bf754cf0ab1a22d0175261de.png
[6d53a993e06c4c5caf453b15df052bdc.png]: https://img-blog.csdnimg.cn/6d53a993e06c4c5caf453b15df052bdc.png
[19a32dd6e7624c8ead38a02cf0c79f86.png]: https://img-blog.csdnimg.cn/19a32dd6e7624c8ead38a02cf0c79f86.png
[Link 2]: https://element.eleme.cn/#/zh-CNListener
[cd2ed89549374478a8a486de6901820f.png]: https://img-blog.csdnimg.cn/cd2ed89549374478a8a486de6901820f.png
[61048e502b934df285a5e7b7ed59e63a.png]: https://img-blog.csdnimg.cn/61048e502b934df285a5e7b7ed59e63a.png
[f05e1285757a49288e746f158e841f35.png]: https://img-blog.csdnimg.cn/f05e1285757a49288e746f158e841f35.png
[0a5df91d37b94c7398f3ff2f72e27da1.png]: https://img-blog.csdnimg.cn/0a5df91d37b94c7398f3ff2f72e27da1.png
[5e154a591fe64872b742008d5afd67c8.png]: https://img-blog.csdnimg.cn/5e154a591fe64872b742008d5afd67c8.png