前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)

àì夳堔傛蜴生んèń 2023-09-26 20:34 106阅读 0赞

#### 目录 ####

*   *  一、vue.js
     *  1. VUE里的指令
     *  二、创建vue-cli脚手架项目
     *  三、引入Element-ui组件

### 一、vue.js ###

> 是前端的一个框架  
> 框架: 框架就是技术, 代码的封装, 在框架的基础上进行开发, 语法简单高效

> vue是一套用于构建用户界面的渐进式框架,与Angular.js , React.js一起, 是前端的三大框架

> 由于用JQuery 或者原生的javaScript DOM操作函数树对DOM进行频繁的操作时候, 浏览器需要不停的渲染新的DOM树, 导致页面看起来卡顿问题

特点: 双向数据绑定, , 简化Dom操作, 通过MVVM思想实现数据的双向绑定, 不再操作DOM对象

MV\_VM:  
Model-view-viewModel 是前端的一种架构思想

> 可以实现js中的数据与网页中的标签之间进行双向的数据绑定, 任意一方改变, 都可以自动更新到另一方

Vue 实例:  
要使用前要进行js文件的导入  
![在这里插入图片描述][b3d2fb9b77564275b82b2739a4003fbc.png]  
进入下载vue.js文件之后,导入项目的js下面  
![在这里插入图片描述][fc9e4844fbfa453cba13efc9083c3dac.png]

![在这里插入图片描述][3c0bf6ed3de5480390c160561d4c86d8.png]  
**注意:**

> 1.  vue 会管理el选择命中元素及其内部的后代元素
> 2.  可以使用其他选择器, 建议使用ID选择器
> 3.  能跟body进行绑定

### 1. VUE里的指令 ###

1、`<div v-html="绑定名">aaaa</div>`

> 它可以解析字符串里的标签

2、`<div v-text="绑定名">aaaa</div>`

> 它不能解析字符串里的标签

演示:

![在这里插入图片描述][1f96a058fdda425b82c8a89b186527c8.png]

![在这里插入图片描述][0b20c1850f9b41469100928f253e754d.png]

3、`<input v-model="message" />`

> 他可以将输入框里的value属性值与vue里的data数据绑定  
> ![在这里插入图片描述][897a3f099b2541ae9eddbe580062fe62.png]

4、 v-on:click=“被调用函数” @click=“被调用函数”

> v-on 或者 @事件名 为标签添加点击事件 为事件绑定处理函数

![在这里插入图片描述][282aff2c5c2e4462bc0f27a614fde440.png]  
`此处的this表示的是新建的Vue对象, 通过this来获取此处的属性`

5、v-show=“isshow” 值为true 或者 false , true是显示, false是消失

> 控制标签是否显示, 是通过dispaly来控制  
> ![在这里插入图片描述][bc4900a9b5a94c97a1dc4cf02c7ac3fb.png]

6、v-if=“isshow” 值为true 或者 false , true是显示, false是消失

> 相比较v-show="isshow"来说, 效率更低, v-if是通过操作dom来删除创建标签对象

**不同点:  
v-if=" ",它里面可以放入表达式**  
![在这里插入图片描述][219ab07886584f719fca1e03e70fd792.png]  
6、v-bind 绑定元素属性  
v-bind: 属性名

![在这里插入图片描述][1030f2d2fb41410eadaa5c6aeff5e7b9.png]

> v-bind:class=“\{dzcss:dz\}”  
> 此时标签类名是dzcss  
> dz是一个bolean值,为真就更更改css,反之

> ![在这里插入图片描述][b3d3c6d132d14d55a50c998bd037bc4b.png]  
> 6、v-for 通过for循环来输出指定数据

使用方式类似增强for循环

![在这里插入图片描述][8658dc051d4740c883964bf1e228df54.png]

### 二、创建vue-cli脚手架项目 ###

1.  首先要安装一个前端的运行环境nodes  
    安装好后还要配置环境变量,在电脑环境变量里的Path目录下  
    ![在这里插入图片描述][2d11e23d70b049ec9a1d46430e4ae926.png]  
    检查是否安装成功:  
    可以在cmd打开命令框,并且输入node -v  
    如果出现node版本, 那就说明已经安装成功环境变量也已经配置好了
2.  在Hbuider里面要新建vue-cli 项目,版本是2.6.10,其他版本可能就有语法上的差异
3.  vue-cli项目结构解析  
    ![在这里插入图片描述][3e8799a4dfb24bc1b5a3679bd04558f4.png]  
    npm run serve来开启服务器,访问弹出的网址,如果有页面就说明一切都ok
4.  写自己的组件

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

1.  当你创建许多个vue组件的话,还要配置路由地址,所有需要一个router组件来集中管理他,并且配置路由地址

在使用router之前要从官网导入组件,在Hbuilder的命令框里输入npm i vue-router@3.5.3进行安装,安装后可以在node-moudles寻找  
![在这里插入图片描述][54b92b07bce74387b2fa2572603099c3.png]

