Java Web(十二)Vue&Element

简介: 前端框架VUE的简单使用,后期对单独出Vue的使用

Vue&Element

一.Vue

1.概述

  • Vue是一套前端框架,免除原生lavaScriptr中的DOM操作,简化书写
  • 基于MVWM(Model--View-ViewModel))思想,实现数据的双向绑定,将编程的关注点放在数据上
  • 官网:https://cn.vuejs..org
    网络异常,图片无法展示
    |
    网络异常,图片无法展示
    |

1.1快速入门
  • 新建HTML页面,引入Vue.js文件

<scriptsrc="js/vue.js"></script>

  • 在JS代码区域,创建Vue核心对象,进行数据绑定

newVue({

   el:"#app",

   data(){

       return{

           username:""

       }

   }

});

  • 编写视图

<divid="app">

   <inputname="username"v-model="username">

   {{username)}

</div>

2.常用指令

  • 指令:HTML标签上带有V-前缀的特殊属性,不同指令具有不同含义。例如:V-if,V-for.
  • 常用指令
指令 作用
v-bind 为HTML标签绑定属性值,如设置href,css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性
2.1指令
  • v-bind:

<av-bind:href="url">百度一下</a>

<!--

v-bind可以省略

-->

<a:href="url">百度一下</a>

  • v-model:

<inputname="username"v-model="username">

  • v-on:
  • html

<inputtype-="button"value="一个按钮"v-on:click="show()">

<inputtype="button"value="一个按钮"@click="shoW">

  • vue

new Vue({

   el:"#app",

   methods:{

       show(){

           alert("我被点了");

       }

   }

});

  • v-if

<divv-if="count == 3">div1</div>

<divv-else-if="count == 2">div2</div>

<divv-else>div3</div>

  • v-show

<divv-show="count == 3">div4</div>

  • v-for

<divv-for="addr in addrs">

   {{addr}}<br>

</div>

  • 加索引

<divv-for="(addr,i)in addrs">

   <!-i表示索引,从0开始->

   {{i+1}}:{{addr}}<br>

</div>

3.生命周期

  • 生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
  • mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。
  • 发送异步请求,加载数据
  • 示例

new Vue({

   el:"#app",

   mounted(){

       alet("vue挂载完毕,发送异步请求");

   }

});

二.Element

1.概述

  • Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页
  • 组件:组成网页的部件,例如超链接、按钮、图片、表格等等~
  • 自己完成的按钮
    网络异常,图片无法展示
    |

  • Element提供的按钮
    网络异常,图片无法展示
    |

  • Element官网:https://element.eleme.cn/#/zh-CNListener
1.1快速入门
  • 引入Element的css、js文件和Vue.js

<scriptsrc="vue.js"></script>

<scriptsrc="element-ui/lib/index.js"></script>

<linkrel="stylesheet"href="element-ui/lib/theme-chalk/index.css">

  • 创建Vue核心对象

<script>

   newVue({

       el:"#app"

   })

</script>

  • 官网复制Element组件代码

2.Element布局

  • Element中有两种布局方式:
  • Layout布局:通过基础的24分栏,迅速简便地创建布局
  • 网络异常,图片无法展示
    |

  • Container布局容器:用于布局的容器组件,方便快速搭建页面的基本结构
    网络异常,图片无法展示
    |

3.Element组件

网络异常,图片无法展示
|

都多余了,上官网上找代码就行

目录
相关文章
|
10天前
|
SQL 监控 安全
Java Web应用的安全防护与攻防策略
Java Web应用的安全防护与攻防策略
|
11天前
|
消息中间件 Java 微服务
构建可扩展的Java Web应用架构
构建可扩展的Java Web应用架构
|
16天前
|
监控 负载均衡 Java
如何设计高可用性的Java Web应用程序
如何设计高可用性的Java Web应用程序
|
18天前
|
SQL 安全 Java
Java Web应用的安全防护与攻防深度剖析
Java Web应用的安全防护与攻防深度剖析
|
9天前
|
存储 JavaScript 前端开发
WEB三大主流框架之Vue.js
WEB三大主流框架之Vue.js
|
15天前
|
Java
java lab8--------7-2 sdut-JAVA-Insert Integer element into array lists
java lab8--------7-2 sdut-JAVA-Insert Integer element into array lists
7 0
|
17天前
|
JavaScript
vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭
vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭
15 0
|
17天前
|
SQL 监控 安全
Java Web应用的安全防护与攻防策略
Java Web应用的安全防护与攻防策略
|
17天前
|
缓存 监控 算法
构建高性能Java Web应用的技术策略
构建高性能Java Web应用的技术策略
|
1天前
|
安全 编译器 PHP
PHP 8:探索新特性及其对现代Web开发的影响
本文将深入探讨PHP 8版本中引入的新特性,以及这些更新如何影响现代Web开发的实践。我们将通过实际的代码示例和性能分析,展示PHP 8如何提升开发效率、加强安全性和增强应用性能,从而为开发者提供更优的编程体验。 【7月更文挑战第18天】
11 6