VUE 四个常用选项
原创
一、 VUE 四个常用选项
- 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
}
}
复制代码- 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('')
}
}
})
复制代码- 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 onclick="adds()">内部访问构造器外部的方法</button>
</p>
</div>
<button onclick="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 代码写在 von 指令中是不可行的。因此 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 可以获得一个 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)
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。