共计 21975 个字符，预计需要花费 55 分钟才能阅读完成。
引入
1.vue 基本使用的三个注意事项
- 一个 html 页面中可以存在多个 vue 实例对象, 但是实例对象的变量名强烈建议唯一, 而且每一个 vue 对象负责一个特效功能
- js 中所有的变量和语法都是区分大小写的, new Vue()
- 建议实例化 vue 对象的代码写在 body 的最后面或者 head 里面, 免得出现 html 元素无法获取的错误出现
一. 模板语法
插值语法 : {{}}
- 三目运算符(与三元表达式类似) 语法 :
[条件] ? '条件成立显示左' : '条件不成立显示右'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<ul>
<li> 字符串:{{msg}}</li>
<li> 数值:{{phone}}</li>
<li> 数组:{{array1}}</li>
<li> 对象:{{obj1}}</li>
<li> 字符串:{{link}}</li>
<li> 运算:{{(10+10)*10}}</li>
<li> 三目运算符:{{10>20?'true':'false'}}</li>
</ul>
</div>
</body>
<script>
// 对 vue 的核心对象 vm 进行实例化: vue.js 的代码开始于一个 Vue 对象, 所以每次操作数据都要声明 Vue 对象开始
var vm = new Vue({
el:'#app', // 设置当前 vue 对象要控制的标签范围, 方便接下来 vue 要操作的元素的选择符 element 的缩写，表示元素
data:{ // 可用于展示在 HTML 页面上的数据
msg:'Hello word!', // 字符串
phone:15979302285, // 数值
array1:[1,2,3,4,5], // 数组
obj1:{name:'shawn',age:333}, // 对象
// 这里 link 展示的是字符串, 后边有方法渲染成标签
link:'<a href="http://www.baidu.com"> 摆渡一下 </a>'
}
})
</script>
</html>
- 展示
二. 指令
文本指令
| 指令 | 说明 |
|---|---|
| v-html | 让 HTML 渲染成页面 |
| v-text | 标签内容显示 js 变量对应的值 |
| v-show | 放 1 个布尔值：为真, 标签就显示；为假, 标签就不显示 |
| v-if | 放 1 个布尔值：为真, 标签就显示；为假, 标签就不显示 |
0.v-show 与 v-if 的区别
v-show: 当值为 false 时, 标签还存在, 只是不显示, 因为设置了display:none属性v-if: 直接进行的 DOM 操作, 对标签进行删除或插入
1.v-html : 渲染 HTML
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app2">
<h1 v-html="link"> 链接渲染:{{link}}</h1>
</div>
</body>
<script>
var vm2 = new Vue({
el:'#app2',
data: {link:'<a href="http://www.baidu.com"> 摆渡一下 </a>'}
})
</script>
</html>
- 展示
2.v-text : 标签内容显示 js 变量所对应的值
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app3">
<h2 v-text="link"></h2>
<h1 v-text="link2"></h1>
</div>
</body>
<script>
var vm3 = new Vue({
el: '#app3',
data: {
link: '<a href="http://www.baidu.com"> 摆渡一下 </a>',
link2:'人面不知何处去, 桃花依旧笑春风'
}
})
</script>
</html>
- 展示
3.v-show : 显示 / 隐藏内容
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app4">
<!--@click: 点击触发 handleClick 方法 -->
<button @click="handleClick()">{{msg}}</button>
<!--isShow 为 true 则显示, 为 false 则隐藏, 隐藏只是增加了 display:none 属性 -->
<h3 v-Show="isShow"> 梦里有我曾见过的月光⭐也有我如初待我的模样 </h3>
</div>
</body>
<script>
var vm4 = new Vue({
el: '#app4',
data: {isShow: true, // 默认为 true(显示)
msg:'点击隐藏(display:none)'
},
methods:{handleClick(){
this.isShow = !this.isShow // this 指的是当前的 vue 对象, 对其取反
if (!this.isShow){this.msg = '点击显示' // 改变按键的文字显示}else {this.msg = '点击隐藏(display:none)'
}
},
},
})
</script>
</html>
- 展示
对于按钮的字体显示也可以不使用 if 判断, 直接使用三目运算符来完成
html
<button @click="handleClick()" v-text='isShow?" 隐藏 ":" 显示 "'></button>
4.v-if : 显示 / 删除内容
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app5">
<!--@click: 点击触发 handleClick 方法 -->
<button @click="handleClick()">{{msg}}</button>
<!-- 如果 isCreated 为 false 则将该标签删除, 如果为 true 则正常显示 -->
<h3 v-if="isCreated"> 梦里有我曾闻过的花香🌙也有你和我初遇的地方 </h3>
</div>
</body>
<script>
var vm5 = new Vue({
el: '#app5',
data: {isCreated: true, // 默认为 true(显示)
msg: '点击删除标签(隐藏)'
},
methods: {handleClick() {
this.isCreated = !this.isCreated // this 指的是当前的 vue 对象, 取反
if (!this.isCreated) { // 改变按键的文字显示
this.msg = '点击新建标签(显示)'
} else {this.msg = '点击删除标签(隐藏)'
}
},
},
})
</script>
</html>
- 展示
事件指令
| 指令 | 说明 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（简写 推荐） |
| @[event] | 触发 event 事件（可以是其他任意 事件） |
1. 代码演示
v-on:click可以简写成@click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 事件指令 </title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
button{background-color: cyan;}
</style>
</head>
<body>
<div id="box">
<button v-on:click="handleClick1">v-on:click</button>
<!--v-on:click 的简写,@用的比较多 -->
<button @click="handleClick2">@click</button>
<!-- 加括号的不传入参数其实与上面的写法效果一样 -->
<button @click="handleClick3()">@click(方法带括号)</button>
<!-- 传入参数 -->
<button @click="handleClick3(1,2,3)">@click(方法带括号 + 参数)</button>
<!-- 传入事件 -->
<button @click="handleClick4($event)">@click(方法传事件参数)</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {},
methods: {handleClick1() {alert('第一个按钮')
},
handleClick2() {alert('第二个按钮')
},
handleClick3(a, b, c) {alert('a:' + a + '\n' + 'b:' + b + '\n' + 'c:' + c)
},
handleClick4(event) {
var ev = '';
for (i in event) { // 循环取出 event 内事件
ev += i + '\n'
}
alert(ev)
// console.log(ev)
}
}
})
</script>
</html>
2. 效果展示
属性指令
| 指令 | 说明 |
|---|---|
| v-bind | 直接写 js 的变量或语法（不推荐） |
| : | 直接写 js 的变量或语法（简写 推荐） |
1. 代码示例
v-bind:class='[js 变量]'可以缩写成：:class='[js 变量]'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
.red {color: #f55f9c;}
.green {color: #68f587;}
</style>
</head>
<body>
<div id="box">
<!-- 设置 img 标签的 src 属性, 可以简写成 :src='url'-->
<img v-bind:src="url" alt="" height="300">
<hr>
<button @click="handleClick"> 点击变色 </button>
<!-- 三目运算符,true 为 red,false 为 green-->
<h2 :class="isActive?'red':'green'"> 几回花下坐吹箫🌕银汉红墙入望遥 </h2>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
url: "./1122q.jpg",
isActive: true,
},
methods: {handleClick() {this.isActive = !this.isActive // 取反},
},
})
</script>
</html>
2. 展示
三.style 和 class
0. 数据绑定语法
style绑定样式
:style="[js 变量]"
:style="[数组]"
:style="[对象]"
:style="[三目运算符]"
class绑定类
:class="[js 变量]"
:class="[数组]"
:class="[对象]"
:class="[三目运算符]"
1. 代码示例, 绑定不同的属性和类
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
.red {color: rgba(255, 104, 104, 0.7);
}
.font-20 {font-size: 20px;}
.be-bold {font-weight: bold;}
</style>
</head>
<body>
<div id="box">
<p> 普通的 p 标签 </p>
<hr>
<p :class="class_obj"> 设置了 class_obj 的 p 标签(字符串)</p>
<hr>
<p :class="class_obj2"> 设置了 class_obj2 的 p 标签(数组)</p>
<hr>
<button @click="handleClick"> 点击放大字体 </button>
<hr>
<p :style="style_obj"> 设置了 style_obj 的 p 标签 </p>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
class_obj: 'red', // 放的是字符串
class_obj2: ['red', 'font-20', 'be-bold'], // 放 2 个是数组
// class_obj: {red:true, be-bold:false}, // 也可以放对象
// 字符串写法
// style_obj:'color : red; font-size : 40px'
// 对象的写法
style_obj: {
color: 'red',
fontSize: '20px'
}
// 或者数组套字典
// style_obj: [{background:'red'}, {fontSize:'20px'}]
},
methods: {handleClick() {this.style_obj['fontSize'] = '30px'
}
}
})
</script>
</html>
四. 条件渲染
| 指令 | 释义 |
|---|---|
| v-if | 相当于：if |
| v-else | 相当于：else |
| v-else-if | 相当于：else if |
1. 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<body>
<div id="box">
<h2 v-if="type==='1'">(if type==='1')展示我 </h2>
<h2 v-else-if="type==='2'">(else-if type==='2')展示我 </h2>
<h2 v-else>(else)展示我 </h2>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {type: '1',}
})
</script>
</html>
2. 展示
五. 列表渲染
1.v-if + v-for + v-else 控制书籍信息
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h2> 我的书单 </h2>
<!-- 点击按钮展示书单 -->
<button @click="showBook"> 展示书单 </button>
<hr>
<!-- 如果书单列表不为空 -->
<table class="table table-striped" v-if="!book_list.length==0">
<tr>
<td> 书籍名称 </td>
<td> 价格 </td>
</tr>
<!--for 循环取出书籍对象展示 -->
<tr v-for="item in book_list">
<td>{{item.title}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<!-- 书籍列表为空的情况下 -->
<table v-else class="table table-striped">
<tr>
<td> 书籍名称 </td>
<td> 价格 </td>
</tr>
<tr>
<td> 空空如也 </td>
<td> 空空如也 </td>
</tr>
</table>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isActive: false,
book_list: []},
methods: {showBook() {
this.book_list = [{title: '《边城》', price: '29 元'},
{title: '《城南的猫》', price: '59 元'},
{title: '《猫》', price: '99 元'},
]
}
}
})
</script>
</html>
- 展示
2.v-for 遍历数组、对象、数组套对象
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 剛剛 </title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h2> 数组 for 循环遍历 </h2>
<ul>
<li v-for="(value,index) in num_list">{{index}} —— {{value}}</li>
</ul>
<h2> 对象 for 循环遍历 </h2>
<ul>
<li v-for="(value,key) in user_info">{{key}} —— {{value}}</li>
</ul>
<h2> 数组套对象 for 循环遍历 </h2>
<table class="table table-striped">
<tr>
<td> 书名 </td>
<td> 价格 </td>
<td> 数量 </td>
<td> 出版社 </td>
</tr>
<tr v-for="info in book_list">
<td>{{info.title}}</td>
<td>{{info.price}}</td>
<td>{{info.count}}</td>
<td>{{info.publish}}</td>
</tr>
</table>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {num_list: ['First', 'second', 'Third', 'Forth', 'Fifth'],
user_info:{name: 'shawn', age: 18, gender: 'male'},
book_list: [{title: '边城', price: 23, count: 8, publish: '南京出版社'},
{title: '薛定谔', price: 45, count: 5, publish: '北京出版社'},
{title: '茶花女', price: 32, count: 2, publish: '南京出版社'},
{title: '城南旧事', price: 48, count: 3, publish: '南京出版社'},
{title: '最后一枝花', price: 66, count: 6, publish: '北京出版社'},
]
}
})
</script>
</html>
- 展示
ps :
Python 中取列表或字典的 index / key 一般在前面, value 在后面
在 vue 中数组的 index 与 value 位置是反过来的
- 对象的 key 和 value 也是反过来的
3.Key 值的作用
- key 的作用主要是为了高效的更新虚拟 DOM（虚拟 DOM 用了 diff 算法）
- 在
v-for循环数组、对象时，建议在控件 / 组件 / 标签写 1 个 key 属性，属性值唯一 - 页面更新之后，会加速 DOM 的替换（渲染）
:key="[变量]"
4. 数组的更新与检测
尤雨溪对数组的部分操作方法进行了重写, 重写的方法对数据进行操作也将会触发视图更新
- 可以检测到变动的数组操作
push() # 最后位置添加
pop() # 最后位置删除
shift() # 第一个位置删除
unshift() # 第一个位置添加
splice() # 切片
sort() # 排序
reverse() # 反转
- 检测不到变动的数组操作
filter() # 过滤
concat() # 追加另一个数组
slice() # 切片
map() # 映射
六. 事件处理
| 事件 | 说明 |
|---|---|
| input | 当输入框 内容变化 的时候, 实时触发 的事件(一般用作检索) |
| change | 当输入框内容发生改变并失去焦点时, 触发的事件 |
| blur | 当输入框失去焦点的时候, 触发的事件 |
- change 和 blur 最本质的区别
如果输入框为空, 失去焦点后, change 不会触发, 但是 blur 会触发
1. 代码示例 : 实现搜索框过滤数据功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-4">
<!--input 框数据双向绑定使用 v -model-->
<p><input type="text" v-model="myText" @input="handleInput" placeholder=" 请输入查找内容 "></p>
<!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder=" 请输入查找内容 "></p> -->
<!-- <p><input type="text" v-model="myText" @blur="handleInput" placeholder=" 请输入查找内容 "></p> -->
<ul>
<!-- 循环从 newList 中取出需要展示的数据 -->
<li v-for="data in newList">{{data}}</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myText: '',
// 所有的数据
oldList: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女'],
// 需要展示的过滤后的数据(先默认全部展示, 过滤后就只展示过滤后的数据)
newList: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女'],
},
methods: {handleInput() {
// 过滤 oldList 里的每一个元素, 判断 myText 这个字符串在不在元素里, 在, 则返回 true 加入 newList
this.newList = this.oldList.filter(item => {
// 输入框中输入的字符串在筛选元素中的索引, 找不到返回 -1, 大于 -1 就表示包含在其中
if (item.indexOf(this.myText) > -1) {return true // 返回 true 则展示} else {return false // 返回 false 则不展示}
})
},
},
})
</script>
</html>
2. 展示
3. 补充箭头函数
-
箭头函数是 ES6 版本的语法
=> -
箭头函数可以替换函数表达式，但是不能替换函数声明
- 至关重要的一点 : 在 箭头函数中, 没有 this; 如果你在箭头函数中使用了 this, 那么该 this 一定就是外层的 this
list: ['边城', '城南旧事', '薛定谔的猫', '黑猫警长', '猫和老鼠', '最后一枝花', '茶花女']
// 正常写法
let newList = list.filter(function (item) {if (item.length >= 3) {return true} else {return false}
})
// 箭头函数 ES6 版本的语法
let newList = list.filter(item => {if (item.length >= 3) {return true} else {return false}
})
// es5
var fn = function(a, b) {return a + b;}
// es6 箭头函数写法，当函数直接被 return 时，可以省略函数体的括号
const fn = (a, b) => a + b;
七. 事件修饰符
| 事件修饰符 | 说明 |
|---|---|
| .stop | 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止 a 链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
ps:
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
因此，用
v-on:click.prevent.self会阻止 所有的点击而
v-on:click.self.prevent只会阻止对 元素自身的点击
1. 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<style>
ul {
background-color: #9de5c8;
width: 300px;
list-style-type:none;
}
li {
background-color: #e389ae;
width: 230px;
}
</style>
<body>
<div id="box">
<!-- 阻止子控件事件 -->
<ul @click.self="handleUl">
<!-- 阻止父控件事件(冒泡) -->
<li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
<br>
<!-- 正常 a 链接, 点击跳转 -->
<li><a href="http://www.baidu.com"> 不拦截 </a></li>
<br>
<!-- 点击先触发了一个方法, 方法里面进行拦截 -->
<li><a href="http://www.baidu.com" @click="handleLink($event)"> 点击拦截 </a></li>
<br>
<!-- 点击被拦截并触发一个方法 -->
<li><a href="https://www.baidu.com" @click.prevent="handleLink"> 点击拦截 </a></li>
<br>
<!-- 点击只能执行一次(刷新页面可以再执行)-->
<li>
<button @click.once="test"> 只执行一次 </button>
</li>
<br>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {dataList: ['i am son1', 'i am son2', 'i am son3', 'i am son4']
},
methods: {handleUl() {console.log('ul 被点击了')
},
handleLi(ev) {console.log('li 被点击了')
ev.stopPropagation() // 点击事件停止, 冒泡（向父组件传递事件）},
handleLink(ev) {ev.preventDefault() // 阻止 a 链接跳转
},
test() {alert('只触发 1 次')
}
}
})
</script>
</html>
2. 展示
- 阻止冒泡事件
- a 链接不拦截、拦截、拦截再执行方法
- 点击只执行一次
八. 按键修饰符
1. 监听键盘事件
v-on:keyup/v-on:keydown简写@keyup/@keydown
.enter # 常用
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
2. 代码示例 : 监听键盘实现跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<!-- 任意按键弹起触发 -->
<!-- <input type="text" @keyup="handle" v-model="search">-->
<!-- 任意按键按下就触发 -->
<!-- input type="text" @keydown="handle" v-model="search">-->
<!--enter 按键弹起触发(还有很多其他按键自定义)-->
<input type="text" @keyup.enter="handle" v-model="search">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {search:''},
methods: {handle(){alert('enter 键弹起, 并跳转页面')
location.href='https://www.baidu.com/s?wd='+this.search
}
}
})
</script>
</html>
3. 展示
九. 数据的双向绑定
1.input 输入框的数据的双向绑定
- input 输入框使用
v-model='[js 变量]'来实现
2. 代码展示 : 前端验证用户信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<!-- 名字绑定 name, 密码绑定 password-->
请输入您的名字：<input type="text" v-model="name" class="form-control">
<hr>
请输入您的密码：<input type="password" v-model="password" class="form-control">
<hr>
欢迎：{{name}}
<hr>
<span>{{error}}</span> <!-- 用来展示错误信息 -->
<button @click="submit_1" class="btn btn-info btn-block"> 登录 </button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'',
password:'',
error:''
},
methods:{
// 直接在前端进行判断
submit_1(){if(this.name=='shawn' && this.password=='123'){location.href='http://www.baidu.com'}else {this.error='用户名或密码错误'}
}
}
})
</script>
</html>
3. 展示
十. 表单控制
1.checkbox 选中
2. 单选框
3. 多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<hr>
<h3>checkbox 选中 </h3>
<input type="checkbox" v-model="check_1" value="check_1"> ✅请勾选以确认阅读!<br>
<span>{{check_1?'已勾选':'未勾选'}}:{{check_1}} </span>
<hr>
<h3> 单选框 </h3>
性别：<input type="radio" v-model="radio_1" value="1: 男 "> 男 ♂️
<input type="radio" v-model="radio_1" value="2: 女 "> 女 ♀️
<input type="radio" v-model="radio_1" value="3: 未知 "> 未知 ❗
<br>
<span> 您的性别 : {{radio_1}}</span>
<hr>
<h3> 多选框 </h3>
<span v-for="hobby in hobbys">
<!-- 传给后端一般传 id 而不是汉字 -->
<!--<input type="checkbox" v-model="many" :value="hobby.id"> {{hobby.name}}-->
<input type="checkbox" v-model="many" :value="hobby.name"> {{hobby.name}}
</span>
<br>
您的爱好：<span v-for="hob in many">{{hob}}、</span>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
check_1: false, // checkbox
radio_1: '', // 单选框
hobbys: [{id: 1, name: '📖阅读'}, {id: 2, name: '🏃跑步'}, {id: 3, name: '🎯游戏'}, {id: 4, name: '🍖食物'}],
many: [], // 多选框},
})
</script>
</html>
- 展示
4. 购物车结算案例 : 数量 * 价格
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover">
<tr>
<td> 书籍名称 </td>
<td> 价格 </td>
<td> 数量 </td>
<td> 选择 </td>
</tr>
<tr v-for="item in dataList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<!-- 选中之后 checkGroup 会发生变化, 自动触发函数计算价格 -->
<td><input type="checkbox" :value="item" v-model="checkGroup"></td>
</tr>
</table>
<br>
已选书籍：<!-- 循环取出购物车的书籍 -->
<span v-for="book in checkGroup">
{{book.name}} : {{book.count}} 个、</span>
<br> 总价：{{getPrice()}} <!-- 执行计算价格的函数返回总价格 -->
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: [{name: '边城', price: 20, count: 2},
{name: '受戒', price: 30, count: 1},
{name: '南行记', price: 40, count: 5},
{name: '竹林的故事', price: 50, count: 3},
{name: '呼兰河传', price: 60, count: 4},
],
checkGroup: [],},
methods: {getPrice() {
let sum_price = 0
// 基于下标 (索引) 循环(Python 中只有迭代循环, 没有索引循环,Java 和 go 中都有
// for (i=0;i<this.checkGroup.length;i++){for (i in this.checkGroup) { // 这里的 i 是索引
// 单价 * 数量计算价格
sum_price += this.checkGroup[i]['count'] * this.checkGroup[i]['price']
}
return sum_price // 返回总价格
}
},
})
</script>
</html>
- 展示
5. 购物车结算案例 : 增加全选与取消全选按钮
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover">
<tr>
<td> 书籍名称 </td>
<td> 价格 </td>
<td> 数量 </td>
<td>{{allChecked?'取消全选':'全选操作'}}
<!-- 点击该选择框发生变化失焦后触发 checkAll 函数 -->
<input type="checkbox" v-model="allChecked" @change="checkAll">
</td>
</tr>
<tr v-for="item in dataList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
<!-- 选中之后 checkGroup 会发生变化, 自动触发函数计算价格, 并触发 checkOne 的执行去判断是否已经全部选中了 -->
<td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
</tr>
</table>
<hr>
已选书籍：<!-- 循环取出购物车的书籍 -->
<span v-for="book in checkGroup">
{{book.name}} : {{book.count}} 个、</span>
<br> 总价：{{getPrice()}} <!-- 执行计算价格的函数返回总价格 -->
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: [{name: '边城', price: 20, count: 2},
{name: '受戒', price: 30, count: 1},
{name: '南行记', price: 40, count: 5},
{name: '竹林的故事', price: 50, count: 3},
{name: '呼兰河传', price: 60, count: 4},
],
checkGroup: [],
allChecked:false,
},
methods: {
// 计算总价格
getPrice() {
let sum_price = 0
for (i in this.checkGroup) { // 这里的 i 是索引
// 单价 * 数量计算价格
sum_price += this.checkGroup[i]['count'] * this.checkGroup[i]['price']
}
return sum_price // 返回总价格
},
// 点击全选 / 取消全选按钮
checkAll(){
// 如果所选书籍长度不等于所有书籍程度, 说明不是全选, 于是我们将其全选
if (this.checkGroup.length != this.dataList.length){this.checkGroup = this.dataList}else{
// 否则将 checkGroup 置空实现取消全选
this.checkGroup = []}
},
// 判断购物车书籍是否已经全部选中
checkOne(){if (this.checkGroup.length != this.dataList.length){
// 如果长度不相等, 那么就不是全选, 将按钮取消选中
this.allChecked = false
}else{
// 如果全部选中则将全选按钮也变成激活状态
this.allChecked = true
}
},
},
})
</script>
</html>
- 展示
6. 购物车结算案例 : 实现书籍数量可进行加减
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
button{
outline: none;
background-color: #ddeac6;
color: #757a78;
}
</style>
</head>
<body>
<div id="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover">
<tr>
<td> 书籍名称 </td>
<td> 价格 </td>
<td> 数量 </td>
<td>{{allChecked?'取消全选':'全选操作'}}
<!-- 点击该选择框发生变化失焦后触发 checkAll 函数 -->
<input type="checkbox" v-model="allChecked" @change="checkAll">
</td>
</tr>
<tr v-for="item in dataList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<!-- 每点击一次加一次 -->
<button type="button" class="btn btn-xs" @click="item.count++">+🧡</button>
{{item.count}}
<!-- 每点击一次减一次, 但不能减到零(与加不一样, 要专门建函数处理一下)-->
<button type="button" class="btn btn-xs" @click="reduce(item)">-💔</button>
</td>
<!-- 选中之后 checkGroup 会发生变化, 自动触发函数计算价格, 并触发 checkOne 的执行去判断是否已经全部选中了 -->
<td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
</tr>
</table>
<hr>
已选书籍：<!-- 循环取出购物车的书籍 -->
<span v-for="book in checkGroup">
{{book.name}} : {{book.count}} 个、</span>
<br> 总价：{{getPrice()}} <!-- 执行计算价格的函数返回总价格 -->
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: [{name: '边城', price: 20, count: 2},
{name: '受戒', price: 30, count: 1},
{name: '南行记', price: 40, count: 5},
{name: '竹林的故事', price: 50, count: 3},
{name: '呼兰河传', price: 60, count: 4},
],
checkGroup: [],
allChecked:false,
},
methods: {
// 计算总价格
getPrice() {
let sum_price = 0
for (i in this.checkGroup) { // 这里的 i 是索引
// 单价 * 数量计算价格
sum_price += this.checkGroup[i]['count'] * this.checkGroup[i]['price']
}
return sum_price // 返回总价格
},
// 点击全选 / 取消全选按钮
checkAll(){
// 如果所选书籍长度不等于所有书籍程度, 说明不是全选, 于是我们将其全选
if (this.checkGroup.length != this.dataList.length){this.checkGroup = this.dataList}else{
// 否则将 checkGroup 置空实现取消全选
this.checkGroup = []}
},
// 判断购物车书籍是否已经全部选中
checkOne(){if (this.checkGroup.length != this.dataList.length){
// 如果长度不相等, 那么就不是全选, 将按钮取消选中
this.allChecked = false
}else{
// 如果全部选中则将全选按钮也变成激活状态
this.allChecked = true
}
},
// 数量减少
reduce(item){
// 数量最少为 1
if(item.count === 1){alert('宝贝不能再少了')
}else{item.count--}
}
},
})
</script>
</html>
- 展示
十一. v-model 进阶
1.v-model 之 lazy、number、trim
lazy：等待 input 框的数据绑定失去焦点之后再变化number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留trim：去除开头结尾的空格
2. 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="box">
<hr>
<input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
<hr>
<!--input 框失去焦点后数据才会发生变化 -->
<input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
<hr>
<!-- 数字开头后面只保留数字, 字母开头后面全部保留, 汉字当字母处理 -->
<input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
<hr>
<!-- 取出开头结尾空格 -->
<input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myText1: '',
myText2: '',
myText3: '',
myText4: '',
},
})
</script>
</html>
3. 展示
正文完
yanmkxx
很牛，谢谢你写的文章
wszzss
请帮我修改下链接：微生之最，前面帮我加个www
song1
搜索
puock
(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)
zhaochong
😄
xing1
😶🌫️