vue简介
MVVM是前端视图层的概念,主要关注于视图层分离
MVVM把前端的视图层,分为了 三部分 Model(数据), View(视图) , VM ViewModel(驱动器,调度者)
三大主流框架:Angular.js、React.js 、Vue.js
Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
Vue的特点:
1.高效的数据绑定
2.灵活的组件应用
注意: 函数必须在 Vue实例中的 methods 属性下添加,在 Vue.js 中,methods 被命名为方法,是调用对象上下文中的函数,还可以操作对象中包含的数据。
用法
(1)引入vue.js文件
(2)在script标签中定义实例
(3)在模板中写html代码
<script src="lib/vue-2.6.10.js"></script>
//app相当于view视图模板,也相当于组件(之后介绍)
<div id="app">
<h1>{{msg}}</h1>
<button @click="msg='world hello'">change</button>
<button @click="count('html')">添加</button>
</div>
<script>
//new Vue 实例相当于vm驱动器
var vm=new Vue({
el:"#app", //定义vue的实例操作的范围
data:{ //数据,相当于model
msg:"hello world"
},
methods:{
count(x){
this.msg=this.msg+x; //this指向vue实例
}
}
})
</script>
效果:页面中输出 hello world,点击添加按钮内容变为 hello world html,
每点击一次后边多一个 html ,点击change按钮内容变为 world hello
一个页面可以有多个实例,此实例的data只在这个实例的范围内有用。