Vue简介和用法

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只在这个实例的范围内有用。