前端Vue框架

前端Vue框架

Vue.js 是什么？

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue.js的优势

轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快。

vue的生命周期和钩子函数

vue的生命周期是一个组件从创建到销毁的全过程。这个过程包括4个阶段，8个函数。也叫8个钩子函数。（创建期:beforeCreate,created，挂载期:beforeMount mounted，更新期:beforeUpdate,updated，销毁期:beforeDestory,destoryed）。

beforeCreate 在挂载开始之前被调用：相关的 render 函数首次被调用。

created 在实例创建完成后被立即调用。

beforeMount 在挂载开始之前被调用。

mounted 挂载完成后调用。

beforeUpdate 数据改变，未渲染之前。

Updated 数据渲染完成之后。

beforeDestroy 实例销毁之前调用，在这一步，实例仍然可用。

destroyed 实例销毁后调用。

项目中最常用的两个钩子函数:

created:一般会调取接口来获取数据。但是由于在这个时候我们的页面挂载节点还没有生成。所以不能再页面显示。

Mounted:会生成页面挂载结点。在该钩子函数执行了之后才能在页面加载出那些从后端获取的数据

vue的几个常用指令

1. v-if: 在切换元素时，其属性值的true或者false相当于创建和销毁该节点（常用在不会频繁改变显示状态的地方）。
   1. 在状态切换以后，数据需要跟着变化的时候，需要用v-if

2.v-show: 在切换元素时，其属性值的true或者false相当于添加了个style样式的display:block;或者display:none;(当元素会频繁改变时使用)。

3. v-else: 用在v-if或者v-show后面，作为一个默认的样式，当v-if或者v-show属性值为false时，显示这个。

4. v-for: 用来循环一个数组或者一个对象来渲染一个列表。

(1) v-for 不能和v-if一起使用，v-if的权重大

(2)响应式数据

5. v-on: 用来绑定一些事件，比如点击事件，可以简写为“@”。

6. v-bind: 用来动态的绑定一个或多个特性，比如class或者style样式等。可以简写为“：”

7. v-model: 一般用来实现表单元素和应用状态之间的双向绑定。

Node的作用

准确的说是使用vue-cli 脚手架搭建项目的时候需要nodejs。也可以用script标签引入vue.min.js这样的，在js里实例化vue也行。

 

使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less，等，启动测试服务器localhost8080, 帮助管理 vue-router，vue-resource这些插件，直接拿来用。

npm的作用

npm下载文件之后，webpack打包文件的时需要node环境去运行

 

npm install是帮助安装 vue,到本地，npm install也可以安装vue的开发工具。当然你完全可以像jQuery一样自己找网站下载下来，在页面中引入。没有npm可以使用vue，vue只是一个前端框架。

vue项目2.0脚手架配置方法:

第一步

（1）下载node（可在cmd里面查看 node -v）。

（2）下载npm（可在cmd里面查看 npm -v）。

第二步

（1）安装vue（我这里安装的是2.0），是否安装成功可以在cmd中输入指令（vue -V）查看。

在 cmd中输入 npm install vue-cli -g

第三步

（1）创建一个文件夹用来存放所有的项目。再在cmd中将地址切换到该文件夹下。再在该文件夹下创建具体项目。操作如下：

vue init webpack vue-peo

该指令是创建了一个项目名为vue-peo的项目

第四步

一直点击回车按钮，知道出现需要选择（y/n）的操作。

第五步

这些y/n的选择是需要你判断你是否能用到。一共有4个，具体的具体对待，我的选择是（y,n,n,n）。最后选择使用npm.

第六步

这里已经算是完成了，不过最好在项目里面执行一下npm install下载一下依赖，再创建一个名为pages的文件夹，在pages的文件夹下写具体的大页面。在components下写可以复用的子页面。便于管理

vue项目如何引入elementui

第一步： 在命令行里面输入 npm install element-ui --save 后点击回车（注意。这一可能会报错，这个报错不用管，这个是一些js库缺陷型的问题）。

第二步： 在脚手架的main.js里面引入以下几行代码：

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

然后就可以在项目中使用关于elementui的东西来编辑项目页面了。

 

vue的watch,computed和methods

watch: 这个是用来监听data里面定义的一些变量，每监听到变量发生改变时，就会执行这里。

computed： 这个是计算属性，他的值不会在data里面声明。使自己定义的。可以处理data里面的值来生成。在方法里面也是直接this.生命的值就可以获取到。

methods： 这个是方法，就是添加一些自定义的事件，就可以在这里面写。

Vuex的5种常用属性

vuex： 这个东西就相当于一个公共管理的仓库。在这里定义的东西可以在各个页面获取到。常用来解决同级组件之间的传值问题。

1. state： 用来存储变量。在别的页面就可以使用this.$store.state.这里定义的变量，获取到这个变量的值。
2. mutations和actions： 这两个地方的功能都差不多，是用来执行回调函数从而更改状态的地方。不同的是actions可以进行异步操作。
3. getters: 这个东西就相当于组件中的计算属性。
4. modules: 这个是对处理过后的状态进行分类。它里面可以有很多个组成。而每个组成里面都可以有自己的state,mutations,actions, getters。

Vue 组件之间的传值

父子组件间的传值：

（1）父组件通过属性方式向子组件传值，子组件通过props来接收父子间传入的参数值。

（2）子组件通过$emit向外触发事件向父组件传值，父组件通过监听事件来监听子组件的向外触发事件来获取子 组件传过来的值。

非父子组件间的传值：

eventBus（数据发布-订阅者模式），就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件，如果项目较小时，用eventBus 比较合适。