Vue.js(2) 基础：指令与功能概览
正确的开始，微笑的进步，然后持续
文章目录
- class和Style绑定
- v-bind绑定class
- v-bind绑定style
- 指令
- v-model指令
- v-clock指令
- v-once指令
- 自定义指令
- 功能
- 过滤器
- 操作dom
- 计算属性
class和Style绑定
v-bind绑定class
- 绑定数据对象
<div id="app"> <!-- 写死: :class="{类名：是否加入这类名，类名1：是否加入这个类名1}" --> <div :class="{bg:true,red:true}">盒子</div> <br /> <!-- 动态: 需要把对象声明在data中，将来操作数据即可操作类名 --> <div :class="classObject">盒子</div> <br /> <button @click="classObject.bg=true">加bg类</button> <button @click="classObject.red=true">加red类</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { classObject: { bg: false, red: false } } }) </script> - 绑定数组数据
<div id="app"> <!-- 写死 :class="['类名'，'类名1']" --> <div :class="['bg','red']">我是div标签</div> <br /> <!-- 动态 需要把数组声明放到data中，操作数组即操作类名即可 --> <div :class="classArray">管你什么想法</div> <br /> <button @click="classArray.push('bg')">加bg类</button> <button @click="classArray.push('red')">加red类</button> </div> <script src="./vue.js"></script> <script> const cm = new Vue({ el: '#app', data: { classArray: [] } }) </script> - 总结
:class可以使用对象 {类名：布尔类型}:class可以使用数组 [‘类名’]class和:class可以共存，结果类合并在一起
v-bind绑定style
- 绑定对象类型
<div id="app"> <!-- 写死 :style="{css属性名称:css属性值}" 注意:属性名要用驼峰命名法 反之，则需要引号包起来 --> <div :style="{color:'pink',fontSize:'26px'}">小甜甜加油哦</div> <br /> <!-- 动态 需要把对象声明在data中 --> <div :style="styleObject">愿有一人陪你跌沛琉璃</div> <br /> <button @click="styleObject.color='green'">变色</button> <button @click="styleObject.fontSize='30px'">变大</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { // 注意：响应式数据(驱动视图更新的数据)，必须提前在data中显性的声明 styleObject: { color: null, fontSize: null } } }) </script> - 绑定数组类型
<div id="app"> <!-- 写死 :style="[{css属性名称:css属性值,...},{},{}...]" --> <div :style="[{color:'red',fontSize:'26px'}]">我还是从前那个少年</div> <br /> <!-- 动态 需要将数组声明在data中 --> <div :style="styleArray">没有一丝丝改变</div> <br /> <button @click="styleArray.push({color:'orange'})">变色</button> <button @click="styleArray.push({fontSize:'30px'})">变大</button> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { // 需要追加的选项 {color:'orange'},{fontSize:'30px'} styleArray: [] } }) </script> - 总结
:style可以使用对象 {css属性名：css属性值}:style可以使用数组 [css属性名：css属性值]- 如果同时存在
style和:style，vue操作的样式会覆盖默认样式
指令
v-model指令
- 作用：给表单元素添加双向数据绑定的功能
- data中的数据可以给表单元素赋值 M—>V
- 当表单元素值发生变化去修改data中的数据为当前表单元素的值 V—>M
- 语法糖原理
<div id="app"> <h4>{{msg}}</h4> <!-- <input type="text" v-model="msg"> --> <!-- 双向数据绑定 --> <!-- 1.M -- >V 数据复制给表单元素--> <!-- 2.V -- >M 表单元素值改变,修改数据为当前表单元素的值--> <!-- :value="msg" : 给表单元素赋值 --> <!-- $event : input事件的事件对象 --> <!-- $.event.target : input的dom对象(事件的触发源) --> <!-- $event.target.value : 输入框的内容 --> <!-- msg=$event.target.value : 把输入的内容重新修改msg的值 --> <input type="text" :value="msg" @input="msg=$event.target.value"> <!-- 总结: v-model="msg" 等价于 :value="msg" @input="msg=$event.target.value--> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg: 'Hi vue' } }) </script> - 绑定表单元素
<div id="app"> <!-- 文本域 --> <textarea v-model="textareaStr"></textarea> <br /> <!-- 复选框 --> <!-- 1.单个复选框 值是布尔类型 --> <input type="checkbox" v-model="isChecked"> <!-- 2.多个复选框 --> <input type="checkbox" value="ball" v-model="hobby"> 听音乐 <input type="checkbox" value="dama" v-model="hobby"> 敲代码 <input type="checkbox" value="book" v-model="hobby"> 面试题 <br /> <!-- 单选框 --> <input type="radio" value="男" v-model="gender"> 男 <input type="radio" value="女" v-model="gender"> 女 <br /> <!-- 下拉框 --> <select v-model="city"> <option value="">请选择</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { textareaStr: 'Hi vue', isChecked: true, hobby: [], gender: '女', city: '' } }) </script>
v-clock指令
- 作用：解决模板中的插值表达式的闪烁问题
<style>
/* 在模板未解析前生效 */
[v-cloak] {
display: none;
}
</style>
<body>
<!-- 解决闪烁问题:加v-cloak指令和样式-->
<div id="app" v-cloak>
<h4>{{msg}}</h4>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hi vue'
}
})
</script>
</body>
v-once指令
- 作用：让模板的某个容器只渲染一次,当他依赖的数据发生改变的时候,被指令修饰的容器不会再次渲染
<div id="app">
<!-- 这个容器只想渲染一次,不再受数据的影响 -->
<h4 v-once>{{msg}}</h4>
<h1>{{msg}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hi vue'
}
})
</script>
自定义指令
- 概念：内置指令无法实现功能，自己封装一个指令，即就是自定义指令
- 定义一个
v-focus指令，作用是让input自动获得焦点 - 全局自定义指令
Vue.directive('指令的名称','指令配置对象')<div id="app"> <input type="text" v-focus> </div> <script src="./vue.js"></script> <script> // 参数1：指令的名称，不包含v-，但是在使用指令的时候需要加上v- // 参数2：指令配置对象，固定属性 inserted 指定的一个函数， // 1. 该函数会在通过指令标记的元素，创建完毕之后执行 // 2. 该函数有一个默认参数 el 指的是使用这个指令的元素 Vue.directive('focus', { inserted(el) { // 获取焦点 el.focus() } }) </script> - 局布自定义指令
属性名称(指令的名称)：属性的值(指令的配置对象)
<div id="app">
<input type="text" v-myfocus>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
// vue配置对象提供了一个选项：directives 对应 对象
directives: {
myfocus: {
inserted(el) {
el.style.height = '50px'
el.focus()
}
}
}
})
</script>
功能
过滤器
- 全局过滤器 (全局定义，在每个视图中均可使用)
Vue.filter('过滤器名称','处理函数')<div id="app"> <!-- | 在这里叫做管道符 --> <h3>{{msg|myFilter}}</h3> </div> <div id="app2"> <h3>{{msg|myFilter}}</h3> </div> <script src="./vue.js"></script> <script> // 全局过滤器 Vue.filter('myFilter', (value) => { // value就是使用该过滤器前面的插值表达式的执行结果 // 需要对value进行转换,将换后的结果返回出去 // 必须有返回值 返回的值会输出到模板中 return String(value).padStart(6, 0) }) // 实例1 new Vue({ el: '#app', data: { msg: 103 } }) // 实例2 new Vue({ el: '#app2', data: { msg: 205 } }) </script> - 局部过滤器 (在vue实例中定义,仅能给vue实例管理的视图使用)
属性名(过滤名称)：属性值(过滤器处理函数)<div id="app"> <!-- | 在这里叫做管道符 --> <h3>{{msg|myFilter}}</h3> </div> <script> new Vue({ el: '#app', data: { msg: 103 }, // vue配置对象中,提供了选项filters，指向的是对象，可以定义多个过滤器 filters: { myFilter(value) { return String(value).padStart(6, 0) } } }) </script> - 总结
- 全局 Vue.filter(‘过滤器名称’,(value)=>{// 管道符前js表达式只需结果 // 返回处理好的数据即可})
- 局部 new Vue({filters:{‘过滤器名称’:(value)=>{// 管道符前js表达式只需结果 // 返回处理好的数据即可}}})
操作dom
- vue提供的属性：
ref
<div ref='myBom'></div>
<script>
// this就是vue的实力
// $refs是对象，收集了视图中所有使用了ref属性的dom元素
this.$refs.myDom
</script>
<div id="app">
<!-- 盒子 -->
<div ref="box" class="box">盒子</div>
<span ref="span">标签</span>
<!-- 特殊情况,在v-for的标签上加了ref -->
<ul>
<!-- v-for="序号 in 次数" 序号从1开始 -->
<li ref="li" v-for="i in 3" :key="i">{{i}}</li>
</ul>
<!-- 按钮 -->
<button @click="getHeight()">获取盒子高度</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
methods: {
getHeight() {
// 先拿到dom容器,在获取高度
console.log(this.$refs)
const box = this.$refs.box
console.log(box.offsetHeight)
// 如果给v-for的标签加了ref,会获取到所有的元素,就是数组 [dom,dom,dom]
console.log(this.$refs.li)
}
}
})
</script>
计算属性
- 目的：模板内处理数据，如果逻辑较为复杂，对应的js表达式也会复杂，模板内的业务逻辑繁重，可维护性差
- 作用：过计算属性，来处理这些复杂逻辑，降低模板的复杂度，提供模板的可维护性
- 适用场景
- 当模板内依赖data中的数据，但是需要经过较为复杂的逻辑处理，才能得到想要的数据，此时可以使用计算属性
- 复杂逻辑在声明计算属性时候进行，模板内使用数据即可
- 特点
- 计算属性有缓存，提高程序性能
- 当依赖的数据改变，计算属性也会改变
<div id="app">
<!-- 复杂逻辑 -->
<h3>{{msg.split('').reverse().join('')}}</h3>
<!-- 计算属性 -->
<h3>{{reverseMsg}}</h3>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hi vue'
},
// 声明计算属性
computed: {
// 属性名称(计算属性的名称)
// 属性的值(计算属性的处理函数)
reverseMsg() {
// 对依赖的数据进行处理,且进行return
return this.msg.split('').reverse().join('')
}
}
})
</script>
- 总结
- computed是vue的配置对象
- computed指向的是一个对象，对象可以声明多个计算属性
- 属性名称(计算属性的名称)
- 属性的值(计算属性的处理函数)
- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值
- 在模板中使用计算属性，和使用data的方式是一样的
- 虽然在计算属性中声明的是函数，但是在模板中使用，当中数据来使用，不需要加括号