Java Web(十二)Vue&Element
Vue&Element
一.Vue
1.概述
- Vue 是一套前端框架，免除原生 lavaScriptr 中的 DOM 操作，简化书写
- 基于 MVWM(Model--View-ViewModel))思想，实现数据的双向绑定，将编程的关注点放在数据上
- 官网：https://cn.vuejs..org
1.1 快速入门
- 新建 HTML 页面，引入 Vue.js 文件
<script src="js/vue.js"></script>- 在 JS 代码区域，创建 Vue 核心对象，进行数据绑定
new Vue({
el:"#app",
data(){
return{
username:""
}
}
});
- 编写视图
<div id="app">
<input name="username"v-model="username">
{{username)}
</div>
2.常用指令
- 指令:HTML 标签上带有 V-前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for.
- 常用指令
2.1 指令
- v-bind:
<a v-bind:href="url">百度一下</a> <!--
v-bind可以省略
-->
<a:href="url">百度一下</a>
- v-model:
<input name="username"v-model="username">- v-on:
- html
<input type-="button" value="一个按钮"v-on:click="show()"> <input type="button"value="一个按钮"@click="shoW">- vue
new Vue({
el:"#app",
methods:{
show(){
alert("我被点了");
}
}
});
- v-if
<div v-if="count == 3">div1</div>
<div v-else-if="count == 2">div2</div>
<div v-else>div3</div>
- v-show
<div v-show="count == 3">div4</div>- v-for
<div v-for="addr in addrs">
{{addr}}<br>
</div>
- 加索引
<div v-for="(addr,i)in addrs">
<!-i表示索引，从0开始->
{{i+1}}:{{addr}}<br>
</div>
3.生命周期
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
- 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
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet"href="element-ui/lib/theme-chalk/index.css">
创建 Vue 核心对象
<script>
new Vue({
el:"#app"
})
</script>
- 官网复制 Element 组件代码
2.Element 布局
- Element 中有两种布局方式:
- Layout 布局:通过基础的 24 分栏，迅速简便地创建布局
- Container 布局容器：用于布局的容器组件，方便快速搭建页面的基本结构
3.Element 组件
都多余了,上官网上找代码就行
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-11-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读