Vue中计算属性、侦听、过滤、自定义指令、ref的操作
程序员文章站
2022-12-24 17:03:52
1.计算属性 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。 2.使用侦听器 我们发现，与计算属性相比， ......
1.计算属性
<div id="app">
<input type="text" v-model="x">
<input type="text" v-model="y">
{{get}}
</div>
<script>
var app=new vue({
el:"#app",
data:{
x:"",
y:""
},
computed:{
get:function(){
return this.x+this.y;
}
}
});
</script>
<body>
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
</body>
<script>
var app=new vue({
el:"#app",
data:{
msg:"",
},
watch: {
msg:function(newval,oldval){
if(newval=="admin"){
this.msg=oldval;
}else{
this.msg=newval;
}
}
},
});
</script>
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
3.过滤器的使用
局部过滤器：
<body>
<div id="app">
<input type="text" v-model="msg">
{{msg|myf|nu}}
</div>
</body>
<script>
var app=new vue({
el:"#app",
data: {
msg:"",
},
filters:{
myf:function(val){
return val.touppercase();
},
nu:function(val){
var reg=/\d/g;
return val.replace(reg,'*');
}
}
});
</script>
全局过滤器：
<body>
<div id="app2">
<input type="text" v-model="msg">
{{msg|myf|nu}}
</div>
</body>
<script>
vue.filter('myf',function(val){
return val.touppercase();
});
vue.filter('nu',function(val){
var reg=/\d/g;
return val.replace(reg,'*');
});
var app2=new vue({
el:"#app2",
data:{
msg:"",
}
});
</script>
<body>
<div id="app">
<p v-color>123131321</p>
</div>
</body>
<script>
//全局指令
// vue.directive("color",{
// inserted:function(el){
// el.style.background="red";
// }
// });
var app=new vue({
el:"#app",
directives:{
color:{
inserted:function(el){
el.style.background="green";
}
}
}
});
</script>
5.ref的使用
在学习 jq 时，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；
<body>
<div id="app">
<input type="button" value="按钮" @click="get">
<p ref="ps">211113131</p>
</div>
</body>
<script>
var app=new vue({
el:"#app",
methods: {
//用来获取具有ref属性的节点对象
get:function(){
alert(this.$refs.ps.innerhtml);
}
},
});
</script>
但是在项目开发中，尽可能不要使用ref，因为从一定程度上，ref 违背的mvvm设计原则；
上一篇： Group By Rollup