vue是目前比较火的一个前端单页框架，简单容易上手 一个简化版的项目只需要4个组件即可 vue + vue-router + vuex + axios vue：自身负责全盘内容 vue-router：负责页面的切换 vuex：负责全局的变量的存储和读取 axios：负责和api服务器进行rest接口的交互 以下的内容需要有一定前端基础才方便理解
前序步骤：使用webpack打包模式来开发vue，没有直接使用引入vue文件的方式来开发，需要安装nodejs，vue-cli nodejs是运行测试环境的基础 vue-cli是使用模板创建vue项目的工具 1：安装成功后初始化项目：vue init webpack myproject
一个vue文件主要包含三个部分，模板，js，css <template> </template> <script> </script> <style> </style> template部分是存放html代码的地方，只有一个根元素，可以用div来包裹起来 script是js脚本的地方，一般以export default {}的形式出现，具体vue的js代码都写在大括号里面 style是写css的地方，支持scss和sass，但scss是主推使用。
在template里面主要常用的两个内容，都是在export default {}里面的内容，一个是data数据，一个是method方法。 data () { return { myDataName:'', myValue:'' } } 使用的方式有两种，一种是属于content类的的，不是html的元素，使用的是{{myDataName}};另外一种是属于在html元素属性里的，需要使用v-bind:或者缩写:的形式才能使用，并且不需要使用大括号，例如 <input :value="myValue"> //缩写 <input v-bind:value="myValue"> //全写 #双向绑定 这个是单向的，即只能从js修改后在页面显示 如果需要双向的（即页面上更改的值会引发js里的值更改）需要使用v-model:value="myValue"，这样input的值修改会让js里对应的变量一个更改
条件渲染： 内容 内容 v-el-if="表达式" <template v-if="表达式"> 内容 </template>
列表渲染： <template v-for="item in items"> <p>{{item}}</p> </template>
- script里面的常见的内容有： ``` <script> export default { el:''#myId' ： data:{}//数据 methods:{}//绑定的方法 created:function(){}//生命周期事件，function里面this 指向vue实例，还有mounted，updated，destroyed都是生命周期事件 filters:{}//定义过滤器 watch:{}//定义需要跟踪的属性和执行的事件 components:{}//注册局部组件 } </script>
### 事件绑定
使用v-on:或者缩写@，例如绑定点击事件
v-on:click="myMethodName"
@click="myMethodName"
myMethodName需要在methods里面声明
### 生命周期回调方法
会在这个vue组件的生命周期里触发，常用的有
created，mounted，beforeCreated等
### 过滤器
用来对数据进行再一次处理，比使用methods里的方法书写更为简洁直观，需要在filters中先声明一个方法，然后在template里面使用
{{属性名 | 过滤器名}}
可以多个过滤器串联：{{属性名 | 过滤器1 | 过滤器2}}
### 计算属性
在template使用，和data里的值使用类似，但computed属性可以再执行一些内容。
### 使用子组件
使用子组件的方式可以让代码更好的复用，即一个子组件可以在多个vue文件中直接引用使用。
1：在父组件中先引入子组件的vue文件
import MyComp from './mycomp.vue'
2：在父组件的声明的compentents中添加MyComp
componetents: {MyComp}
3：在父组件中使用
<MyComp/> 这里的名字需要和componentns里的一致，否则会出现找不到组件的提示
4：给子组件传值，vue设定传值只能是单向的，子组件不能直接对父组件传进来的值进行修改
<MyComp :myPropName="fatherDataName"/>
5：在子组件中声明props来接收父组件传入的值
props:['myPropName'] 这个方式不是推荐的写法，这里不详细叙述。
当需要在子组件更改父组件的值时：通过事件进行传递
1：在父组件里
<MyComp v-on:myEventName="fatherMethod"/>
methods: {
fatherMethod (myData) {}
}
2：在子组件的方法中使用
this.$emit('myEventName', data)
#### 使用slot来进行动态更改组件里的内容
当组件里部分内容需要动态更改时，可以使用slot标签
1：在子组件里需要替换内容的地方书写<slot></slot>
2：在父组件引用子组件的地方：
<MyComp>
<div>这里是替换的内容</div>
</MyComp>
## vue-router：
因为是单页应用，所以location里的地址前缀不会更改，更改是后缀，默认使用#来分隔，此时router可以对路径进行划分，然后显示对应的组件内容
1：在声明vue实例的地方引入vue-router，然后构造一个带有页面地址和组件的router对象，插入进vue实例里面即可
2：在模板需要使用路由内容的地方写上<route-view/>
const router = new VueRouter({
routes: [
{ path: '/user/:id', component:MyComponent}
]
})
路由里还有路由守卫，用来控制能否跳转显示，多用于权限控制
### vuex：用来保存全局变量，主要有
state：主要存储变量的地方
action：用作异步更改state
mutation：用作同步更改state
getter：用来读取state，同时可以做一些操作，和计算属性类似
...mappedStated方法：用来全部绑定state里的值到组件的计算属性中，简化书写代码。
const store = new Vuex.Store({
state:{},
actions:{},
mutations:{},
getters:{}
})
还可以对全局变量进行分模块管理，这里不详细叙述
### axios2 ：用作异步请求api
如果不使用中转的，则需要api使用跨域设置，否则会报调用错误
使用JWT的方式进行api的调用。
# 部署
项目开发完成后，使用npm run build即可打包出一份静态页面代码
此时这份代码可以直接部署在nginx上，调用的api地址如果不进行跨域，则在nginx上配置一下转发即可。
源码可以到
https://github.com/18588733917
上查看
