一、 Vue.js简介
1. Vue.js是什么
Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e
版本：v1.0 v2.0
- 是一个构建用户界面的框架
- 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
- 数据驱动+组件化的前端开发（核心思想）
- 通过简单的API实现响应式的数据绑定和组合的视图组件
- 更容易上手、小巧
参考：官网
2.vue和angular的区别
2.1 angular
- 上手较难
- 指令以ng-xxx开头
- 所有属性和方法都存储在$scope中
- 由google维护
2.2 vue
- 简单、易学、更轻量
- 指令以v-xxx开头
- HTML代码+JSON数据，再创建一个vue实例
-
由个人维护：尤雨溪，华人，目前就职于阿里巴巴，2014.2开源了vue.js库
共同点：
都不兼容低版本IE
对比：GitHub上vue的stars数量大约是angular的两倍
二、起步
1. 下载核心库vue.js
bower info vue
npm init --yes
cnpm install vue --save
版本 v2.3.4 目前最新版本(2017.6.29)
vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快
2. Hello World（对比angular）
2.1 angular实现
js:
let app=angular.module('myApp',[]);
app.controller('MyController',['$scope',function($scope){
$scope.msg='Hello World';
}]);
html:
<html ng-app="myApp">
<div ng-controller="MyController">
{{msg}}
</div>
</html>
2.2 vue实现
js:
new Vue({
el:'#itany', //指定关联的选择器
data:{ //存储数据
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div>
3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息