1. 指令综合案例-信息表
<!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.0">
<title>指令综合练习</title>
</head>
<style>
/* 90分以上 */
.active1 {
background-color: blue;
color: white;
}
/* 60分以下 */
.active2 {
background-color: red;
color: white;
}
</style>
<body>
<div id="app">
<!-- 1. 页面结构 -->
<!-- 添加表单 -->
<input placeholder="用户名" v-model="stuInfo.name">
<hr>
<input placeholder="电话" v-model="stuInfo.tel">
<hr>
<input placeholder="成绩" v-model="stuInfo.score">
<hr>
<button @click="addStudent">添加用户信息</button>
<hr>
<!-- 表单遍历用户的信息列表 -->
<table width="600" border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>电话</th>
<th>成绩</th>
<th>等级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 3. 遍历和渲染数据 -->
<tr
v-for="(item,index) in students"
:key="item.id"
:class="{ active1:item.score>=90,active2:item.score < 60 }"
>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.tel}}</td>
<td>{{item.score}}</td>
<td>
<span>优</span>
<span>良</span>
<span>中</span>
<span>差</span>
</td>
<td>
<button @click="deleteStu( index )">删除</button>
</td>
</tr>
<!-- <tr class="active1">
<td>111</td>
<td></td>
<td></td>
<td>95</td>
<td></td>
</tr>
<tr>
<td>111</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="active2">
<td>111</td>
<td></td>
<td></td>
<td>60</td>
<td></td>
</tr> -->
<tr v-if="students.length == 0">
<td colspan="5">暂无数据</td>
</tr>
</tbody>
</table>
<button @click="deleteAll">全部删除</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
//2. 初始化数据
students: [
{ id: 1, tel: '15811', name: '诸葛亮', sex: '男', score: 98 },
{ id: 2, tel: '15822', name: '周瑜', sex: '男', score: 88 },
{ id: 3, tel: '15833', name: '刘阿斗', sex: '男', score: 50 },
{ id: 4, tel: '15855', name: '曹植', sex: '男', score: 90 },
{ id: 5, tel: '15866', name: '张飞', sex: '男', score: 70 },
{ id: 6, tel: '15888', name: '曹丕', sex: '男', score: 55 }
],
stuInfo: {
name: '',
tel: '',
score: ''
}
},
methods: {
//4. 添加学生方法
addStudent() {
console.log(this.stuInfo, '-----')
this.stuInfo.id = Math.random()
this.students.push(this.stuInfo) //添加到后面
this.stuInfo = { //重置
name: '',
tel: '',
score: ''
}
},
//删除一个学生
deleteStu(index){
//删除数组中的一个数据。
//splice()
//曹植 索引3
this.students.splice( index,1 )
},
deleteAll(){
this.students = []
}
}
})
</script>
</html>
2.表单
单行文本框，多行，单选，复选，下拉框
2.1 数据绑定
1.输入框
2.单选框
3.下拉菜单
4.多选框
<body>
<div id="app">
<h2>数据收集</h2>
用户名：<input type="text" placeholder="用户姓名" v-model="userInfo.username">
<hr>
<!-- v-model.number .number 代表修饰符，获取的数据会转换成number类型-->
年龄：<input type="number" placeholder="年龄" v-model.number="userInfo.age">
<hr>
<!--
单选框，原生需要为一组单选框设置相同的name属性值，这里不需要
-->
性别：<input type="radio" value="1" v-model="userInfo.sex"> 男<input type="radio" value="2" v-model="userInfo.sex"> 女 <input type="radio" value="3" v-model="userInfo.sex"> 保密
<hr>
<!--
复选框：原生需要为一组单选框设置相同的name属性值，这里不需要
初始数据需要定义数组而不是字符串
如果有些value值是数值number类型，可以在value前面加 :
-->
爱好：<input type="checkbox" :value="1" v-model="userInfo.hobbies">吃饭
<input type="checkbox" :value="2" v-model="userInfo.hobbies">睡觉
<input type="checkbox" :value="3" v-model="userInfo.hobbies">打豆豆
<hr>
<!-- 下拉框 ：单选-->
职业：<select v-model="userInfo.jobIndex">
<option value="" disabled>请选择</option>
<option :value="index" v-for="(item,index) in jobs">{{item}}</option>
<!-- <option value="1">php工程师</option>
<option value="2">web工程师</option>
<option value="3">java工程师</option> -->
</select>
<hr>
零食：
<select multiple v-model="userInfo.eats">
<option value="" disabled>请选择</option>
<option value="1">啤酒</option>
<option value="2">花生</option>
<option value="3">瓜子</option>
</select>
<hr>
备注：
<textarea v-model="userInfo.tip" cols="30" rows="10"></textarea>
<hr>
同意协议：
<input type="checkbox" v-model="userInfo.isAgree">
<hr>
<button @click="addUser">添加用户</button>
</div>
</body>
<script src="vue.js"></script>
<script>
// let n1 = 10
new Vue({
el: '#app',
data: {
userInfo:{
username:'',//用户姓名
age:'',//年龄
sex:'',//性别
hobbies:[],//爱好
jobIndex:'',//职业选择标识
eats:[],//多选，设置成数组
tip:'',//备注
isAgree:false,//是否同意协议
},
jobs:[
'php工程师',
'java工程师',
'web工程师'
]
},
methods:{
addUser(){
//这个函数执行，收集表单中的所有的信息
console.log( this.userInfo )
//验证数据格式是否正确
//验证通过发送ajax
/*
$.ajax({
url:'/adduser',
data:this.userInfo // 得保证前端初始化的参数名和后端接口的参数名要一致
})
$.ajax({
url:'/login',
data:{
username:'xxx',
password:'xxx'
},
method:'post'
})
*/
}
}
})
</script>
2.2 表单修饰符
-
lazy
-
number
-
trim
v-model.修饰符
<body>
<div id="app">
<!-- number lazy trim -->
<input type="text" placeholder="搜索框" v-model.lazy="keyword">
<hr>
{{ keyword }}
<hr>
<!-- trim: 去除左右空格 -->
<hr>
<input type="text"v-model.trim="password" >
<hr>
----{{password}}====
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword:'web',
age:20,
password:''
},
})
</script>
2.3 表单事件注意事项
单选框、多选框、下拉菜单如果要绑定事件，都是change,不要使用click
<body>
<div id="app">
<input type="checkbox" v-model="isAgree" @change="isShow"> 同意协议
<div v-show="isAgree">
协议具体内容
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isAgree:false
},
methods:{
isShow(){
console.log( this.isAgree,'---' )
}
}
})
</script>
3 事件处理
事件兼听的语法（ addEventListerner/removeEventListernver: attachEvent/detachEvent ）、
事件对象：ev = ev || event
事件流：冒泡和捕获
委托|代理：冒泡+事件源
阻止冒泡：event.cancelBubble = true event.stopPropagation()
阻止默认行为: return false || event.preventDefault()
键盘事件：键码
滚轮事件：向上/向下
拖拽原理：….
3.1 如何绑定事件及传参
3.2 事件对象 event
<body>
<div id="app">
<!--
v-on:事件名=事件函数( [$event],参数列表 )
@事件名=事件函数( [$event],参数列表 )
-->
<!-- 1. 调用事件函数没有写小括号，默认会把事件对象传递过去：隐式传递事件对象e -->
<button @click="handler1">不传参</button>
<hr>
<!-- 2.带小括号，但也要传递事件对象，则必须使用$event而且是第1个参数 -->
<button @click="handler2($event,11,22)">带小括号，但也要传递事件对象，则必须使用$event而且是第1个参数</button>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods:{
handler1( e ){
console.log( 'handler1',e )
},
handler2( e ){
console.log( 'handler2',e )
},
}
})
</script>
3.3 阻止默认事件 阻止事件传播
原生写法
<body>
<div id="app">
<!-- 1. 默认行为：开发者没有绑定事件，但是用户进行了一些操作从而触发了某些事件产生的效果，这是事件的默认行为 -->
<a href="http://www.baidu.com" @click="handler1">百度</a>
<!--
如何取消：哪个元素身上的什么事件触发的默认行为,那么就在此元素身上的此事件进行阻止
-->
<!-- 2. 事件流：冒泡 -->
<div style="border:1px solid red; padding:20px" @click="outerHander">
<button @click="innerHander( $event )">按钮</button>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods:{
handler1(e){
//e.preventDefault() //return false
},
outerHander(){
console.log( 'outer' );
},
innerHander(e){
console.log( 'innerHander' );
e.stopPropagation()
}
}
})
</script>
self之弹框应用
用户在做编辑、删除等不可逆操作的时候，经常会有弹框提示 这个弹框会有 mask 遮照层（ 确定和取消 ： confirm/cancel ）
<style>
.mask {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
}
.con {
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 居中方式有多少种？ */
</style>
<body>
<div id="app">
<!--
用户在做编辑、删除等不可逆操作的时候，经常会有弹框提示
这个弹框会有 mask 遮照层（ 确定和取消 ： confirm/cancel ）
-->
<ul>
<li>用户名：xx1 <button @click="delUserByIndex">删除</button></li>
<li>用户名：xx2 <button @click="delUserByIndex">删除</button></li>
<li>用户名：xx3 <button @click="delUserByIndex">删除</button></li>
</ul>
<!--
有些网站交互点击遮照层区域，也可以理解为隐藏
-->
<div class="mask" v-show="isShow" @click.self="cancel">
<div class="con">
<button @click="confirm">确定</button>
<button @click="cancel">取消</button>
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShow: false,//控制弹框是否显示
},
methods: {
delUserByIndex() {
this.isShow = true
},
cancel(){
this.isShow = false
},
confirm(){
console.log( '才真正的要删除' );
this.cancel()
}
}
})
</script>
3.4 事件修饰符
.prevent 阻止默认事件 .stop 阻止事件传播 .self 触发的目标元素是自己才执行 .once 一次性事件绑定 ： 了解 .capture 实现事件捕获 .left 左键 .right 右键 .up 上键 .down 下键 .enter 回车 .13 键码
<body>
<div id="app">
<!--
.once 一次性事件绑定 ： 了解
.left 左键
.right 右键
.up 上键
.down 下键
.enter 回车
.13 键码
-->
<button @click.once="clickMe1">once</button>
<button @click="clickMe2">clickMe2</button>
<hr>
<input
placeholder="键盘事件修饰符"
@keydown.left="keyHandlerLeft"
@keydown.right="keyHandlerRight"
@keydown.13.17="keyHandlerEnter"
>
<!-- @keydown.enter="keyHandlerEnter" -->
<input
placeholder="ctrlEnter发消息"
@keydown="ctrlEnter"
>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag:true
},
methods: {
//ctrlEnter发消息
ctrlEnter(e){
// console.log( e );
if( e.ctrlKey && e.keyCode == 13 ){
console.log('可以发消息')
}
},
clickMe1(){
console.log('clickMe1')
},
clickMe2(){
if( !this.flag ){
return
}
this.flag = false
console.log('clickme2')
},
keyHandlerLeft(){
console.log( '键盘按下-left' );
},
keyHandlerRight(){
console.log( '键盘按下-right' );
},
keyHandlerEnter(e){
console.log( e,'enter键');
}
}
})
</script>
4.$set
this.$set(数据,”新增属性”,”值”): 原型链上的方法 Vue.set(数据,”新增属性”,”值”)：静态方法。
3.1 对象的问题
如果定义data的数据时没有某个字段，后面添加的字段，改变页面不会渲染。
3.2 数组的问题
后端返回了数据，但是前端自己添加了某个字段，该字段改变，页面不会渲染。
<body>
<div id="app">
用户信息：对象
<div>用户名：{{person.username}}</div>
<div>性别：{{person.sex}}</div>
<div>年龄：{{person.age}}</div>
<button @click="getUserInfo">获取用户信息</button>
<hr>
<h2>数组</h2>
<ul>
<li v-for="(item,index) in persons">
{{item.username}}--{{item.sex}} -- {{item.age}} <button @click="getUserAge(index)">获取这个年龄</button>
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
person: {
username: 'zs',
sex: '女',
//age:''
},
persons:[
{
username: 'zs',
sex: '女',
},
{
username: 'ls',
sex: '男',
}
]
},
methods: {
getUserAge(index){
//console.log( this.persons );
//1. splice: 把当前项删除，然后整体替换
// this.persons[index].age = 10 //第0项加age属性
// let user =this.persons[index]
// this.persons.splice( index,1,user )
//2. this.$set( 更新哪个数组,'下标',整体替换value )
this.persons[index].age = 20 //第0项加age属性
let user =this.persons[index]
this.$set( this.persons ,index, user)
},
getUserInfo() {
// this.person.age = 20
// console.log( this.person,'----' );
// console.log( this,'----' );
//1. this.$set( 更新哪个对象,key,value )
//this.$set( this.person,'age',30 )
//2. Vue.set(更新哪个对象,key,value ) : 静态方法
Vue.set(this.person,'age',20 )
//3. 把person整体覆盖
// this.person = {
// username: 'zs',
// sex: '女',
// age: 10
// }
}
}
})
// Date.now() Object.assign Array.of Array.from
</script>
调用下面方法，视图都会更新：
push() pop() shift() unshift() splice() sort() reverse() 这些方法会影响源数据
filter/find/findIndex/map/every/some 不会影响视图的变化
5.生命周期
版权声明：本文为ILove_bugs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。