VUE 四个常用选项

最新推荐文章于 2025-02-26 20:59:25 发布

原创最新推荐文章于 2025-02-26 20:59:25 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

一、 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 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

div id="example-2">

<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]进行监控，一般用在控制台对

变量进行监控