Java Web(十二)Vue&Element

作者：浅辄

2022-11-16
吉林
本文字数：1170 字
阅读完需：约 4 分钟

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">

复制代码

    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 组件

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

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/c43e8ec20b2c874f229c9ef08】。文章转载请联系作者。

浅辄

关注

大丈夫生于天地之间,岂能郁郁久居人之下 2022-11-08 加入

阿里云技术博主认证

发布

暂无评论

创作场景

Java Web(十二)Vue&Element

Vue&Element

一.Vue

1.概述

1.1 快速入门

2.常用指令

2.1 指令

3.生命周期

二.Element

1.概述

1.1 快速入门

2.Element 布局

3.Element 组件

浅辄

评论