一、指令—directive
1. v-bind
- 属性和数据进行绑定
- 举例： 表单的value属性和一个数据绑定
<input type="text" v-bind:value = "msg">
<!-- 简写 -->
<input type="text" :value = "msg">
- 说法： 绑定一个数据在某一个属性身上
2. v-bind 【 单向数据绑定 】
- 绑定类名 绑定样式
- 为什么要绑定？
- 答： 通过操作数据就可以改变V中dom的样式，相当于操作了dom
类名的绑定 【 两种写法 】
- 数组的写法 【 兵哥推荐 】
<h4> 类名绑定 - 数组写法 </h4> <p :class = "['size','bg']"></p> <p :class = "[size,bg]"></p> - 对象的写法
<h3> v-bind 绑定类名 </h3> <h4> 类名绑定 - 对象写法 </h4> <p class = "size bg"> </p> <p :class = "{size: true,bg: true}"></p> <p :class = "{[size]: true,[bg]: true}"></p>
样式的绑定
- 数组的写法 【 兵哥推荐 】
<h4> 样式绑定 - 数组写法 </h4> <p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p> <p :style = "[ styleObj,styleColor ]"></p> - 对象的写法
<h4> 样式绑定 - 对象 </h4> <p style = "width: 100px;height: 100px;background: green;"></p> <p :style = "{width: '100px',height: '100px',background: 'blue'}"></p> <p :style = "{width: w,height: h,background: backg}"></p>
总结
<!-- 总结： 项目中使用 -->
<p :class = "{[size]: true,[bg]: true}"></p>
<p :class = "[ size,bg ]"></p>
<!-- 引深： 灵活使用 -->
<h4> 引深 </h4>
<p :class = "{ [size]: flag,[bg]: flag}" ></p>
<p :class = "[ size, flag?bg:color ]"></p>
<p :class = "[ size, flag && bg || color ]"></p>
<h4> 更神奇的 </h4>
<p class = "text" :class = [size,bg]></p>
<h4> v-bind 可以绑定任意一个dom身上的属性 </h4>
<img :src="imgUrl" alt="">
对应的Vue实例
new Vue({
el: '#app', // 挂载
data: {
imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
msg: 'hello 各位今天周四了',
size: 'size',
bg: 'bg',
flag: true,
color: 'color',
w: '100px',
h: '100px',
backg: 'blue',
styleObj: {
width: '100px',
height: '100px'
},
styleColor: {
background: 'yellow'
}
}
})
3. v-model 【 双向数据绑定 】
- 单向 【 数据改变， 视图改变 】
- 双向 【数据改变， 视图改变，反之，视图改变，数据改变 】
- v-model默认绑定表单元素的value值
- form 表单标签
- input textarea … 表单元素
- html代码
<h3> v-model 双向数据绑定 </h3>
<input type="text" v-model = "msg">
- 对应的js
new Vue({
el: '#app', // 挂载
data: {
msg: '老彭很帅'
}
})
思考： 如何使用单向数据绑定实现双向数据绑定效果
- 知识点
input身上有哪些事件？
focus
blur
change
input
事件有几种绑定形式
1. js中绑定
var input = document.querySelector('input')
input.oninput = function () {}
DOM2级事件 事件监听
1. html结构中绑定
function load () {}
vue中事件绑定形式选择2
事件包含哪几个部分？
事件源
事件类型
事件处理程序
vue中事件格式：
举例： <div v-on:eventType = '事件处理程序'></div>
- html代码
<input type="text" :value = "msg" v-on:input = "change">
<!-- 简写 -->
<input type="text" :value = "msg" @input = "change">
- js代码
new Vue({
el: '#app', // 挂载
data: {
msg: '老彭很帅'
},
methods: {
//事件处理程序
change: function ( e ) {
this.msg = e.target.value
}
}
})
4. v-on 事件
vue中写事件，记住先写逻辑在绑定
- 基础事件绑定
// html代码
<button @click = "fn"> 点击 </button>
// js代码
new Vue({
el: '#app',
methods: {
fn () {
alert('老彭最帅')
}
}
})
- 事件传参
- 业务： 点击button按钮，弹出input的value
- 经验： 看到表单,想要得到它的value值，直接v-model
// html <input type="text" v-model = "val"> <button @click = "fn( val )"> 点击 </button> //js new Vue({ el: '#app', data: { val: '' }, methods: { fn ( val ) { alert( val ) } } }) - 事件对象
- 业务： 如果我们的fn函数接收2个参数，其中一个参数是事件对象，这个时候我们看一下效果
- 问题： 事件对象e丢失了
- 解决： 在调用方法时，传入一个实际参数： $event
// html <input type="text" v-model = "val"> <button @click = "fn( $event,val )"> 点击 </button> // js new Vue({ el: '#app', data: { val: '' }, methods: { fn ( e,val ) { console.log( val ) console.log( e ) } } }) - 为什么要使用？【 案例： 事件冒泡 】
- 业务： 给每一个盒子都加一个事件
// html <div class="large" @click = "largeHandler"> <div class="middle" @click = "middleHandler"> <div class="small" @click = "smallHandler"></div> </div> </div> // js new Vue({ el: '#app', methods: { //方法： 里面存放的是： 事件处理程序 largeHandler ( e ) { e.stopPropagation() alert( 'large' ) }, middleHandler ( e ) { alert( 'middle' ) e.stopPropagation() }, smallHandler ( e ) { alert( 'small' ) e.stopPropagation() } } })-
事件修饰符
- 常用 .stop(阻止事件冒泡) .capture(阻止事件捕获) .self(只执行自己的事件，同.stop) .prevent(阻止默认行为)
// html <div class="large" @click.stop = "largeHandler"> <div class="middle" @click.stop = "middleHandler"> <div class="small" @click.stop = "smallHandler"></div> </div> </div> <hr> <div class="large" @click.self = "largeHandler"> <div class="middle" @click.self = "middleHandler"> <div class="small" @click.self = "smallHandler"></div> </div> </div> // js new Vue({ el: '#app', methods: { //方法： 里面存放的是： 事件处理程序 largeHandler ( e ) { alert( 'large' ) }, middleHandler ( e ) { alert( 'middle' ) }, smallHandler ( e ) { alert( 'small' ) } } }) -
按键修饰符
-
业务： 按回车弹出input框的value
-
键盘事件： keyup keydown keypress
-
常用 .enter .tab .delete(删除以及退格) .esc .space
-
鼠标 .left .middle .right
-
事件对象实现
// html <input type="text" @keyup = "fn( val,$event )" v-model = 'val'> // js fn ( val,e ) { if ( e.keyCode === 13 ) { console.log( val ) } }- 按键修饰符实现
// html <input type="text" @keyup.13 = "fn( val )" v-model = 'val'> <hr> <input type="text" @keyup.enter = "fn( val )" v-model = 'val'> <hr> <input type="text" @keyup.p = "fn( val )" v-model = 'val'> // js new Vue({ el: '#app', data: { val: '' }, methods: { fn ( val ) { console.log( val ) } } }) -
- 思考： MVVM架构思想，是将逻辑放在VM中来做，V是用来展示视图的
二、模板语法 mustache 【 双大括号 】
-
支持度
-
支持数据类型
-
所有的类型都是支持的，但是console.log alert这些输出语法是不支持的
-
支持return
-
数据类型有哪些？【 2种说法 】
- 第一种类型说法
- 初始数据类型： number string null undefined boolean
- 引用数据类型: object
- 第二种说法
- 基本数据类型L: number string boolean
- 复杂数据类型: object
- 特殊数据类型: null undefined
- 第一种类型说法
-
html代码
<p> number: {{ num }} </p>
<p> string: {{ str }} </p>
<p> boolean: {{ bool && 1 || 2 }}</p>
<p> null: {{ nul && 3 || 4 }}</p>
<p> undefined: {{ und && 5 || 6 }} </p>
<p> array: {{ arr[1] }}</p>
<p> object: {{ obj.name }}</p>
<!-- <p> function: {{ ( function() { console.log('fn')} )() }}</p> -->
- js代码
new Vue({
el: '#app',
data: {
num: 10,
str: 'Gabriel Yan',
bool: true,
nul: null,
und: undefined,
arr: [1,2,3],
obj: {
name: '老彭'
}
}
})
三、method 方法
- 用来存储事件处理程序
四、computed 计算属性
-
为什么要有这个选项？
- 案例： 【 字符串反向 】
- 业务：将msg这个字符串 反向 输出
- 思路： 反向 reverse 数组
- 思考： V应该是用于数据展示，但是我们这么处理，发现V做了一部分逻辑判断，又违背了MVVM
- 解决： 计算属性
- html代码
// 普通实现 {{ msg.split('').reverse().join('') }} // 计算属性实现 逻辑和数据分离 <p> {{ newMsg }} </p>- js代码
new Vue({ el: '#app', data: { msg: 'I Love eat 葡萄 ' }, computed: { //计算属性中存放的都是方法 newMsg () { return this.msg.split('').reverse().join('') } } }) -
计算属性是一个 选项， 选项值是一个对象，对象中存放的是方法
- 方法必须要有返回值
-
计算属性的使用
- 直接将方法名当做全局变量一样直接使用
<p> {{ newMsg }} </p>
- 直接将方法名当做全局变量一样直接使用
-
总结： 什么时候使用计算属性？
- 满足两个条件即可
- 必须有逻辑处理，还有返回值
- 我们使用的结果，要当做全局变量一样使用
- 满足两个条件即可
-
计算属性一旦确定就不可更改了
-
案例联系计算属性
- 用户名书写
- 通过上面的案例我们知道了，计算属性还可以使用getter和setter
computed: { fullName: { get () { //getter return this.firstName + this.lastName }, set ( val ) { //val就是当前绑定元素的value值 // val 彭少华 this.firstName = val.slice( 0,1 ) this.lastName = val.slice( 1 ) } } }- 或者
new Vue({ el: '#app', data: { firstName: '', lastName: '' }, computed: { fullName () { return this.firstName + this.lastName } } })
五、watch 侦听属性
计算属性优于侦听器
- 以案例来学习watch - > 用户名写入
- watch是一个选项， 选项值是一个对象
- 对象中可以存放的类型有哪些
- { [key: string]: string | Function | Object | Array }
- 常用的是方法和对象
- 总结：
由一个数据改变，引起的新的数据请求
- js代码如下
new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: { // 侦听 谁？ 谁 -> 指的是data中的数据
// watch中可以存放方法
firstName ( val ) {
// console.log('firstname改变了')
this.fullName = val + this.lastName
},
lastName ( val ) {
this.fullName = this.firstName + val
},
// fullName ( val ) {
// this.firstName = val.slice( 0,1 )
// this.lastName = val.slice( 1 )
// }
fullName: {
deep: true, //深度监听
handler ( val ) { // 处理程序
this.firstName = val.slice( 0,1 )
this.lastName = val.slice( 1 )
}
}
}
})
this.fullName = val + this.lastName
},
lastName ( val ) {
this.fullName = this.firstName + val
},
// fullName ( val ) {
// this.firstName = val.slice( 0,1 )
// this.lastName = val.slice( 1 )
// }
fullName: {
deep: true, //深度监听
handler ( val ) { // 处理程序
this.firstName = val.slice( 0,1 )
this.lastName = val.slice( 1 )
}
}
}
})
扫一扫
4104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
