表单数据绑定、修饰符和生命周期

1.key的使用

　　key：只要元素需要循环，必须添加key作为唯一的标识

<div id="app">
<!-- <div class="box" v-for='(item,index) in arr' :key='item.id'> -->
<div class="box" v-for='(item,index) in arr' :key='index'>
<span>{{item.id}}</span>
<span>{{item.name}}</span>
<button @click='changeName(index)'>修改姓名</button>
</div>


let vm = new Vue({
//挂载点
el: '#app',
arr: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
]
},
methods: {
// 修改姓名
changeName(index){
this.arr[index].name='赵六'
}
},

// key:作用:添加唯一的标识,只要元素需要循环，那么都需要添加一个key作为唯一值(通常情况下会添加id)
})

2.动态类名

1.class

总结： 1. :class='变量名' 变量名需要在data中声明,并且值要在style中定义
　　　　2. :class='[index%2==0:"red":"green"]' 只需要在style中声明类名
　　　　3. :class='{red:true,green:true}' 只需要在style中声明即可

<body>
<div id="app">
<button @click="changeColor('green')">green</button> <button @click="changeColor('yellow')">yellow</button>
<p :class='change'>我是P标签修改后的</p>
<hr>
<!-- 0:green 1:yellow 2:green 3:yellow 4:green 5:yellow 
:class='[index%2==0?"green":"yellow"]'
-->
<div v-for='(item,index) in arr' :key='item.id' :class='[index%2==0?"green":"yellow"]'>{{item.name}}</div>

<hr>
<!-- {0:red,1:green,2:yellow 3:red,4:green，5:yellow} -->
<!-- 三行改变颜色 :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'-->
<div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3,green:index%3,yellow:index%3}'>{{item.name}}</div>

<hr>
<hr>
<div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'>{{item.name}}</div>

<!-- <div :class='{blue:false,green:true,yellow:false}'>我是测试用的</div> -->
</div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// el,data,methods ...都叫做vue的配置项
let vm = new Vue({
// element 挂载点
el: '#app',
data: {
change: 'blue',
arr: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橘子' },
{ id: 4, name: '橙子' },
{ id: 5, name: '柚子' },
{ id: 6, name: '葡萄' },
]
},
methods: {
// 修改背景色
changeColor(color) {
this.change = color
}
},
})

</script>

2.style

总结:1. :style='变量名' 必须要在data中声明对应样式属性有连字符的需要换为驼峰写法

2. :style='[变量名1,变量名2]'

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2.创建元素 -->
<div id="app">
<p style="background: red;">我是用来测试行内绑定样式</p>
<hr>
<p :style="bg">我是用来测试行内绑定样式</p>
<hr>
<hr>
<p :style="[bg,color]">我是用来测试行内绑定样式</p>
</div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// el,data,methods ...都叫做vue的配置项
let vm = new Vue({
// element 挂载点
el:'#app',
data:{
bg:{
background:'blue'
},
color:{
color:'yellow',
fontSize:'40px'
}
},
})
</script>
</html>

3.表单的使用

总结:

radio: 会把value值赋值给你定义的变量

checkbox:会把value值赋值给你定义的变量

multiple：实现下拉框的多选

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<!-- 2.创建元素 -->
<div id="app">
<h2>添加学员</h2>
<div>姓名: <input type="text" v-model='user.name'> </div>
<!-- 对于单选框来说,会把value的值赋值给你定义的变量(user.sex) -->
<div>性别: <input type="radio" name='sex' value="0" v-model='user.sex'>男
<input type="radio" name='sex' value="1" v-model='user.sex'>女
</div>
<div>
电话: <input type="number" v-model='user.tel'>
</div>
<div>
密码: <input type="password" v-model='user.pass'>
</div>
<div>
确认密码: <input type="password" v-model='confirm'>
</div>
<div>
爱好: <input type="checkbox" value="sing" v-model='user.hobby'>唱歌
<input type="checkbox" value="dancing" v-model='user.hobby'>跳舞
<input type="checkbox" value="playing" v-model='user.hobby'> 打游戏
<input type="checkbox" value="codding" v-model='user.hobby'>写代码
</div>
<div>
专业:
<!-- 下拉框:下拉框中的选中的那一项的value值会赋值为select -->
<select name="" id="" v-model='user.job'>
<option value="java">java工程师</option>
<option value="web">web工程师</option>
<option value="php">php工程师</option>
</select>
</div>
<div>
证书:
<!-- multiple 实现多选 -->
<select name="" id="" v-model='user.cert' multiple>
<option value="erji">计算机二级</option>
<option value="siji">英语四级</option>
<option value="liuji">英语6级</option>
</select>
</div>
<div>
备注:
<textarea name="" id="" cols="30" rows="10" v-model='user.des'></textarea>
</div>
<div>
<input type="checkbox" v-model='user.isAgree'>是否同意
</div>
<div>
<button @click='submit()' :disabled='!user.isAgree'>提交</button>
</div>
</div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// el,data,methods ...都叫做vue的配置项
// 姓名 name eg:"张三"
// 性别 sex eg:"0" 说明：男-0 女-1 
// 电话 tel eg:"15747474747"
// 密码 pass eg:"123"
// 爱好 hobby eg:["codding","playing"] 说明：唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding 
// 专业 job eg:"web" 说明：java工程师-java web工程师-web php工程师-php 
// 证书 cert eg:["erji","siji"] eg:计算机二级-erji 英语四级-siji 英语6级-liuji 
// 备注 des eg:"他是一个党员"
// 是否同意 isAgree eg:true 同意-true 不同意-false

