MVVM模式
模型—视图----视图模型
vue的作用:通过MVVM拆分为视图、数据两部分,并分离
if(showBtn){
var btn = $('<button>Click me</button>');
btn.on('click',function(){
console.log('click');
});
$('#app').append(btn);
如果使用vue的方式来写的话,可以改成:
<body>
<div id="app">
<button v-if="showBtn" v-on:click="handleCLick">click me</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
showBtn:true
},
methods:{
handleClick:function(){
console.log('clicked');
}
}
})
</script>
下面是一个简单的运用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[
{name:'xxx'},
{name:'yyy'},
{name:'zzz'}
],
}
})
</script>
</body>
</html>
基础知识
var app=new Vue{ })
app变量代表这个实例对象
这个实例创建过程中,有一个很重要的选项是el
el用于指定一个页面中已经存在的DOM元素来挂在Vue实例,他可以是HTMLElement或者css选择器
挂载成功后就可以通过app.$el来访问该元素
里面的data是一个数据绑定
生命周期
created:实例创建后完成调用,此阶段完成了数据的观测
mounted :el挂载到实例善后调用,一般我们的第一个业务逻辑会在这里开始
beforeDestroy:实例销毁之前调用。主要解绑一些使用addEventListener监听的事件
这些和el,adata一样都是写进vue实例中的
var app = new Vue({
el:'#app',
data:{
a:2
},
created:function(){
console.log(this.a);
},
mounted:function(){
console.log(this.$el);
}
})