计算属性
<template>
<div id="app">
<h1>计算属性</h1>
<!-- <div>{{ message.split('').reverse().join('') }}</div>
<div>{{ message }}</div> -->
<h1>方法的调用</h1>
<div>{{ reversedMessageFun() }}</div>
<div>{{ reversedMessageFun() }}</div>
<div>{{ reversedMessageFun() }}</div>
<div>{{ reversedMessageFun() }}</div>
<input type="text" v-model="message">
<h3>计算属性的缓存</h3>
<div>{{ num }}</div>
<input type="text" v-model="num">
<div>{{ salePrice }}</div>
</div>
</template>
<script>
// 一个.vue文件就是一个组件,组件的选项
// 你可以在一个组件的选项中定义本地的过滤器:局部过滤器
// vue2选项式API--代码应该写在什么地方给你规定好了
export default {
name:'App',
data(){
return{
message:'hello',
num:123,
// reversedMessage:""
}
},
methods:{
reversedMessageFun: function(){
return this.message.split('').reverse().join('')
}
},
// 计算属性
computed:{
// 简化模版中重复使用的复杂表达式
// 计算属性的 getter
// 计算属性中的方法名当成data中字段去使用
// 计算属性中的方法名不能和data中已有的字段进行重复
reversedMessage(){
return this.massage.split('').reverse().join('')
},
salePrice(){
return this.num*3
}
}
}
</script>
<style>
</style>
过滤器
过滤器就是一个函数, 传入值返回处理后的值
过滤器可以用在两个地方:双花括号插值和v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示 |
过滤器不改变真正的data
,而只是改变渲染的结果,并返回过滤后的版本
全局注册时是filter,没有s的。而局部过滤器是filters,是有s的
全局定义字母都大写的过滤器
局部定义字符串翻转的过滤器
<template>
<div>
<p>原来的样子: {{ msg }}</p>
<!-- 2. 过滤器使用
语法: {{ 值 | 过滤器名字 }}
-->
<p>使用翻转过滤器: {{ msg | reverse }}</p>
<p :title="msg | toUp">鼠标长停</p>
</div>
</template>
<script>
export default {
data(){
return {
msg: 'HelloVue'
}
},
// 方式2: 局部 - 过滤器
// 只能在当前vue文件内使用
/*
语法:
filters: {
过滤器名字 (val) {
return 处理后的值
}
}
*/
filters: {
toUp (val) {
return val.toUpperCase()
}
}
}
</script>
<style>
</style>
过滤器和就地更新
<template>
<div id="app">
<h1>就地更新</h1>
<div v-for="(item,index) in arr" :key="index">
{{ item }}
</div>
<button @click="changeArr(1)">修改arr</button>
<h1>高效更新</h1>
<div v-for="item in arrObj" :key="item.id">
{{ item.name }}
<div v-for="item in item.children" :key="item.id">
{{ item.name }}
</div>
</div>
<button @click="changeArr(2)">修改arr</button>
<h3>直接修改数组</h3>
<button @click="changeArr(3)">直接修改数组</button>
<h1>过滤器的使用</h1>
<!-- | 管道需要放到js遇到的后面 -->
<!-- 可被用于一些常见的文本格式化 -->
<!-- 数据格式化 -->
<div>{{ message | capitalize('$') }}</div>
<!-- <div>{{ message | stan('$') }}</div> -->
<h1>时间格式化</h1>
<div>{{ timeDate | formTime }}</div>
</div>
</template>
<script>
import moment from "moment";
// 一个.vue文件就是一个组件,组件的选项
// 你可以在一个组件的选项中定义本地的过滤器:局部过滤器
// vue2选项式API--代码应该写在什么地方给你规定好了
export default {
name:'App',
data(){
return {
message:'hello',
arr:['小明','小蓝','小红'],
arrObj:[
{
id:256,
name:'小米',
children:[
{
id:258,
name:'红米'
}
]
},
{
id:123,
name:'小明',
children:[
{
id:234,
name:'moom'
}
]
}
],
timeDate:new Date()
}
},
methods:{
changeArr(type){
let that = this;
if(type==1){
// 就地更新 (如果没有使用key或者key是下标时会触发就地更新(就地修改))
that.arr.splice(1,0,'添加的值')
}else if(type==2){
// 高效更新(如果key是id会触发高效更新)
that.arrObj.splice(1,0,{id:999,name:'小小'})
}else{
// vm.$set( target(要修改的目标), propertyName/index(要修改的属性or下标), value(设置的新值) )
// that.arr[0]='新值' 错误的写法
console.log('this',this);
that.$set(that.arr,0,'新值')
}
}
},
filters:{
capitalize(value,money) {
// if(!value) return '' 的意思是,如果 value 的布尔值为 false
//(即 value 为 undefined、null、0、空字符串 ""、false 等),
// 则执行 return '' 语句,返回一个空字符串。
if(!value) return ''
// 转换成字符串
let value1 = value.toString()
console.log('value',value);
console.log('value.slice(1)',value.slice(1));
console.log('value1',value1.charAt(0).toUpperCase());
return value1.charAt(0).toUpperCase() + value1.slice(1)+money
},
formTime(value){
return moment(value).format('YYY年MM月DD日HH:mm:ss')
}
}
}
</script>
侦听器的基本使用
<template>
<div id="app">
<h1>侦听器--简单数据类型</h1>
<input type="text" v-model="studentName">
<div>{{ classMsg }}</div>
<div>{{ schoolMsg }}</div>
<h1>侦听复杂数据类型</h1>
<input type="text" v-model="obj.name">
</div>
</template>
<script>
// 一个.vue文件就是一个组件,组件的选项
// 你可以在一个组件的选项中定义本地的过滤器:局部过滤器
// vue2选项式API--代码应该写在什么地方给你规定好了
export default {
name: 'App',
data(){
return {
studentName:"小明",
classMsg:"999",
schoolMsg:"郑州100",
obj:{
name:"san"
}
}
},
methods:{
},
watch:{
// 侦听器一般是一个值的变化影响多个值的变化
// 一对多的关系
studentName(newValue,oldValue){
console.log("newValue",newValue)
console.log("oldValue",oldValue)
let that = this;
that.classMsg = `火花256${newValue}`
that.schoolMsg = `五道口火花256${newValue}`
},
// 侦听复杂数据类型其中一种写法
// "obj.name"(newValue,oldValue){
// console.log("newValue",newValue)
// console.log("oldValue",oldValue)
// }
// 使用使用侦听来侦听对象
deepCopy:{
handler(newValue,oldValue){
console.log("newValue",newValue)
console.log("oldValue",oldValue)
},
// 深度侦听
deep:true,
// 立即执行
immediate:true
}
},
// 计算属性
computed:{
//
// 简化模版中重复使用的复杂表达式
// 计算属性的 getter
// 计算属性中的方法名当成data中字段去使用
// 计算属性中的方法名不能和data中已有的字段进行重复
reversedMessage(){
return this.message.split('').reverse().join('')
},
deepCopy(){
return JSON.parse(JSON.stringify(this.obj))
},
salePrice(){
// 计算公式 公式里面是不是会有多个影响的因素
// 多个值的变化影响一个值的变化
// 多对一的关系
//
return this.num*2+99
}
}
}
</script>
<style>
</style>
computed(计算属性)和watch(侦听器)有什么区别
computed:
computed 计算属性通过属性计算而得来的属性,使模板更加简洁,易于维护,
computed 中的函数必须用return返回最终的结果,
computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
computed 它不能计算在data中已经定义过的变量。
watch:
watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;