let vm = new Vue({
// element 挂载点
el: '#app',
data: {
confirm: '',
user: {
name: 'zs',
sex: '1',
tel: '110',
pass: '123',
hobby: ['sing','playing'],
job: 'web',
cert: ['liuji'],
des: '是个好人',
isAgree: false
}
},
methods: {
// 提交
submit() {
console.log(this.user)
if(this.confirm==this.user.pass){
console.log('发送请求')
}else{
console.log('密码不一致')
}
}
},
})
</script>
</html>

4.事件使用

绑定事件:v-on:click

事件传参

1.隐式传参方法名不添加小括号：默认会有event对象，直接在方法中获取即可

2.传参实参必须是$event 方法中正常获取event即可

```js
<body>
<!-- 2.创建元素 -->
<div id="app">
{{num}}
<!-- <button @click = 'add()'>点击增加</button> -->
<!-- <button @click = 'add(5)'>点击增加5</button> -->
<!-- 默认不传参 不加括号的情况叫做隐式传参 -->
<button @click = 'add2'>点击增加</button>

<!-- 需要传递参数的时候务必使用$event获取 -->
<button @click = 'add3($event)'>点击增加</button>
<hr>

<button @click = 'num+=2'>点击增加2</button>
</div>
</body>
<script>
// el,data,methods ...都叫做vue的配置项
let vm = new Vue({
// element 挂载点
el:'#app',
data:{
num:0
},
methods: {
// add(n){
// this.num+=n
// }
add2(e){
console.log(e)
},
add3(e){
console.log(e) 
}
},
})
</script>
```

修饰符

a.事件修饰符

冒泡stopPropagation

@click.stop

<div id="app">
<div class="box" @click='box'>
我是大盒子
<div class="outer" @click='outer'>
我是外层盒子
<div class="inner" @click.stop='inner'>我是里层盒子</div>
</div>
</div>
</div>
```

捕获capture

@click.capture

<!-- capture:给谁添加谁先触发，之后会按照冒泡来触发 --> <div id="app">
<div class="box" @click='box'>
我是大盒子
<div class="outer" @click.capture='outer'>
我是外层盒子
<div class="inner" @click='inner'>我是里层盒子</div>
</div>
</div>
</div>

once

@click.once 给谁添加，只执行一次

<div id="app">
<div class="box" @click='box'>
我是大盒子
<div class="outer" @click.once='outer'>
我是外层盒子
<div class="inner" @click='inner'>我是里层盒子</div>
</div>
</div>
</div>

self

@click.self 只能自己触发自己

<div id="app">
<div class="box" @click='box'>
我是大盒子
<div class="outer" @click.self='outer'>
我是外层盒子
<div class="inner" @click='inner'>我是里层盒子</div>
</div>
</div>
</div>

prevent

@click.prevent 阻止事件的默认行为

<div id="app">
<!-- prevent 阻止事件的默认行为 -->
<a href="http://www.ujiuye.com" @click.prevent = 'skip'>点我跳转</a>
<div @contextmenu.prevent = 'right'>我是右键菜单</div>

</div>

b.键盘修饰符

@keydown.up，@keydown.down，@keydown.left，@keydown.right，@keydown.enter

<div id="app">
<input type="text" @keydown.down='down' placeholder="向下">
<input type="text" @keydown.up='up' placeholder="向上">
<input type="text" @keydown.left='left' placeholder="向左">
<input type="text" @keydown.right='right' placeholder="向右">
</div>
<script>
// el,data,methods ...都叫做vue的配置项
let vm = new Vue({
// element 挂载点
el:'#app',
data:{

},
methods: {
down(){
console.log('down')
},
up(){
console.log('up')
},
left(){
console.log('left')
},
right(){
console.log('right')
}
},
})
</script>
```

