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

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: 前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)

@TOC

一、vue.js

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

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

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

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

MV_VM:
Model-view-viewModel 是前端的一种架构思想

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

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

在这里插入图片描述
注意:

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

1. VUE里的指令

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

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

2、<div v-text="绑定名">aaaa</div>
它不能解析字符串里的标签

演示:

在这里插入图片描述

在这里插入图片描述

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

他可以将输入框里的value属性值与vue里的data数据绑定
在这里插入图片描述

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

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

    <input type="button" value="测试" v-on:click="test1()"/>
    <input type="button" value="测试" @click="test2()"/>

在这里插入图片描述
此处的this表示的是新建的Vue对象, 通过this来获取此处的属性

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

控制标签是否显示, 是通过dispaly来控制
在这里插入图片描述

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

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

不同点:
v-if=" ",它里面可以放入表达式

在这里插入图片描述
6、v-bind 绑定元素属性
v-bind: 属性名

在这里插入图片描述

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

在这里插入图片描述
6、v-for 通过for循环来输出指定数据

使用方式类似增强for循环

在这里插入图片描述

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

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

  4. 写自己的组件

在这里插入图片描述

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

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

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

  1. 在router文件里导入组件
    在这里插入图片描述

  2. 在main.js中配置路由
    导入router组件
    并且设置vue支持router
    将router挂载到Vue对象里
    在这里插入图片描述

  3. 最后不要忘记在app的div里添加router-view (路由视图) 用来切换组件
    在这里插入图片描述

    三、引入Element-ui组件

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

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

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

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

在这里插入图片描述


组件之间的转换:
在这里插入图片描述


相关文章
|
15天前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
23 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
17 3
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
16 3
|
3天前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
9 3
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
32 12
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
19 1
|
9天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
16 0
|
10天前
|
JavaScript 前端开发 中间件
Express框架搭建项目 node.js
【6月更文挑战第3天】这篇文章是关于使用Express框架构建Node.js Web应用的教程。Express是一个轻量级、功能丰富的框架,特点包括简洁灵活的核心、强大的中间件支持、灵活的路由系统和模板引擎兼容性。文章介绍了如何安装Express,并通过一个简单的示例展示了如何创建一个基本的Web服务器。最后,鼓励读者继续学习和实践,以充分利用Express和Node.js的能力。
9 1
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
12 2
|
13天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3