VUE
四个常用选项
一、
VUE
四个常用选项
1. filter
过滤器
过滤就是一个数据经过了这个过滤之后出来另一样东西，可以从中取得你想要的，或者给那个数据添
加点什么装饰，那么过滤器则是过滤的工具。例如，从
['abc','abd','ade']
数组中取得包含
‘ab’
的值，那
么可通过过滤器筛选出来
‘abc’
和
‘abd’
；把
‘Hello’
变成
‘Hello World’
，那么可用过滤器给值
‘Hello’
后面添
加上
‘ World’
；或者把时间节点改为时间戳等等都可以使用过滤器。
语法
1:
{{ message | filterA | filterB }}
message
是作为参数传给
filterA
函数，而
filterA
函数的返回值作为参数传给
filterB
函数，最终结
果显示是由
filterB
返回的。
{{2020|filterA|filterB}}
filters:{
filterA:function(value){
return value+"
年
"
},
filterB:function(value){
return value+"good luck!"
},
语法
2:
{{ message | filterA('arg1', arg2) }}
{{
num
|filter("10","22")}}
filters:{
filter:function(
value
,arg1,arg2){
return value+ "-" + arg1 + "-" + arg2;
},
}
语法
3
{{a,b,|filter}}
{{a,b,|filter}}
filters:{
filter:function(value1,value2){
return value1 + value2
}
},
2. computed
计算
[
属性
] **
从
内存
中取出值进行计算
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
//
计算属性的
getter
reversedMessage: function () {
// `this`
指向
vm
实例
return this.message.split('').reverse().join('')
}
}
})
3. methods[
方法
]***
methods
将被混入到
Vue
实例中。可以直接通过
app
实例访问这些方法，或者在指令表达式中使用。
方法中的
this
自动绑定为
Vue
实例。不应该使用箭头函数来定义
method
函数
(
例如
add: ()
=>this.a++)
。理由是箭头函数绑定了父级作用域的上下文，所以
this
将不会按照期望指向
Vue
实例，
this.a
将是
undefined
。
{{ a }}
<button v-on:click="add">
加
1</button>
let vm = new Vue({
//
挂载元素
el: '#app',
//
实例
vm
的数据
data: {
a: 0
},
methods: {
add() {
return this.a++;
}
}
});
内外交互访问
<body>
<h1>methods</h1>
<div id="app">
<p>a
：
{{a}}</p>
<p>
<button οnclick="adds()">
内部访问构造器外部的方法
</button>
</p>
</div>
<button οnclick="app.add()">
外部访问构造器内部的方法
</button>
<script>
function adds() {
app.a++;
}
var app = new Vue({
el: "#app",
data: {
a: 1
},
methods: {
add: function () {
this.a++;
}
}
})
</script>
</body>
关于事件的处理—事件监听：可以用
v-on
指令监听
DOM
事件，并在触发时运行一些
JavaScript
代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
事件处理方法：许多事件处理逻辑会更为复杂，所以直接把
JavaScript
代码写在
v
on
指令中是不可行的。因此
v-on
还可以接收一个需要调用的方法名称。
div id="example-2">
<!-- `greet`
是在下面定义的方法名
-->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
//
在
`methods`
对象中定义方法
methods: {
greet: function (event) {
// `this`
在方法里指向当前
Vue
实例
alert('Hello ' + this.name + '!')
// `event`
是原生
DOM
事件
if (event) {
alert(event.target.tagName)
}
}
}
})
内联处理器中的方法：
v-on
除了直接绑定到一个方法，也可以在内联
js
语句中调用方法：
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
★
有时也需要在内联语句处理器中访问原始的
DOM
事件，可以用特殊变量
$event[
事
件的实参，有了
$event
就不用在方法中写事件兼容了
]
把它传入方法：
通过
event
可以获得一个
MouseEvent
对象，从而得到鼠标点击时所在的位置，以及这个事件触
发的后关于这个事件的信息。
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
//
现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
◆
Method
与
computed
的区别
<DIV id="vue-app-one">
<h1>
{{this.title.split('').reverse().join('')}}
</h1>
<h2>
{{methodsmessage()}}
</h2>
<h3>
{{conputedmessage}}
</h3>
</DIV>
var one = new Vue({
el:"#vue-app-one",
data:{
title:"123a456a789a01b"
},
methods:{
methodsmessage:function(){
return this.title.split('a').reverse().join('');
}
},
computed:{
conputedmessage:function(){
return this.title.split('a').reverse().join('');
}
}
});
参数说明
:
1
、
splite('')
可以将字符串按某个字符或者其他分割。返回数组。
2
、
reverse()
该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
3
、
join('')
方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
指定分隔方法
join(' ');
结果呈现
:
第一个结果
split('')
和
join('')
什么都不加，则按字分割加入数组。
split('a')
按照
a
分割插
入数组并删除
a,join('x')
将数组之间插入
x
然后排列
.
4. watch
控制台观察
[
略
]
computed
属性与
watch
的区别
当需要数据在异步变化或者开销较大时，执行更新，使用
watch
会更好一些；而
computed
不能
进行异步操作；
computed
可以用缓存中拿数据，而
watch
是每次都要运行函数计算，不管变量的值是否发生变
化，而
computed
在值没有发生变化时，可以直接读取上次的值
computed
属性与
methods
的区别
在模板文件中，
computed
属性只需要写
{{reverseMessage}}
，而
methods
需要写成
{{reverseMessage()}}
，最明显的区别就是
methods
是方法，需要执行；
computed
属性只有在依赖的
data
放生变化时，才会重新执行，否则会使用缓存中的值，而
methods
是每次进入页面都要执行的，有些需要每次进入页面都执行的方法，需要使用
methods
，而
computed
属性比较节约。
总结
:
区别在于
:
1
．
调用方法不同
:computed
调用时不需要加
()
，而
methods
方法调用时需要加括号
(),
起名字
2
．
驻留内存的方式不同
Computed
具有缓存功能
,
相关的属性会一直驻留内存，可以多次进入页面调用而不需要重新
加载
Methods
需要每次进入
[
刷新
]
页面都需要重新加载
数据量大，需要缓存的时候用
computed
；每次确实需要重新加载，不需要缓存时
用
methods
。
3. watch
的依赖则是单个的，它每次只可以对一个变量
[mustache]
进行监控，一般用在控制台对
变量进行监控
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