c.鼠标修饰符

@click.left @click.middle @click.right

```js
<div id="app">
<div @click.left='left'>点击鼠标左键</div>
<div @click.middle='middle'>点击鼠标中键</div>
<div @click.right.prevent='right'>点击鼠标右键</div>
</div>
<script>
// el,data,methods ...都叫做vue的配置项
let vm = new Vue({
// element 挂载点
el:'#app',
data:{

},
methods: {
left(){
console.log('left')
},
middle(){
console.log('middle')
},
right(){
console.log('right')
},

},
})
</script>
```

d.表单修饰符

v-model.lazy

```js
layz:失去光标后更新数据
<input type="text" v-model.lazy='msg'>{{msg}}
```

v-model.number

```js
number:判断定义变量的数据类型，只判断第一位
<input type="text" v-model.number='num'>{{typeof(num)}}
```

v-model.trim

```js
trim:去除用户输入的首尾空格,不能验证初始值
<input type="text" v-model.trim = 'content'>{{content.length}}

6.生命周期

8个钩子函数

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

总结；对于生命周期最常用的是mounted钩子函数，代表挂载完成

```json
具体使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击销毁</button>
<!-- 2.创建元素 -->
<div id="app">
{{msg}}
<input type="text" v-model='msg'>
</div>
</body>
<!-- 1.引入vue文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// el,data,methods ...都叫做vue的配置项
let vm = new Vue({
// element 挂载点
el:'#app',
data:{
msg:'张三'
},
methods: {

},
// 以下是生命周期中的8个钩子函数
// 所有数据都是undefined
beforeCreate(){
console.log(this)
console.log('创建之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
// el:undefined data和msg的值已经获取到
created() {
console.log('创建完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
// 数据都已经拿到，el:找到挂载点但是未解析数据
beforeMount() {
console.log('挂载之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
// 数据和节点都已经解析完毕
mounted() {
console.log('挂载完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
// 更新前后数据都是最新的
beforeUpdate() {
console.log('更新之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
updated() {
console.log('更新完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
beforeDestroy() {
console.log('销毁之前')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
destroyed() {
console.log('销毁完成')
console.log('el:',this.$el)
console.log('data:',this.$data)
console.log('msg:',this.msg)
},
})

// 模拟销毁
document.querySelector('button').onclick = function(){
vm.$destroy()
}
</script>
</html>

posted @ 2021-01-05 23:07 还凶阅读(70) 评论(0) 收藏举报

刷新页面返回顶部

还凶

表单数据绑定、修饰符和生命周期

1.key的使用

key：只要元素需要循环，必须添加key作为唯一的标识

2.动态类名

1.class

总结： 1. :class='变量名' 变量名需要在data中声明,并且值要在style中定义 2. :class='[index%2==0:"red":"green"]' 只需要在style中声明类名 3. :class='{red:true,green:true}' 只需要在style中声明即可

2.style

总结:1. :style='变量名' 必须要在data中声明 对应样式属性有连字符的需要换为驼峰写法

2. :style='[变量名1,变量名2]'

3.表单的使用

总结:

radio: 会把value值赋值给你定义的变量

checkbox:会把value值赋值给你定义的变量

multiple：实现下拉框的多选

4.事件使用

绑定事件:v-on:click

事件传参

1.隐式传参 方法名不添加小括号： 默认会有event对象，直接在方法中获取即可

2.传参 实参必须是$event 方法中正常获取event即可

修饰符

a.事件修饰符

冒泡stopPropagation

@click.stop

捕获capture

@click.capture

once

@click.once 给谁添加，只执行一次

self

@click.self 只能自己触发自己

prevent

@click.prevent 阻止事件的默认行为

b.键盘修饰符

@keydown.up，@keydown.down，@keydown.left，@keydown.right，@keydown.enter

c.鼠标修饰符

@click.left @click.middle @click.right

d.表单修饰符

v-model.lazy

6.生命周期

8个钩子函数

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

总结；对于生命周期 最常用的是mounted钩子函数，代表挂载完成

公告

　　key：只要元素需要循环，必须添加key作为唯一的标识

总结： 1. :class='变量名' 变量名需要在data中声明,并且值要在style中定义
　　　　2. :class='[index%2==0:"red":"green"]' 只需要在style中声明类名
　　　　3. :class='{red:true,green:true}' 只需要在style中声明即可

总结:1. :style='变量名' 必须要在data中声明对应样式属性有连字符的需要换为驼峰写法

1.隐式传参方法名不添加小括号：默认会有event对象，直接在方法中获取即可

2.传参实参必须是$event 方法中正常获取event即可

总结；对于生命周期最常用的是mounted钩子函数，代表挂载完成