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

一、v-bind 缩写

<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a><!-- 完整语法 --><button v-bind:disabled="someDynamicCondition">Button</button><!-- 缩写 --><button :disabled="someDynamicCondition">Button</button>

二、v-on 缩写

<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>

三、过滤器

{{ message | capitalize }}

四、条件渲染

v-if<h1 v-if="ok">Yes</h1><h1 v-else>No</h1><div v-if="Math.random() > 0.5"> Sorry</div><div v-else> Not sorry</div>template-v-if<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>v-show<h1 v-show="ok">Hello!</h1>

五、列表渲染 for

v-for<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>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 }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [  { message: 'Foo' },  { message: 'Bar' } ] }});

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

example1.items.push({ message: 'Baz' });example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/);}); template-v-for<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template></ul> 

对象 v-for

<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li></ul>new Vue({ el: '#repeat-object', data: { object: {  FirstName: 'John',  LastName: 'Doe',  Age: 30 } }}); 

值域 v-for

<div> <span v-for="n in 10">{{ n }} </span></div>

六、方法与事件处理器
方法处理器

<div id="example"> <button v-on:click="greet">Greet</button></div>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!'