一、
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: {// 计算属性的 getterreversedMessage: 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]
进行监控,一般用在控制台对
变量进行监控