文章目录
- class和Style绑定
- v-bind绑定class
- v-bind绑定style
- 指令
- v-model指令
- v-clock指令
- v-once指令
- 自定义指令
- 功能
-
class和Style绑定
v-bind绑定class
- 绑定数据对象
<div id="app"><div :class="{bg:true,red:true}">盒子</div> <br /><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"><div :class="['bg','red']">我是div标签</div> <br /><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">
<div :style="{color:'pink',fontSize:'26px'}">小甜甜加油哦</div> <br />
<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: {styleObject: {color: null,fontSize: null}}
})
</script>
- 绑定数组类型
<div id="app">
<div :style="[{color:'red',fontSize:'26px'}]">我还是从前那个少年</div> <br />
<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: {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" :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 />
<input type="checkbox" v-model="isChecked">
<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><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>
自定义指令
<div id="app"><input type="text" v-myfocus>
</div>
<script src="./vue.js"></script>
<script>const vm = new Vue({el: '#app',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) => {return String(value).padStart(6, 0)})new Vue({el: '#app',data: {msg: 103}})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},filters: {myFilter(value) {return String(value).padStart(6, 0)}}
})
</script>
- 总结
- 全局 Vue.filter(‘过滤器名称’,(value)=>{// 管道符前js表达式只需结果 // 返回处理好的数据即可})
- 局部 new Vue({filters:{‘过滤器名称’:(value)=>{// 管道符前js表达式只需结果 // 返回处理好的数据即可}}})
操作dom
<div ref='myBom'></div>
<script>this.$refs.myDom
</script>
<div id="app"><div ref="box" class="box">盒子</div><span ref="span">标签</span><ul><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() {console.log(this.$refs)const box = this.$refs.boxconsole.log(box.offsetHeight)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 this.msg.split('').reverse().join('')}}})
</script>
- 总结
- computed是vue的配置对象
- computed指向的是一个对象，对象可以声明多个计算属性
- 属性名称(计算属性的名称)
- 属性的值(计算属性的处理函数)
- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值
- 在模板中使用计算属性，和使用data的方式是一样的
- 虽然在计算属性中声明的是函数，但是在模板中使用，当中数据来使用，不需要加括号
