VUE 四个常用选项

最新推荐文章于 2024-08-30 10:30:56 发布

原创最新推荐文章于 2024-08-30 10:30:56 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

24 篇文章

订阅专栏

一、 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 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)
}