1、Vue中的MVVM模式:
View层:视图层,前端开发中的DOM层,给用户展示各种信息
Model层:数据层,前端开发中的JS对象,该数据可能是我们写死的数据,但更多的是从服务器请求来的JSON数据
ViewModel层:视图模型层,new出来的Vue对象,View和Model沟通的桥梁;
一方面它实现了DataBinding,也就是数据绑定,将Model的改变实时的反应到View中;
一方面它实现了DOM Listeners,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)可以监听到,并在需要的情况下改变对应的Data
2、创建Vue实例时,传入了一个对象options,该options中包含的常用选项:
el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM
data:
类型:Object | Function(组件中data必须是一个函数)
作用:Vue实例对应的数据对象
methods:
类型:{[key:string]:Function}
作用:定义属于Vue的一些方法,可以在其它地方调用,也可以在指令中使用
3、mustache语法:
{{...}},其中不仅仅可以直接写变量,还可以写简单的表达式
<div id="app">
<!--字符串拼接-->
<h1>{{message + msg}}</h1>
<!--数字的翻倍-->
<h1>{{age*2}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'HelloWorld',
msg:'vue',
age:9
}
});
</script>
4、Vue生命周期: