初步认识vue.js

vue.js是一个轻量的mvvm框架，他吸收了react的组件化管理概念，实现数据和展现的分离。吸收angula的界面展现操作方法。

什么是组件化呢？

    就是项目的每一个页面都相当于一个组件。后缀名是*.vue,里面有三个组成部分，分别是template、script、style。页面上的数据 展现和js里面的数据值进行双向绑定。template里面的数据改变，js里面也跟着变动。js里面的变动，也会体现在调用js里面数据的template里面。

如何界面展现？

    类似于模板引擎的展现标签。以往我们是使用后端返回页面，前端就可以调用后端传过来的属性值，利用模板引擎的特殊标签来进行界面的渲染。现在我们不用后端返回界面，就可以利用标签进行界面的渲染。

搭建环境

1首先安装nodejs环境

http://cdn.npm.taobao.org/dist/node/可以到这个里面下载最新的node。我这里下载的是node-v10.3.0-x64.msi，然后点击进行安装，注意记住自己的安装路径。

2 安装npm

    然后在自己的安装路径的目录下新建两个文件夹，node-cache是npm缓存文件夹，一个是全局路径文件夹。以后我们安装的npm包文件都是在node-global里面。输入以下命令。

 

npm config set prefix "D:\Program Files\nodejs\node-global"

npm config set cache "D:\Program Files\nodejs\node-cache"

这个时候我们可以进行测试看node版本号，成功打印就代表安装成功。

3 安装cnpm

因为npm工具是国外的，下载会慢，我们可以安装国内的镜像

然后我们要配置环境变量

在系统变量的Path里面确保下面的变量是配置完整的

这样就可以使用cnpm命令了，在cmd里面测试一下

4 安装vue脚手架

   vue提供的命令行工具， 有了vue脚手架，我们可以在控制台使用vue命令，使用vue命令可以创建vue模板，例如webpack等。

在控制台打命令：cnpm install -g vue-cli进行安装

5 创建一个项目

方法一：命令行创建

创建alt+F12打开webstorm的命令行窗口，输入：

vue init webpack my-project

运行项目：npm run dev

方法二：安装webstorm创建vue.js项目。webstorm要安装nodejs插件和vue插件，

vue是怎么生成界面的呢

*.vue是通过webpack打包工具就可以将一个vue文件打包成*.html、*.js、*.css。每个js就相当于一个new了一个vue对象，即new Vue({.......})。页面的数据层全部都在vue对象里面，展现层就是在html里面。

实例化vue对象

new Vue({
    data: {
    a:1
    b:[]
    },
    method: {
    },
    watch{
    }
})

vue对象需要实例化，实例化就会有许多参数，data用于存储页面中涉及的变量这些，也就是页面所需的数据，就是所谓的model层。method用于存放页面中调用到的方法，watch用于监听，比方说，如果监听了data里面的a，a一旦有增删查改，watch里面的方法就会被调用。

html指令

类似于thymleaf标签，用于html和vue的model层进行交互。