脚本宝典收集整理的这篇文章主要介绍了Vue & Element,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
先了解一下前端开发模式的发展。
静态页面
最初的网页以 HTML 为主,是纯静态的网页。网页是只读的,信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容。
异步刷新,操作 DOM
1995 年,网景工程师 Brendan Eich 花了 10 天时间设计了 JavaScript 语言。 随着 JavaScript 的诞生,我们可以操作页面的 DOM 元素及样式,页面有了一些动态的效果,但是依然是以静态为主。
Ajax 盛行
MVVM,关注模型和视图
2008 年,google 的 Chrome 发布,随后就以极快的速度占领市场,超过 IE 成为浏览器市场的主导者。
2009 年,Ryan Dahl 在谷歌的 Chrome V8 引擎基础上,打造了基于事件循环的异步 I/O 框架:Node.js 。
Node.js 的伟大之处不在于让 JS 迈向了后端开发,而是构建了一个庞大的生态系统。
2010 年,NPM 作为 Node.js 的包管理系统首次发布,开发人员可以遵循 Common.js 规范来编写 Node.js 模块,然后发布到 NPM 上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
随后,在 node 的基础上,涌现出了一大批的前端框架:
在 MVVM 之前,开发人员首先从后端获取需要的数据模型,然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图时,我们还需要通过 DOM 获取 View 中的数据,然后同步到 Model 中。
而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来,开发人员不用再关心 Model 和 View 之间是如何互相影响的:
MVVM 把开发人员从繁琐的 DOM 操作中解放出来,把关注点放在如何操作 Model 上。
什么是 Vue ?
Vue 是一套用于构建用户界面的渐进式前端框架,通过视图与模型(MV)的双向绑定,简化了前端操作,以提高前端开发效率。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头:
Vue 特点:
渐进式
:可以选择性地使用该框架的一个或一些组件,这些组件的使用也不需要将框架全部组件都应用;而且用了这些组件也不要求你的系统全部都使用该框架。简单易用
灵活
:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。性能
:20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。Vue 其实是一个 js 文件,因此其使用方法是下载 vue.js 文件并在页面中引入该 js 文件。
vue.js 的下载方式:
方式一:引用在线的 vue.js
<!--开发环境版本,包含了用帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度-->
<script src="https://cdn.isdelivr.net/npm/vue"></script>
方法二:离线下载 vue.js
下载地址
方法三:使用 npm 包资源管理器下载 vue.js
在项目的根目录下执行以下命令:
# 初始化
npm init -y
# 下载 vue 模块
npm install vue --save
下载成功后生成:
Vue 开发步骤:
{{变量名}}
new vue({参数列表})
el
:接收获取的元素data
:保存数据methods
:定义方法钩子函数
:不同的钩子函数会在 Vue 实例生命周期中不同的阶段自动调用,具体有:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、boforeDestroy、destroyed 等。其中 created 较为常用,常用于在 Vue 实例化时初始化数据。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>信息:{{msg}}</div>
<div>姓名:{{name}}</div>
<div>班级:{{className}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
<script text="text/javascript">
// 创建vue实例对象
var vm = new Vue({
el: "#app", // el:用于接收获取到的页面元素,即定义了视图范围(根据常用选择器获取)。
data: { // 用于保存当前Vue实例对象中的数据。在视图中声明的变量需要在此处赋值(如 msg 变量)。
name: "张三",
className: "幼儿园"
},
methods:{ // 用于定义方法。方法可以直接通过对象名调用,this代表当前Vue实例对象。
study(){
alert(this.name + " 正在 " + this.className + " 好好学习!");
}
},
// 钩子函数
created() {
this.msg = "hello vue, created.";
console.log(this);
}
});
//定义打招呼方法
function hi(){
vm.study();
}
//定义修改班级
function update(){
vm.className = "大班";
}
</script>
</body>
</html>
页面效果:
Vue 指令:是指带有v-
前缀的特殊属性,例如 v-html,v-if,v-for 等,不同指令具有不同含义。
使用指令时,通常编写在标签的属性上,值可以使用 JS 表达式。
常用指令如下:
插值可以使用在需要显示 vue 实例教据的地方,可以在插值表达式中调用实例的数据属性和函数。
v-text 和 v-html 的作用:可以将数据在模板中进行显示。
区别:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插值</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<div>{{msg}}</div>
<div v-html="msg"></div>
<div v-text="msg"></div>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
msg:"<b>Hello Vue</b>"
}
});
</script>
</html>
页面效果:
刚才的 v-text 和 v-html 可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。而 v-model 则是双向绑定的,视图(View)和模型(Model)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型,目前 v-model 的可使用元素有:
基本上除了最后一项,其它都是表单的输入项。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双向绑定</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br/>
<input type="checkbox" value="Python" v-model="language">Python<br/>
<input type="checkbox" value="Go" v-model="language">Go<br/>
<h2>
您选择了:{{language.join(",")}} <!-- 使用逗号组合 -->
</h2>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
language:[]
}
});
</script>
</html>
页面效果:
v-on 用于给页面元素绑定事件。
语法:v-on:事件名="js片段或函数名"
简写语法:@事件名="js片段或函数名"
例如v-on:click="add"
可以简写为@click="add"
。
在事件处理程序中调用 event.preventDefau1t() 或 event.stoppropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.is 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的:
.stop
:阻止事件冒泡.prevent
:阻止默认事件发生.capture
:使用事件捕获模式.self
:只有元素自身触发事件才执行(冒泡或捕获的都不执行).once
:只执行一次示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件绑定</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="num++">增加</button>
<button @click="decrement">减少</button>
<h2>
num = {{num}}
</h2>
<hr>
事件冒泡测试:<br/>
<div @click="print('div被点击了')">
<!-- 如果不加.stop,那么在触发button的click事件时,也会同时触发父节点div的click事件 -->
<button @click.stop="print('点击了button')">点我试试</button>
</div>
<br/>
阻止默认事件:<br/>
<!--
如果不加.prevent,则页面会进行跳转
加了.prevent,则只会触发print方法,而不会进行跳转页面
-->
<a href="https://www.baidu.com" @click.prevent="print('点击了超链接')">超链接</a>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num: 1
},
methods:{
// 递减
decrement() {
this.num--;
},
// 打印
print(str) {
console.log(str);
}
}
});
</script>
</html>
页面效果:
遍历数据以渲染页面时非常常见的需求,Vue 中通过 v-for 指令来实现。
具体实现方式:可以在 vue 实例化的时候指定要遍历的数据,然后通过 v-for 指令在模板中遍历显示数据。一般情况下,要遍历的数据可以通过钩子函数 created() 发送异步请求获取数据。
数组遍历:
语法:v-for="item in items"
对象遍历:
v-for 除了可以遍历数组,也可以迭代对象。两者语法基本类似。
语法:
v-for="vabue in object"
v-for="(value, key) in object"
v-for="(value, key, index) in object"
key:
当 Vue.is 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
如果使用 key 这个功能可以有效的提高渲染的效率;key 一般使用在遍历完后又增、减集合元素时,更有意义。
但是要实现这个功能,你需要给 Vue 一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的id。也就是 key 是该项的唯一标识。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 数组遍历 -->
<li v-for="user in users">
{{user.name}}--{{user.age}}--{{user.hobby}}
</li>
<hr>
<!-- 对象遍历 -->
<li v-for="(value, key, index) in person">
{{value}}--{{key}}--{{index}}
</li>
<hr>
<!--
这里使用了一个特殊语法`:key=""`后文会讲到。
它可以让你读取 vue 中的属性,并赋值给 key 属性。
这里绑定的 key 是数组的索引,应该是唯一的。
-->
<li v-for="(user, index) in users" :key="index">
{{index}}--{{user.name}}--{{user.age}}--{{user.hobby}}
</li>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users: [
{"name":"xiaoming", "age":13, "hobby":"basketball"},
{"name":"xiaohua", "age":11, "hobby":"piano"},
{"name":"xiaoshu", "age":16, "hobby":"dance"}
],
person: {"name":"xiaosi", "age":17, "hobby":"study", "nation":"中国"}
}
});
</script>
</html>
页面效果:
v-if:顾名思义,条件判断。当得到结果为 true 时,所在的元素才会被渲染。
语法:v-if="布尔表达式"
另一个用于根据条件展示元素的选项是 v-show 指令,用法大致一样。不同的是,带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性为 display。
总结:
示例一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件判断</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<!-- 判断num的值,对3取余:若余数为0则显示div1,余数为1则显示div2,余数为2则显示div3 -->
<div v-if="num % 3 == 0">div1</div>
<div v-else-if="num % 3 == 1">div2</div>
<div v-else="num % 3 == 2">div3</div>
<div v-show="flag">div4</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
num:1,
flag:false
}
});
</script>
</html>
页面效果:
示例二:
当 v-if 和 v-for 出现在一起时,v-for 优先级更高。也就是说,会先遍历,再判断条件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show=!show">点我</button>
<h2 v-if="show">
Hello Vue.js
</h2>
<ul>
<li v-for="user in users" v-if="user.gender=='女'" style="background-color: aqua">
{{user.name}}--{{user.age}}--{{user.gender}}
</li>
<li v-else style="background-color: indianred">
{{user.name}}--{{user.age}}--{{user.gender}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
show :true,
users: [
{"name":"xiaoming", "age":13, "gender":"男"},
{"name":"xiaohua", "age":11, "gender":"女"},
{"name":"xiaoshu", "age":16, "gender":"女"}
]
}
});
</script>
</html>
页面效果:
v-bind 的作用:
可以对所有元素的属性设置 vue 实例的数据。
例如 <img src="" height="">,其中 src 和 height 的值如果不想写死,而是想获取 vue 实例中的数据属性值的话,那么就可以通过使用 v-bind 实现:
<!-- v-bind: 可简写为剩余一个冒号 -->
<img v-bind:src="vue实例中的数据属性名" :height="vue实例中的数据属性名"/>
class 属性的特殊用法:
Vue 对 class 属性进行了特殊处理,可以接收数组或对象格式的语法。
如可以传给 class 一个对象,以动态地切换 class:
<div :class="{red:true, blue:fa1se}"></div>
对象中,key 是已经定义的 class 样式的名称,value 是一个布尔值,如果为 true,则这个样式会生效,如果为 false,则该样式不生效。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
div {
width: 100px;
height: 110px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div v-bind:class="color">
点击按钮改变背景颜色
</div>
<hr>
<button @click="flag=!flag">点我改变背景颜色</button>
<!-- red和blue是已定义好的CSS样式 -->
<div :class="{red:flag, blue:!flag}">
点击按钮改变背景颜色
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
color: "red",
flag: true
}
});
</script>
</html>
页面效果:
计算属性(computed)的作用:在插值或者指令表达式较为复杂的时候,可以将一些属性数据先经过方法处理之后再返回给使用方。
例如,要将一个日期的亳秒值显示为格式化(yyyy-MM-dd)日期字符串,那么就可以使用 computed 计算属性里面的方法进行处理。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
您的生日是:{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
<hr>
<!-- 使用computed -->
<h2>
您的生日是:{{birth}}
</h2>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
birthday: 1429032123201,
},
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDay();
}
}
});
</script>
</html>
页面效果:
在 vue 实例中,数据属性因为在页面中修改而产生了变化时,可以通过 watch 监控获取其改变前后的值。
如果是修改的对象数据属性,可以开启深度监控,获取修改后最新的对象数据。
使用场景:可以监控视图中数据的变化以做出响应。如下拉框列表中,当如果选择了对应的下拉框选项后,要根据选择值去加载一些其它数据。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>watch</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<hr>
<input type="text" v-model="person.name"><br>
<input type="text" v-model="person.age"><button @click="person.age++">+</button>
<h3>
姓名为:{{person.name}};年龄为:{{person.age}}
</h3>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message: "hello vue",
person: {"name":"xiaoming", "age":14}
},
watch: {
message(newValue, oldValue) {
console.log("新值:"+newValue+";旧值:"+oldValue);
},
person:{
// 开启深度监控,监控对象中的属性值变化
deep: true,
handler(obj){
console.log("name="+obj.name+";age="+obj.age);
}
}
}
});
</script>
</html>
页面效果:
组件的作用:可以将通用的页面模块抽取成 vue 组件,在 vue 实例中引用。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>component</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用注册好的全局组件 -->
<counter></counter>
</div>
</body>
<script>
// 定义组件
const myCounter = {
template: "<button @click='num++'>你点击了 {{num}} 次</button>",
data(){
return {num: 0}
}
}
// 使用vue实例全局注册组件
// 参数1:自定义组件名 参数2:定义好的组件
Vue.component("counter", myCounter);
// 定义视图位置
new Vue({
el:"#app"
});
</script>
</html>
页面效果:
说明:
Element 是网站快速成型工具,是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。
组件:组成网页的部件,例如超链接、按钮、图片、表格等等。
使用 Element 的前提是必须要有 Vue。
Element 官网:
样式示例:
自己完成的按钮:
Element 提供的按钮:
开发步骤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
<button>我是按钮</button>
<hr>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
</html>
页面效果:
Element 基础布局可以将页面分成最多 24 个部分(列),且可以自由切分。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
<!-- 定义样式 -->
<style>
.el-row {
/* 行距为20px */
margin-bottom: 20px;
}
.bg-purple-dark {
background: red;
}
.bg-purple {
background: blue;
}
.bg-purple-light {
background: green;
}
.grid-content {
/* 边框圆润度 */
border-radius: 4px;
/* 行高为36px */
min-height: 36px;
}
</style>
</head>
<body>
<button>我是按钮</button>
<hr>
<div id="app">
<el-row>
<!-- span值最大为24,超过则元素不显示 -->
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
</html>
页面效果:
容器布局:将页面分成头部区域、侧边栏区域、主区域、底部区域。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
<!-- 定义样式 -->
<style>
.el-header, .el-footer {
background-color: #d18e66;
color: #333;
text-align: center;
height: 100px;
}
.el-aside {
background-color: #55e658;
color: #333;
text-align: center;
height: 580px;
}
.el-main {
background-color: #5fb1f3;
color: #333;
text-align: center;
height: 520px;
}
</style>
</head>
<body>
<div id="app">
<!--
多个contatiner嵌套时,是多行分布的关系
-->
<el-container>
<el-header>头部区域</el-header>
<el-container>
<el-aside width="200px">侧边栏区域</el-aside>
<el-container>
<el-main>主区域</el-main>
<el-footer>底部区域</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
</html>
页面效果:
表单:由输入框、下拉列表、单选框、多选框等控件组成,用以收集、校验、提交数据。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
},
methods:{
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
});
</script>
</html>
页面效果:
表格:用于展示多条结构类似的数据,可对数据进行编辑、删除或其他自定义操作。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
label="操作"
width="180">
<el-button type="warning">编辑</el-button>
<el-button type="danger">删除</el-button>
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
tableData: [{
date: '2016-05-02',
name: '王小龙',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '石黑豹',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
});
</script>
</html>
页面效果:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
</html>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
<!-- 引入 Element 样式文件 -->
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 Element 核心 js 文件 -->
<script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-col :span="6"> <!-- 侧边导航栏宽度 -->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
</body>
<script>
new Vue({
el:"#app"
});
</script>
</html>
学习了 Element 组件后,我们会发现组件其实就是自定义的标签。
本质上,组件就是带有一个名字且可复用的 Vue 实例,我们完全可以自己定义。
定义格式:
Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义组件</title>
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-button></my-button>
</div>
</body>
<script>
// 注册全局组件
Vue.component("my-button",{
// 属性
props:["style"],
// 数据函数
data: function(){
return{
msg:"我的按钮"
}
},
//解析标签模板
template:"<button style='color:red'>{{msg}}</button>"
});
new Vue({
el:"#app",
});
</script>
</html>
Vue 生命周期 官方图解:
生命周期的八个阶段:
官方代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message);//undefined
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
let dom = document.getElementById("app").innerHTML;
console.log(dom);
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function() {
console.group('updated 更新完成状态===============》');
let dom = document.getElementById("app").innerHTML;
console.log(dom);
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
}
});
// 销毁Vue对象
//vm.$destroy();
//vm.message = "hehe"; // 销毁后 Vue 实例会解绑所有内容
// 设置data中message数据值
vm.message = "good...";
</script>
</html>
页面效果:
在 Vue 中发送异步请求,本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作。
使用步骤:
axios常用方法:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 异步</title>
<!-- 引入 Vue 核心 js 文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<!-- 引入 axios js 文件 -->
<script src="../axios/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
{{name}}
<button @click="send()">发起请求</button>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
name:"张三"
},
methods:{
send(){
// GET方式请求
// axios.get("testServlet?name=" + this.name)
// .then(resp => {
// alert(resp.data);
// })
// .catch(error => {
// alert(error);
// })
// POST方式请求
axios.post("testServlet","name=" + this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});
</script>
</html>
Web 工程地址:
https://github.com/juno3550/VueElementWebDemo
实现效果:
以上是脚本宝典为你收集整理的Vue & Element全部内容,希望文章能够帮你解决Vue & Element所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。