Vue 简介#
- Vue 是一套构建用户界面的渐进式前端框架。
- 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
- 通过尽可能简单的 API来实现响应数据的绑定和组合的视图组件。
- 特点
- 易用：在有HTML CSS JavaScript 的基础上，快速上手。
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 性能：20kb min+gzip运行大小、超快虛拟DOM、最省心的优化。
Vue 入门#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
</head>
<body>
<div id="div">
{{msg}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 脚本
new Vue({
el:"#div",
data:{
msg:"Hello Vue"
}
})
</script>
</html>
- Vue 核心对象: 每一个Vue程序都是从一个Vue核心对象开始的
let vm = new Vue({
选项列表;
})
- Vue的程序包含视图和脚本两个核心部分
- 选项列表
- el选项: 用于接收获取到页面中的元素.(根据常用选择器获取)
- data选项: 用于保存当前Vue对象中的数据. 在视图中声明的变量需要在此处赋值
- methods选项: 用于定义方法. 方法可以直接通过对象名调用, this代表当前Vue对象
- 数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门升级</title>
</head>
<body>
<!-- 视图-->
<div id="div">
<div>姓名:{{name}}</div>
<div>班级:{{classRoom}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
name:"张三",
classRoom:"不一班"
},
methods:{
study(){
alert(this.name + "正在" + this.classRoom+"好好学习")
}
}
})
// 定义打招呼的方法
function hi(){
vm.study();
}
function update(){
vm.classRoom = "地球人"
}
</script>
</html>
Vue 常用指令#
- 指令: 是带有v-前缀的我死属性, 不同指令具有不同含义. 例如v-html, v-if, v-for
- 使用指令时，通常编与在标签的属性上，值可以使用JS的表达式。
- 常用指令
指令 作用
v-html 把文本解析为HTML代码
v-bind 为HTML标签绑定属性值
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素, 区别在于切换的是display属性的值
y-for 列表渲染, 遍历容器的元素或者对象的厲性
v-on 为HTML标签绑定事件
v-model 在表单元素上创建双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本插值</title>
</head>
<body>
<div id="div">
<div>{{msg}}</div>
<div v-html="msg"></div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:"#div",
data:{
msg:"<b>Hello Vue</b>"
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定属性</title>
<style>
.my{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<a v-bind:href="url">百度一下</a>
<br>
<a :href="url">百度一下</a>
<br>
<div :class="cls">我是div</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
url:"http://www.baidu.com",
cls: "my"
}
})
</script>
</html>
- 条件渲染
- v-if: 条件性的渲染某元素, 判定为真时渲染,否则不渲染
- v-else:条件性的渲染
- v-else-if:条件性的渲染
- v-show:根据条件展示某元素,区别在于切换的是display属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
</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>div3</div>
<div v-show="flag">div4</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
num:2,
flag:false
}
})
</script>
</html>
- 列表渲染
- v-for:列表渲染,遍历窗口的元素或者对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<div id="div">
<ul>
<li v-for="name in names">
{{name}}
</li>
<li v-for="value in student">
{{value}}
</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#div",
data:{
names:["张三","李四","王五"],
student:{
name:"张三",
age:23
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<div id="div">
<div>{{name}}</div>
<button v-on:click="change">改变div的内容</button>
<button v-on:dblclick="change">改变div的内容</button>
<button @click="change">改变div的内容</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name:"来了呀, 老弟!"
},
methods:{
change(){
this.name = "来了"
}
}
})
</script>
</html>
- 表单绑定, 只能表单使用
- 双向数据绑定
- 更新data数据, 页面中的数据也会更新
- 更新页面数据, data数据也会更新
- MVVM模型(Model View ViewModel)：是MVC模式的改进版
- 在前端页面中，JS对象表示 Model，页面表示View，两者做到了最大限度的分离。
- 将Model和View 关联起来的就是ViewModel，它是桥梁。
- ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单绑定</title>
</head>
<body>
<div id="div">
<form autocomplete="off">
姓名: <input type="text" name="username" v-model="username">
<br>
年龄: <input type="number" name="age" v-model="age">
</form>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23
}
})
</script>
</html>
Element 组件库#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<button>我是按钮</button>
<br>
<div id="div">
<template>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button>中文</el-button>
</el-row>
<br>
</template>
</div>
</body>
<script>
new Vue({
el:"#div"
})
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础布局</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
</head>
<body>
<div id="div">
<template>
<el-row>
<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>
</template>
</div>
</body>
<script>
new Vue({
el:"#div"
})
</script>
</html>
布局方式#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容器布局</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 300px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div id="div">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="300px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el:"#div"
})
</script>
</html>
表单组件#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容器布局</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="div">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.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="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.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="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
})
</script>
</html>
表格组件#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格组件</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<template>
<el-table
:data="tableData"
stripe
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="100">
<el-button size="mini" type="warning">编辑</el-button>
<el-button size="mini" type="danger">编辑</el-button>
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
})
</script>
</html>
顶部导航栏组件#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顶部导航栏组件</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<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 class="line"></div>
<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:"#div",
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>
侧边导航栏#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧边导航栏</title>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js2/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<el-row class="tac">
<el-col :span="3">
<h5>自定义颜色</h5>
<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>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#div",
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>