目录：Vue其他篇
目录：
- 1.1 vuejs简介
- 1.2 选择器：根据id、class等查找
- 1.3 静态绑定数据 data
- 1.4 插值 {{}} 单项绑定
- 1.5 数据动态绑定：computed
- 1.6 数据双向绑定 ：v-model
- 1.7 类的绑定：绑定事件触发时改变 class, id属性
- 1.8 样式的绑定 v-bind:style
- 1.9 v-if 条件模板指令
- 1.10 v-for循环语句
- 1.11 自定义指令
- 1.12 综合案例：支付宝注册&用户管理
- 1.13 多选框 v-model
- 1.14 单选框
- 1.15 单选下拉框
- 1.16 多选下拉框
1.1 vuejs简介返回顶部
1、vuejs简介
1. Vue是基于MVVM模式实现的
M：model表示模型，机器可读性强的数据
V：view表示视图，人眼可读性强的数据
VM：viewModel表示视图模型，将机器可读性强的数据转化成人眼可读性强的数据，将人眼可读性强的数据转化成机器可读性强的数据（前端的本质）
2. 数据由视图流入模型通过事件监听实现，数据由模型流入视图通过数据的绑定实现的，这就是数据的双向绑定（MVVM模式的标识）
3. vuejs与jquery
1. 在过去，前端的任务就是为页面绑定一些交互，处理一些数据，浏览器兼容性问题是最主要的问题，所以jquery的出现就是为了解决这类问题
2. 随着前端的发展，前端的业务越来越多，如何能够保证代码的安全，可靠，兼容，可延展性，可维护是现在的主要问题
3. jqeury没有将前端业务逻辑抽象分离，所有代码写在一起，很难维护，很难拓展，所以一些框架呼之欲出
4. 将业务分成模型，视图，控制器，提高代码的可维护性等，但是开发很慢，所以MVVM模式的框架就出现了，vue就是其中的代表之一。
1.2 选择器：根据id、class等查找返回顶部
1、常见的几种选择器
1. Data用来绑定数据，El用来绑定视图
2. El可以绑定常见的选择器，Id选择器、类选择器、元素名称选择器(div、p等)、自定义元素名称选择器，等等
2、选择器使用举例
1. 当页面中出现多个选择器的时候渲染第一个（比如有两个class=’title’的div）
2. 当页面出现多个vue实例化对象时，渲染第一个（有两个vue对象对同一个属性渲染）
3. 所以在工作中，一个vue实例化队形要对应一个选择器（一一对应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<!-- 定义容器元素-->
<!-- id-->
<div id="app">{{ title }}</div>
<!-- class-->
<div class="title">{{ title }}</div> <!-- 有两个class属性相同的，只有前面一个生效-->
<div class="title">{{ title }}</div>
<!-- 元素名称-->
<h1>{{ title }}</h1>
<!-- 自定义元素名称-->
<ickt>{{ title }}</ickt> <script type="text/javascript" src="vue.js">{{ title }}</script>
<script type="text/javascript">
// 定义模型数据
var data = {
title:'爱创课堂'
}; // 一：实例化第一个vue
var app = new Vue({
// 绑定视图
// el:'#app', // 1. id选择器
el:'.title', // 2. 类选择器
// el:'h1', // 3. 元素名称选择器
// el:'ickt', // 4 . 元素名称选择器
//绑定数据
data:data
}); // 二：实例化第二个vue（这两个vue对象都针对.title,只有第一个生效，把第一个删除第二个才能生效）
new Vue({
// 绑定视图
el:'.title', // 2. 类选择器
data:{
'title':'前端培训'
}
});
</script>
</body>
</html>
选择器使用举例
1.3 静态绑定数据 data返回顶部
1、数据的绑定
1. Vue实例化对象中，在data中绑定数据
2. Data中的数据与vue实例化对象中绑定的数据行为是一致的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<!-- 定义容器元素-->
<div id="app">{{ title }}</div> <script type="text/javascript" src="vue.js">{{ title }}</script>
<script type="text/javascript">
// 定义模型数据
var data = {
title:'爱创课堂',
obj:{
color:'red'
},
arr:[1,2,3,{num:100},4,5]
}; // 创建vue实例化对象
var app = new Vue({
el:'#app',
data:data
}); //1、修改值
data.title = '前端培训'; //2、修改引用类型
data.obj.color = 'green'; //3、将obj设置成新的对象
data.obj = { width:100 }; // data中的数据与app中绑定的数据是否相等
// console.log(data.title == app.title);
// console.log(data.obj == app.obj);
// console.log(data.arr == app.arr);
</script>
</body>
</html>
数据绑定
1.4 插值 {{}}单项绑定返回顶部
1、语法
1. 插值语法 {{数据}}，这里的数据要在vue中绑定
2. 插值符号相当于创建了一个js环境，我们可以使用js表达式，例如 点语法访问对象的属性等等
2、常用插值方法
1. 属性插值
1. 注意：2.0版本属性插值建议使用v-bind
2. 插值不仅仅可以写在元素的内容中，还可以写在元素的属性中, 常规属性：id， class， style等
3. 插值语法插入的内容可以是属性的全部，也可以是属性的一部分
例：<div v-bind:id="id" v-bind:class="className" v-bind:style="'color:' + style.color + '; > {{title}} </div>
2. 使用js表达式
1. 插值语法创建了一个js环境，所以可以使用表达式
例：<h1>面积：{{width * height}}</h1>
3. 使用过滤器
<h2> {{msg | uppercase}} </h2> <!--将第一个单词变的第一个字母变大写 -->
<h3> {{msg.toUpperCase()}} </h3> <!--将所有字母全部变大写 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--1、 插值不仅仅可以写在元素的内容中，还可以写在元素的属性中 -->
<div v-bind:id="id" v-bind:class="className" v-bind:style="'color:' + style.color + '; background:' + style.background">{{title}}</div>
<!--2、 插值语法创建了一个js环境，所以可以使用表达式 -->
<h1>面积：{{width * height}}</h1>
<!--3、将第一个单词变的第一个字母变大写 -->
<h2>{{msg | uppercase}}</h2>
<!--4、将所有字母全部变大写 -->
<h3>{{msg.toUpperCase()}}</h3>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义数据
var data = {
title: '<a href="javascript:alert(123);">爱穿课堂</a>',
className: 'ickt',
msg: 'what a day!',
id: 'ickt',
info: '专业的前端培训学校',
style: {
color: 'green',
background: 'red'
},
width: 100,
height: 50
}; // 创建vue实例化对象
var app = new Vue({
data: data,
el: '#app'
})
</script>
</body>
</html>
插值
1.5 数据动态绑定：computed返回顶部
1、作用
1. 当在插值语法中使用数据数据的时候，在渲染之前，我们是无法修改这些数据的，只能在渲染的时候，通过插值表达式，或者插值过滤器改动
2. 为了解决在插值之前修改数据的问题，vue提供了动态数据绑定的语法
3. 静态数据绑定通过data: {} 里面每一个属性都是一个绑定的数据，
4. 动态数据绑定通过computed：{} 里面每一个属性也都是一个绑定的数据
2、使用
1. Key表示数据名称，Value是一个函数（必须是函数）
2. 函数的返回值就是渲染的数据，参数是vue实例化对象，作用域也是vue实例化对象
3. 访问静态绑定的数据可以通过作用域或者参数对象访问
使用参数：面向过程的方式
使用作用域：面向对象的方式
4. 动态数据绑定跟静态数据绑定一样，都会将属性添加在vue实例化对象上，并且设置了特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 定义容器元素 -->
<div id="app">
<h1>{{msg.toUpperCase()}}</h1>
<h1>{{newMsg}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义vue实例化对象
var app = new Vue({
// 绑定视图
el: '#app',
//1、绑定数据
data: {
msg: 'what a day!'
}, //2、动态数据绑定
computed: {
newMsg: function(vue) {
// console.log(arguments, this)
// 返回值就是渲染的数据
// return '爱创课堂'
// 方法一
// return vue.msg.toUpperCase()
// 方法二
return this.msg.toUpperCase()
}
}
})
</script>
</body>
</html>
使用computed动态绑定数据
1.6 数据双向绑定 ：v-model 返回顶部
1、作用
1. 数据双向绑定指的是两个过程
1）数据由模型流入视图 （通过数据绑定与插值语法实现）
2）数据由视图流入模型（通过v-model指令实现）
2. 指令：指令就是对dom元素拓展的一个功能，让其具有一定的行为特征（功能）
3. V-model指令：将数据由视图流入模型，属性值就是绑定的数据
注意：这个绑定的数据一定要在data中定义出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 通过指令实现数据由视图流入模型 -->
<input type="text" v-model="title">
<p>{{title}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var data = {
title: '爱创课堂'
}; // 创建vue实例化对象
var app = new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>
v-model数据双向绑定
1.7 类的绑定：绑定事件触发时改变 class, id属性返回顶部
1、作用
1. 有时候需要对元素动态设置类，我们可以使用类的绑定语法
2. v-bind指令: 让属性值变成一个动态的（属性值是一个js环境），从而可以使用js的语法以及vue中的数据
2、法1： v-bind:class=”[cls1, cls2]”
1. 数组的每一个成员代表一个类，如果成员带引号，就是一个字符串，如果成员不带引号，就是变量，定义在vue实例化对象中
2. 注意：
1.0版本，一个成员中不允许带空格，也就是说一个成员只能表示一个类
2.0版本，一个成员可以包含空格，表示多个类
3、法2：v-bind:class=”{key: value}”
1. Key表示类的名称：如果类中出现了-，要加引号
2. Value表示是否渲染这个类，是一个布尔值
3. 如果是变量，在vue中对应的数据属性值也要是布尔值
注意：
1.0版本，一个key中不能包含空格，表示多个类
2.0版本，一个key中可以包含空格，表示多个类
4、法3：v-bind:class=”字符串”
1. 字符串中出现了变量，要用+进行字符串拼接，
2. 字符串中可以出现空格，表示多个类，1.0版本也支持
最常用方法： <p :class="{aa:true,cc:flag}">南京网博</p> # aa 是class属性，后面true/false表示是否使用此属性
注意：1.0还支持插值语法，可以表示类的一部分，或者表示类的全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style属性</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
bb:'aa',
dd:'cc',
flag:true,
num:-2,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
}
});
}
</script>
<style>
.aa{
color:red;
font-size:20px;
}
.cc{
background-color:#ccc;
}
</style>
</head>
<body>
<div id="itany">
<!--
class属性
-->
<!-- <p class="aa">南京网博</p> --> <!-- 可以访问，普通css方式 --> <!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 --> <!-- 方式1:变量形式 -->
<!-- <p :class="bb">南京网博</p> --> <!-- 方式2：数组形式，同时引用多个 -->
<!-- <p :class="[bb,dd]">南京网博</p> --> <!-- 方式3：json形式，常用！！！ -->
<!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->
<!-- <p :class="{aa:num>0}">南京网博</p> --> <!-- 方式4：变量引用json形式 -->
<!-- <p :class="hello">南京网博</p> --> <!--
style属性
-->
<p :style="[xx,yy]">itany</p> </div>
</body>
</html>
v-bind绑定属性常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.weibo {
margin: 50px auto;
width: 500px;
font-size: 12px;
}
.weibo span {
padding: 15px 20px;
background: #ccc;
display: inline-block;
cursor: pointer;
}
.weibo ul {
display: none;
}
.weibo li {
padding: 10px 20px;
width: 80px;
border: 1px solid orange;
background: #efefef;
cursor: pointer;
}
.weibo li:hover {
color: orange;
}
.weibo .show {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="weibo">
<span>微博</span>
<!-- <ul v-bind:class="cls"> -->
<!-- <ul v-bind:class="[cls]"> -->
<ul v-bind:class="{show: isShow}">
<li>未读评论</li>
<li>未读提醒</li>
</ul>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 创建vue实例化对象
var app = new Vue({
el: '#app',
data: {
// cls: '',
isShow: false
}
}); // 鼠标移入事件
document.querySelector('.weibo').addEventListener('mouseenter', function() {
// 修改类
// app.cls = 'show';
app.isShow = true
}); // 鼠标移出
document.querySelector('.weibo').addEventListener('mouseleave', function() {
// 修改类
// app.cls = '';
app.isShow = false
})
</script>
</body>
</html>
新浪微博下拉框
1.8 样式的绑定 v-bind:style返回顶部
1、法1： v-bind:style=”{key: value}”
1）Key 表示css属性名称，如果属性名称中，出现了-，我们要加引号（不推荐）
2）建议我们，如果属性名称出现-,我们要转化成驼峰式命名，Value表示css属性值
2、法2：v-bind:style=”[{}, {}]”
1）每一个成员对象代表一组样式，Key表示样式属性名称
2）Value表示样式属性值，如果是变量要在vue中定义出来
3、法3：v-bind:style=”字符串”
1）是一种行内式的样式，里面的字符串要加上引号
注：1.0版本中也支持插值语法，但是2.0版本不允许了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 第一种方式 -->
<h1 v-bind:style="{
color: 'red',
'background-color': bgColor,
fontSize: '50px'
}">爱创课堂</h1> <!-- 第二种方式 -->
<h2 v-bind:style="[{
color: 'green'
}, obj]">爱创课堂</h2> <!-- 第三种方式 -->
<h3 v-bind:style="'color: blue;' + style">爱创课堂</h3>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 创建vue实例化对象
var app = new Vue({
el: '#app',
data: {
bgColor: 'yellow',
// 定义一组样式
obj: {
backgroundColor: 'pink'
},
// 行内字符串样式
style: 'background: orange;'
}
})
</script>
</body>
</html>
样式的绑定
4、v-bind 绑定属性：如 图片 url
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和属性的简写</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
w:'200px',
h:'100px'
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- <img src="{{url}}"> --> <!-- 可以直接访问vue中的数据，不需要使用{{}} -->
<!-- <img v-bind:src="url"> --> <img :src="url" :width="w" :height="h">
</div>
</body>
</html>
v-bind 动态绑定图片 src 宽高等属性
5、淘宝商品选择
作用：选择一个衣服商品时那些缺货的衣服码号会显示虚线菜单（模拟不能选中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#app {
width: 500px;
margin: 50px auto;
}
p label {
color: #666;
font-size: 12px;
margin-right: 40px;
}
p {
margin-bottom: 30px;
}
p span {
padding: 8px 10px;
margin-right: 5px;
border: 1px solid #ccc;
display: inline-block;
cursor: pointer;
}
p img {
border: 1px solid #ccc;
vertical-align: middle;
cursor: pointer;
width: 60px;
height: 60px;
}
p img.choose {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<p>
<label>尺寸</label>
<span v-bind:style="{borderStyle: span[0]}">M</span>
<span v-bind:style="{borderStyle: span[1]}">L</span>
<span v-bind:style="{borderStyle: span[2]}">XL</span>
<span v-bind:style="{borderStyle: span[3]}">XXL</span>
<span v-bind:style="{borderStyle: span[4]}">XXl</span>
</p>
<p>
<label>颜色</label>
<img v-bind:class="img[0]" src="01.jpg" alt="">
<img v-bind:class="img[1]" src="02.jpg" alt="">
<img v-bind:class="img[2]" src="03.jpg" alt="">
</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
span: ['dashed'],
img: [, 'choose']
}
});
// 绑定交互
var dom = document.getElementsByTagName('img'); dom[0].onclick = function() {
app.span = []; // 清空原有样式
app.span[2] = 'dashed'; // span第三个和第五个不能选中
app.span[4] = 'dashed'; app.img = []; // 排他法。清除其他图片所有样式
app.img[0] = 'choose'; // 第一个被选中
}; dom[1].onclick = function() {
app.span = []; // 清空原有样式
app.span = ['dashed', 'dashed', 'dashed']; // 排他法，前三个不能选 app.img = ['', 'choose'] // 第二张图片被选中
}; dom[2].onclick = function() {
app.span = []; // 清空原有样式
app.span = ['dashed', '', 'dashed']; app.img = []; // 清空原图片有样式
app.img[2] = 'choose';
}
</script>
</body>
</html>
淘宝商品选择
1.9 v-if 条件模板指令 返回顶部
1、作用
1. V-if：动态创建页面中的元素，属性值是一个布尔值，True：创建，False：删除
2. v-else：相当于if语句中else语句，V-if指令元素如果不显示，那么显示v-else的元素
3. V-show：控制元素的显隐，控制元素的display属性，指令会将属性值变成js环境
2、控制多个元素的创建
1. V-if只能控制一个元素的显隐，因为他只能添加给一个元素
2. Vue建议我们使用template元素来控制多个元素的显隐，它不会执行里面的内容，不会渲染到页面中
3. Template是html5中新标签，跟普通的元素是一样的，都可以添加属性，添加指令，但就是不会渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>
<template v-if="type">
<span>{{type}} | </span>
<span>123</span>
</template>
<span>{{text}}</span>
</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var data = {
type: '科技', // 如果type: '' 为空字符串时就不显示
text: '在被骗走性命之前，他们一直知道这里骗局丛生'
}; // 创建vue实例化对象
var app = new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>
V-if结合template元素来控制多个元素的显隐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div> <script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
if-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div> <script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
</body>
</html>
if-else if-else
1.10 v-for循环语句返回顶部
1、v-for 指令可以绑定数组的数据来渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 根据索引值是否为2的倍数来显示背景颜色 -->
<ul>
<li v-for="(item, index) in list" v-bind:style="{
background: index % 2 ? '#efefef' : 'orange'
}">{{index}}--{{item}}</li>
</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义数据
var data = {
list: ["25省份明确社会抚养费标准 超生罚多少", "这42款手机APP赶紧删 有的会泄露隐私", "最低调的炫耀 车值13万车牌价值300万 ", "这名副部当了10年 还要搞政治被\"秒杀\"", "业主装修后入住20天 邻居:对面是你家", "\"28年前出生时疑被抱错\":后悔做鉴定"]
};
// 创建vue实例化对象
var app = new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>
v-for 绑定数组的数据来渲染
1.11 自定义指令 返回顶部
1、说明
1. 我们学过的指令：v-model，v-bind， v-show， v-if， v-else， v-for
2. 但是指令是有限的，因此为了给元素添加更多的功能呢，我们可以自定义指令
3. 自定义指令就是为元素定义一项功能，自定义指令：Vue.directive(指令名称， {})
2、自定义指令注意事项
1. v-开头的一个自定义属性，指令的属性值都是js环境，因此使用字符串加引号
2. 指令名称用-分隔单词，不要出现大写字母
3、Vue.directive(指令名称， {}) 可绑定以下五个方法
1、可绑定的方法
1. Bind 只有为元素绑定指令的时候才执行一次
2. Update 属性值每更新一次就执行一次
3. Unbind 指令从元素上解绑时候执行
4. Inserted 元素插入到父元素中执行的方法
5. componentUpdate 组件更新时候执行的
2、以上五个方法作用域都是window，都有四个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- 自定义指令名称 my-directive -->
<h1 v-my-directive="msg">爱创课堂</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义自定义指令
var result = Vue.directive('my-directive', {
// 绑定时候执行的方法
bind: function() {
console.log(222,arguments, this)
},
// 更新时候执行的方法
update: function(arg1,arg2) {
console.log(333,arguments, this);
// arguments 返回的是一个列表，包含下面四个元素
console.log('第一个表示dom元素',arguments[0]); // <h1>爱创课堂</h1>
console.log('第二个表示指令对象',arguments[1]); // arguments[1].value 可以获取 msg 最新值
console.log('第三个表示当前的虚拟DOM',arguments[2]);
console.log('第四个表示上一个虚拟DOM',arguments[3]);
},
color: 'red'
}); // 创建vue实例化对象
var app = new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
</body>
</html>
bind和updata绑定
4、Vue.directive(指令名称， fn)
1. 当不区分bind和update的时候，我们可以定义一个fn代表这两个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- 自定义指令名称 my-directive -->
<h1 v-my-directive="msg">爱创课堂</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义自定义指令
var result = Vue.directive('my-directive', function(ths) {
console.log(this,arguments);
// arguments 返回的是一个列表，包含下面四个元素
console.log('第一个表示dom元素',arguments[0]); // <h1>爱创课堂</h1>
console.log('第二个表示指令对象',arguments[1]); // arguments[1].value 可以获取 msg 最新值
console.log('第三个表示当前的虚拟DOM',arguments[2]);
console.log('第四个表示上一个虚拟DOM',arguments[3]); });
console.log(111,result); // directive方法返回值就是对象 // 创建vue实例化对象
var app = new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
</body>
</html>
Vue.directive(指令名称， fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="username">
<span v-check="username" test="^.{4,8}$" danger-text="用户名是4-8位"></span>
</p>
<p>
<input type="text" v-model="password">
<span v-check="password" test="^.{5,10}$" danger-text="密码要5到10位"></span>
</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 定义自定义指令
Vue.directive('check', function(el, obj, vNode, oldVNode) { // 获取属性值 console.log(obj.value, obj)
var regExpText = el.getAttribute('test'); // 创建正则
var regExp = new RegExp(regExpText);
el.style.color = 'red'; // 提示文案是红色的
if (!regExp.test(obj.value)) { // 用正则校验value
el.innerHTML = el.getAttribute('danger-text') // 不合法时候提示, 元素要显示内容
} else {
el.innerHTML = '' // 删除提示
}
}); var app = new Vue({ // 创建vue
el: '#app',
data: {
username: '',
password: ''
}
})
</script>
</body>
</html>
实例：Vue.directive(指令名称， fn) 校验输入内容
1.12 综合案例：支付宝注册&用户管理返回顶部
1、支付宝注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #ccc;
}
#app {
width: 800px;
margin: 50px auto;
border: 1px solid #ccc;
background: #fff;
height: 600px;
padding-top: 80px;
}
label {
margin-left: 100px;
margin-right: 20px;
}
input {
padding: 8px 15px;
width: 300px;
}
ul {
width: 330px;
margin-left: 176px;
border: 2px solid #ccc;
margin-top: -1px;
}
ul li {
padding: 0 15px;
height: 26px;
line-height: 26px;
}
ul li:hover {
background: #efefef;
}
</style>
</head>
<body>
<div id="app">
<label>账户名</label>
<input type="text" v-model="msg">
<!-- ul的显示与msg有关 -->
<ul v-show="msg">
<li v-for="item in email">{{dealMsg}}@{{item}}.<template v-if="item == 189">cn</template><template v-else>com</template></li>
</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 创建vue实例化对象
var app = new Vue({
el: '#app',
data: {
// 定义绑定的数据
msg: '',
email: ['qq', 163, 126, 189, 'sina', 'hotmail', 'gmail', 'sohu', '21cn']
},
// 动态数据绑定
computed: {
dealMsg: function(vue) {
// 处理msg, 截取@符号之前的
// 是否存在@
if (this.msg.indexOf('@') >= 0){
// 截取@符号之前的，不包括@
// slice, substring, substr, 哪个参数表示长度，出现负数，第一个参数大于第二个参数怎么办，*涛
return this.msg.slice(0, this.msg.indexOf('@'))
}
// 否则返回msg
return this.msg
}
}
})
</script>
</body>
</html>
支付宝注册
2、用户管理: 引入了bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习：用户管理</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<script src="bootstrap/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'.container',
data:{
users:[
{name:'tom',age:24,email:'tom@itany.com'},
{name:'jack',age:23,email:'jack@sina.com'}
],
user:{},
nowIndex:-1 //当前要删除项的索引
},
methods:{
addUser(){
this.users.push(this.user);
this.user={};
},
deleteUser(){
if(this.nowIndex===-1){ //删除所有
this.users=[];
}else{
this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个
}
}
}
});
}
</script>
</head>
<body>
<div class="container">
<h2 class="text-center">添加用户</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group text-center">
<input type="button" value="添 加" class="btn btn-primary" v-on:click="addUser">
<input type="reset" value="重 置" class="btn btn-primary">
</div>
</form>
<hr> <table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户列表</caption>
<thead>
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">邮箱</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" class="text-center">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td>
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
</td>
</tr>
<tr>
<td colspan="5" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>
</td>
</tr>
</tbody>
</table> <!-- 模态框，弹出框 -->
<div class="modal fade" id="del">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？</h4>
<h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>
</div>
<div class="modal-body text-center">
<button class="btn btn-primary" data-dismiss="modal">取消</button>
<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
用户管理
1.13 多选框 v-model返回顶部
1、双向绑定也要通过v-model指令
1. 一组多选框元素之间通过v-model指令绑定不同的数据，为了访问方便，通常我们将这些数据存储在同一个变量下
2. 数据的属性值是一个布尔值，不是布尔值会转化：True：选中； False：未选中（‘’, 0, undefined, null, false,NaN）
3. 如果想自定义选中或未选中时候的值，我们可以通过v-bind:true-value和v-bind:false-value来设置
4. 由于应用了v-bind指令，所以属性值是js环境，字符串要加上引号
5. 此时v-model绑定的数据布尔值失效，只能是设置的true-value或者false-value的值
6. 在html中，让选框元素选中，可以通过checked属性设置，我们也可以通过checked属性来让多选框选中
注：1.0 checked优先级高于绑定的数据； 2.0 checked优先级低于绑定的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<label>选择你喜欢的运动</label>
<p><label>足球<input v-model="sports.football" type="checkbox" v-bind:true-value="'选中了足球'" v-bind:false-value="falseValue" ></label></p>
<p><label>篮球<input v-model="sports.basketball" type="checkbox" ></label></p>
<p><label>乒乓球<input v-model="sports.pingpang" type="checkbox" ></label></p>
<h1>选中结果: {{sports}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: { // 绑定数据
sports: {
football: '选中了足球',
basketball: 0,
pingpang: false
},
falseValue: '没有选中足球' // 定义未选中时候的文案
}
})
</script>
</body>
</html>
多选框
1.14 单选框返回顶部
1、单选框
1. 数据单向绑定也要通过v-model指令，一组单选框，绑定的属性值是同一个变量
2. 单选框的值通过value属性定义，单选框之间value的属性值不能相同
3. 在html中，让单选框选中，可以通过checked属性设置，我们也可以通过checked属性让单选框选中
注：1.0 checked优先级高于绑定的数据；2.0 checked优先级低于绑定的数据；在1.0中，一组单选框绝对不能设置多个checked属性
2、比较单选框和多选框
1. 多选框绑定不同的值，并且定义在同一个变量下，单选框绑定的是同一个值
2. 多选框通过v-bind:true-value和v-bind:false-value设置选中或者未选中时候的值，单选框通过value来设置选框的值
3. checked：多选框可以设置多个；单选框只能设置一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<label>性别</label>
<p>
<label>男<input v-model="sex" value="man" type="radio" ></label>
<label>女<input v-model="sex" value="woman" type="radio" ></label>
</p>
<h1>查看结果: {{sex}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// vue实例化对象
new Vue({
el: '#app',
data: {
sex: "man"
}
})
</script>
</body>
</html>
单选框
1.15 单选下拉框 返回顶部
1、单选下拉框
1. 通过select定义下拉框，通过option定义选项，，默认是一个单选下拉框
2. 可以通过v-model指令，实现数据双向绑定，V-model指令绑定给select元素，由于单选框默认只能选中一个值，因此我们绑定一个字符串
3. Option选项的值，没有value属性，是内容值，有value属性，就是value
注：1.0 版本中selected优先级高于绑定的数据； 2.0 版本中selected优先级低于绑定的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<select v-model="colors">
<option value="isRed">red</option>
<option value="isGreen">green</option>
<option value="isBlue">blue</option>
</select>
<h1>查看结果 {{colors}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
colors: 'isGreen'
}
})
</script>
</body>
</html>
单选下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<select v-model="choose"> <!-- 此时value是一个js环境，可以使用变量 -->
<option v-for="item in mail" :value="item">
@{{item}}.
<template v-if="item != 'yeah'">com</template>
<template v-else>net</template>
</option>
</select>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
mail: ['163', '126', 'sina', 'sohu', 'yeah', '139'],
choose: '126' // 绑定选中的值
}
})
</script>
</body>
</html>
hao 123邮箱
1.16 多选下拉框返回顶部
1、多选下拉框
1. 将单选下拉框变成多选下拉框，只需要给select元素添加multiple属性
2. 此时下拉框的值将变成给一个数组了，每一个成员代表一个选中的选项
3. 选项的值：没有value属性，就是内容值、有value属性，就是value值
注：1.0 版本中selected优先级高于绑定的数据； 2.0 版本中selected优先级低于绑定的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<select v-model="colors" multiple>
<option value="isRed">red</option>
<option value="isGreen">green</option>
<option value="isBlue">blue</option>
</select>
<h1>查看结果 {{colors}}</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
colors: ['isRed','isGreen']
}
})
</script>
</body>
</html>
多选下拉框