1、Vue.js介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
所谓渐进式（Progressive）,就是你可以一步一步、有阶段性的来使用Vue.js,不必一开始就使用所有的东西。
1.1 Vue特点
- 轻量级的框架(压缩后大小仅有17KB)
- 双向数据绑定 (MVVM模式)
- 指令
- 插件化
- 虚拟DOM(Virtual DOM)
1.2 MVVM模式简介
MVVM模式是由经典软件架构MVC衍生来的。 MVVM框架主要包含3个部分:Model、View和 Viewmodel。
Model:指的是数据部分，对应到前端相当于javascript对象
View:指的是视图部分，对应前端相当于dom
Viewmodel:就是连接视图与数据的中间件通讯 数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewMOdel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
1.3 Vue.js有什么不同
传统前端开发模式，是针对DOM进行操作,以jQuery为例，给指定DOM中插入一个元素，并给他绑定一个点击事件：
if(showBtn){
var btn = $('<button>Click me</button>');
btn.on('click',function(){
console.log('Clicked!');
});
$('#app').append(btn);
}
这段代码不难理解，操作内容也不复杂，不过这样让我们的视图代码和业务逻辑紧耦合在一起，随着功能不断增加，直接操作DOM会使得代码越来越难以维护。
而Vue.js通过MVVM的模式拆分视图与数据两部分，并将其分离。因此，你只需要关心你的数据即可，DOM的事情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>
2、如何使用Vue.js
Vue Devtools
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
2.1 通过 script 加载 CDN文件
<!-- 自动是被最新稳定版本的vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js></script>
<!-- 指定某个具体版本的vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
2.2 直接用 <script> 引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
2.3 使用 NPM 安装
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify模块打包器配合使用。同时Vue也提供配套工具来开发单文件组件。
# 最新稳定版，须确保已经安装node
$ npm install vue
2.4 命令行工具 (CLI)
Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档
下面简单介绍使用Vue CLI 快速创建项目
- 全局安装 vue-cli
npm install --global vue-cli- 选择文件夹创建项目
vue init webpack my-project（my-project：项目名称）
安装步骤 出现一下文字说明已经创建成功
成功显示
- 进入创建的项目下
cd my-project- 安装项目依赖
npm install- 安装其他插件
npm install vuex element-ui axios mockjs --save(假设需要安装 vuex element-ui axios mockjs等，可自定义)
此时的目录结构
目录结构
- 运行项目
npm run dev
此时浏览器输入http://localhost:8080 显示以下页面说明项目创建成功。my-project 也可以修改config文件下的index.js 文件,修改后每次运行会自动打开浏览器。
index.js
参考资料-Vue.js
网友评论