Vue.js与Webpack学习心得

1.Vue.js介绍

1.Vue.js是什么

Vue 是一套用于构建用户界面的渐进式前端框架。和Angular.js、React.js 一起，并称为前端三大主流框架！Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

2.Vue.js怎么使用

1. 在html页面使用script引入vue.js的库即可使用。
2. 使用npm管理依赖，使用webpack打包工具对vue.js应用打包。
3. Vue-CLI脚手架,使用 vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

3.Vue.js有哪些功能

1. 声明式渲染
2. 条件与循环
3. 双向数据绑定
4. 处理用户输入
5. 组件化应用构建

2.Vue.js基础

1.MVVM模式

Vue.js是一个MVVM的框架
MVVM 拆分解释为：

1. Model: 负责数据存储
2. View: 负责页面展示
3. View Model: 负责业务逻辑处理（Ajax请求），对数据进行加工后交给视图展示

ViewModel可以把view视图和Model模型解耦合，ViewModel的要做的工作就是vue.js所承担的

2.Vue使用步骤

1. 编写HTML,引入vue.min.js(vue.js类库)
2. 编写视图部分的代码(用户界面,只负责展示)
3. 编写VM(ViewModel)及其Model
4. 刷新页面运行程序,vue.js(VM)部分实现将Model中的数据在View中展示
   .Vue文件结构:

<template>
/*view部分*/
</template>
<script>
/*model及vm部分。*/
</script>
<style>
/*页面样式，不是必须*/
</style>

3.Vue常用指令

1. v-model

1、在表单控件或者组件上创建双向绑定 
2、v-model仅能在如下元素中使用：
	input
 	select
	textarea
 	components（Vue组件）

实现数据双向绑定:
	a.由模型数据绑定到Dom对象,模型数据的值不变,Dom的值自动改变
	b.由Dom对象绑定到模型数据,Dom对象的值不变,模型数据就改变

2. v-text
   可以将一个变量的值渲染到指定的元素中,它可以解决差值表达式的闪烁的问题
3. v-on
   监听用户事件,绑定一个按钮的单击事件
4. v-bind
   v-bind可以将数据对象绑定到Dom的任意属性中
   v-bind可以给Dom对象绑定一个或多个特性,例如动态绑定style和class
5. v-if
   进行判断
6. v-for
   可以循环遍历数组

4.Vue生命周期

生命周期:vue实例对象从创建到销毁的过程。分为八个阶段:创建前/后，载入前/后，更新前/后，销毁前/后

beforeCreate：实例刚在内存中被创建出来
created：实例已经在内存中初始化完成
beforeMount：完成模板编译，没有挂载到页面中。
mounted：已经将编译好的模板挂载到了页面中指定的容器中。
beforeUpdate：页面状态更新之前执行，
updated：页面更新完毕之后调用
beforeDestroy：Vue实例销毁前调用
destroyed：Vue实例销毁后调用

    beforeCreate(){
        console.log('创建实例');
    },
    created(){
        console.log('创建完成');
    },
    beforeMount(){
        console.log('模板编译之前 ');
    },
    mounted(){
        console.log('实力挂载完成');
    },
    beforeUpdate(){
        console.log('更新前')
    },
    updated(){
        console.log('更新后')
    },
    beforeDestroy(){
        console.log('实例销毁前')
    },
    destroyed(){
        console.log('实力销毁后')
    }

3.webpack

1. webpack介绍

Webpack 是一个模块打包工具。webpack将项目中用到的一切静态资源都视为模块，模块之间可以互相依赖，webpack对它们进行统一的管理及打包发布 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

以webpack.config.js为主要部分进行划分:

entry: 入口，定义整个编译过程的起点
output: 输出，定义整个编译过程的终点
module: 定义模块module的处理方式
plugins：插件，对编译完成后的内容进行二度加工
resolve.alias 定义模块的别名

2.安装webpack

1.node环境安装

在安装 Webpack 前，本地需要安装nodejs运行环境
下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

安装测试:
1.home+r,输入cmd打开命令行窗口,进入安装路径,输入node -v.
2.安装Git,右键打开Git Bash Here命令行窗口,输入node -v

2.安装npm

node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

3.基于 Node.js 安装cnpm（淘宝镜像）

在命令行上输入以下命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

4.全局安装webpack

在命令行上输入以下命令：npm install -g webpack，测试是否安装成功输入 webpack -v，如果显示版本号则安装成功。

5.设置环境变量

修改系统变量PATH
path前面添加:"%NODE_HOME%"
新增系统变量NODE_HOME
在系统变量中新建,变量名:“NODE_HOME”,变量值:“E:\soft\node.js\npm_modules”(填写自己的安装路径)
安装测试:
HOME+R,输入cmd打开命令行窗口,输入node -v.

6.安装Vue

在命令行上输入以下命令：cnpm install vue -g

7.安装vue命令行工具，即vue-cli 脚手架

在命令行上输入以下命令：cnpm install vue-cli -g