JavaScript的MVVM库Vue.js入门学习笔记

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、v-bind 缩写

<a :href="url">

<button v-bind:disabled="someDynamicCondition">Button

<button :disabled="someDynamicCondition">Button

@H_403_10@

二、v-on 缩写

<a @click="doSomething">

@H_403_10@

三、过滤器

@H_403_10@

四、条件渲染

No

<div v-if="Math.random() > 0.5">
Sorry
@H_403_10@

Not sorry @H_403_10@ template-v-if v-show

@H_403_10@

五、列表渲染 for

var example1 = new Vue({ el: '#example-1',data: { items: [ { message: 'Foo' },{ message: 'Bar' } ] } });

<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}

var example2 = new Vue({ el: '#example-2',data: { parentMessage: 'Parent',items: [ { message: 'Foo' },{ message: 'Bar' } ] } }); @H_403_10@

数组变动检测 Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(),pop(),shift(),unshift(),splice(),sort(),reverse()

@H_403_10@

对象 v-for

new Vue({ el: '#repeat-object',data: { object: { FirstName: 'John',LastName: 'Doe',Age: 30 } } }); @H_403_10@

值域 v-for

@H_403_10@ @H_403_10@

六、方法与事件处理器

方法处理器

@H_403_10@

var vm = new Vue({
el: '#example',data: {
name: 'Vue.js'
},// 在 methods 对象中定义方法
methods: {
greet: function (event) {
// 方法内 this 指向 vm
alert('Hello ' + this.name + '!')
// event 是原生 DOM 事件
alert(event.target.tagName)
}
}
})

// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'

@H_403_10@

内联语句处理器