安装号router组件之后,在src下创建一个router文件夹,并且在里面新建一个index.js文件,在里面管理组件  
如图:  
![在这里插入图片描述][ae10904fb85f46dd89089601c4afe697.png]  
6. 在router文件里导入组件  
![在这里插入图片描述][cca4eea60d0e41f6a0fc6800895c86ca.png]

1.  在main.js中配置路由  
    导入router组件  
    并且设置vue支持router  
    将router挂载到Vue对象里  
    ![在这里插入图片描述][0f986e687b544cc3bdb2c8169467b0aa.png]
2.  最后不要忘记在app的div里添加router-view (路由视图) 用来切换组件  
    ![在这里插入图片描述][e1454fa573584293b7fbc596bcaee72e.png]

### 三、引入Element-ui组件 ###

> 也就是为开发者使用写好的组件  
> 直接拿来用就可以

1.  首先在终端里面安装 模块

使用命令: `npm i element-ui`来导入模块

1.  然后全局配置文件.js里进行配置与导入  
    导入element-ui并且设置vue支持权限

![在这里插入图片描述][91cdff4794714d4ba85a3581f2fb1ef9.png]

--------------------

组件之间的转换:  
![在这里插入图片描述][9fd2db8dd57241729bbd4d4704c9e0bf.png]

--------------------

[b3d2fb9b77564275b82b2739a4003fbc.png]: https://img-blog.csdnimg.cn/b3d2fb9b77564275b82b2739a4003fbc.png
[fc9e4844fbfa453cba13efc9083c3dac.png]: https://img-blog.csdnimg.cn/fc9e4844fbfa453cba13efc9083c3dac.png
[3c0bf6ed3de5480390c160561d4c86d8.png]: https://img-blog.csdnimg.cn/3c0bf6ed3de5480390c160561d4c86d8.png
[1f96a058fdda425b82c8a89b186527c8.png]: https://img-blog.csdnimg.cn/1f96a058fdda425b82c8a89b186527c8.png
[0b20c1850f9b41469100928f253e754d.png]: https://img-blog.csdnimg.cn/0b20c1850f9b41469100928f253e754d.png
[897a3f099b2541ae9eddbe580062fe62.png]: https://img-blog.csdnimg.cn/897a3f099b2541ae9eddbe580062fe62.png
[282aff2c5c2e4462bc0f27a614fde440.png]: https://img-blog.csdnimg.cn/282aff2c5c2e4462bc0f27a614fde440.png
[bc4900a9b5a94c97a1dc4cf02c7ac3fb.png]: https://img-blog.csdnimg.cn/bc4900a9b5a94c97a1dc4cf02c7ac3fb.png
[219ab07886584f719fca1e03e70fd792.png]: https://img-blog.csdnimg.cn/219ab07886584f719fca1e03e70fd792.png
[1030f2d2fb41410eadaa5c6aeff5e7b9.png]: https://img-blog.csdnimg.cn/1030f2d2fb41410eadaa5c6aeff5e7b9.png
[b3d3c6d132d14d55a50c998bd037bc4b.png]: https://img-blog.csdnimg.cn/b3d3c6d132d14d55a50c998bd037bc4b.png
[8658dc051d4740c883964bf1e228df54.png]: https://img-blog.csdnimg.cn/8658dc051d4740c883964bf1e228df54.png
[2d11e23d70b049ec9a1d46430e4ae926.png]: https://img-blog.csdnimg.cn/2d11e23d70b049ec9a1d46430e4ae926.png
[3e8799a4dfb24bc1b5a3679bd04558f4.png]: https://img-blog.csdnimg.cn/3e8799a4dfb24bc1b5a3679bd04558f4.png
[a2761e51647c46dd9556c455d23c095b.png]: https://img-blog.csdnimg.cn/a2761e51647c46dd9556c455d23c095b.png
[54b92b07bce74387b2fa2572603099c3.png]: https://img-blog.csdnimg.cn/54b92b07bce74387b2fa2572603099c3.png
[ae10904fb85f46dd89089601c4afe697.png]: https://img-blog.csdnimg.cn/ae10904fb85f46dd89089601c4afe697.png
[cca4eea60d0e41f6a0fc6800895c86ca.png]: https://img-blog.csdnimg.cn/cca4eea60d0e41f6a0fc6800895c86ca.png
[0f986e687b544cc3bdb2c8169467b0aa.png]: https://img-blog.csdnimg.cn/0f986e687b544cc3bdb2c8169467b0aa.png
[e1454fa573584293b7fbc596bcaee72e.png]: https://img-blog.csdnimg.cn/e1454fa573584293b7fbc596bcaee72e.png
[91cdff4794714d4ba85a3581f2fb1ef9.png]: https://img-blog.csdnimg.cn/91cdff4794714d4ba85a3581f2fb1ef9.png
[9fd2db8dd57241729bbd4d4704c9e0bf.png]: https://img-blog.csdnimg.cn/9fd2db8dd57241729bbd4d4704c9e0bf.png