vuejs(2.0)基础笔记

基本结构

<div id="app">

{{ message }}

</div>

var app = new Vue({

el: '#wrap',

data: {//数据

msg: 'Hello 初心わするべからず!',

arr:['apple','banana','orange','pear'],

json:{a:'apple',b:'banana',c:'orange'}

},

methods:{//方法

show:function(){

alert(1);

}

},

watch:{//设置其监听方法

}

})

指令: 扩展html标签功能,属性

数据渲染:

v-text  v-html

循环:

v-for="name in arr"

{{$index}}

v-for="name in json"

{{$index}} {{$key}}

v-for="(v,k) in json"

事件:

v-on:click="函数"  or  v-bind:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

显示隐藏:

v-if=" " or  v-show=“true/false”

修饰符:

<a @click.stop="doSomething"></a>//阻止单击事件冒泡

<input @keyup.enter="submit">//只在按下回车键的时候触发事件

传统的MVC:

A:大量调用相同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以维护

B:大量DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验

C:无论如何,只要Model发生变化,我们都要将变化的数据更新到View,若数据复杂多变将很难维护

MVVM:以上三个都不是问题

适合移动端项目 小巧 (不兼容IE)  API简洁