基本结构
<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简洁