Vue安装
https://cn.vuejs.org/v2/guide/
1.页面直接引入
2.npm方式，与webpack结合
3.vue-cli 搭建单页面应用（SPA）的脚手架
( 项目所使用的方式是npm方式，与webpack结合。)
webpack
https://www.jianshu.com/p/8906b197a271
webpack配置文件 webpack.config.js
MVVM
1.Model ： 数据 业务逻辑
2.View ： 页面 DOM
3.ViewModel ： Vue主要工作，将数据与DOM关联，具有响应式效果（修改Model，DOM跟着改变，所以只需关注Model方面的操作）
Vue 常用指令
1.v-text ： 与{{ }}功能类似
2.v-if
3.v-else
4.v-for
5.v-on ： 缩写 @
6.v-bind ： 缩写 ：
7.v-model ： 只用于表单元素，有双向绑定功能
Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
//选项
el: '#app',
render: h => h(App),
//template: "<div><router-view></router-view></div>",
router,
store,
data:" ", //数据
computed:" ", //计算属性
...
})
选项
1.data ： 数据
2.computed ： 计算属性 ， 基于依赖进行缓存
3.components : 组件
3.methods ： 方法
4.watch ： 监听 ， 可以监听数据变化 ， 调用方法等 ，( 这个项目中 更多用于 监听 vuex状态值的改变 ，进行一些响应 或 调用方法 处理数据。)
5.props ： 一般用于父子组件数据传递
6.filters : 过滤器 ， ( 在项目中更多用于对 插值表达式 进行一些处理，比如 加单位 ， 字符串处理 等。)
生命周期钩子
1.beforeCreate ： vue实例创建前
2.created ： vue实例创建完成，但是data和methods等还未初始化
3.beforeMount : 数据等初始化好了，还未挂载到DOM元素上
4.mounted ： 已挂载到页面DOM上，页面上可以看见数据了
5.beforeUpdate ：data等发生改变，但还未渲染到页面
6.updated : 已渲染到页面
7.beforeDestroy : 实例销毁之前
8.destroyed : 实例销毁完成
( 一般在项目中使用较多的是 mounted 钩子，在页面加载出来的时候执行一些操作，准备好页面的初始数据。)
( updated可以用在数据改变之后 需要执行一些操作等 ， 简单的数据有时可以用过滤器代替)
生命周期 vue官方图片
Vue组件
通常一个应用会以一棵嵌套的组件树的形式来组织
组件 vue官方图片
1.全局注册 ： vue.component()
2.局部注册 ： 在选项中使用comnents选项定义组件
3.在模块系统中局部注册 ：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
vue组件的定义与vue实例基本相同。
Vue Router
Vue Router 是 Vue.js 官方的路由管理器。
先 npm install 安装
import VueRouter from 'vue-router' //路由
//全局注册
Vue.use(VueRouter)
// 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/home', component: Home },
{ path: '/main', component: Main }
]
const router = new VueRouter({
routes, //在routes中编写具体的路由
mode: 'history'
})
new Vue({
el: '#app',
render: h => h(App),
routes // (缩写) 相当于 routes: routes ， 在vue实例中添加
store
})
== 路由配置：==
1.path : 路径
2.component ： 组件
3.children ： 嵌套子路由
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
路由导航：
<router-link :to="..."> //标签方式
//编程式
this.$router.push({
path: '/index/energymanagement' ///////路由跳转
});
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
（有点类似全局变量的概念 ，Vuex是一个全局单例模式）
Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
( 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。）
Vuex的引入与路由类似：
先 npm install
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
/*访问状态对象--存放变量*/
const state = {
image_path: "",
activePid: 0,
activeId:0
}
/*访问触发对象--存放事件*/
const mutations = {
}
export default new Vuex.Store({
state,
mutations
})
然后再Vue实例中引入：
import store from "./Home/store/store.js"
new Vue({
el: '#app',
render: h => h(App),
routes
store //在vue实例中添加
})
在程序中获取状态 ： this.$store.state
提交mutations ： this.$store.commit
( 在项目中状态管理可以用于 多个 组件 之间 共享数据， 普通的 组件传递数据 很繁杂 ，项目变大 ，模块变多 ， 代码变多 以后，普通的组件传递数据 代码 非常乱，很难维护。而用Vuex后，组件 之间 共享数据 非常简单方便)
( 比如 ： 一个组件发生事件，另一个组件 要响应 ， 如果是父子组件 还好一点，可以通过props 单向传递（ proops 是单项数据流），如果是 兄弟组件 这种，可以通过事件传递数据。这些 方法 在模块数量 少 的时候 还不会觉得 太麻烦，一旦多了，很难维护)
( 在项目中，可以用 computed 计算属性 获取 状态数据 ， 可以用 watch 监听，如果数据发生改变，执行一些方法，或者请求数据 等 操作)
Axios
https://www.kancloud.cn/yunye/axios/234845
Axios是访问后端服务使用的库。
npm install axios
安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能在每个需要发送请求的组件中即时引入。
引入方式一般有两种：
1.Vue.prototype 原型属性中引入， 如：Vue.prototype.$http = axios;然后就可以在组件中直接用了
var _this = this;
_this.$http.get("/energy/treeNode").then(function (res) {
_this.data = res.data;
});
2.在Vuex的action方法中封装。
axios已经把请求封装好了，有 get 、post 等， 当请求成功时，会执行 .then，失败就执行 .catch 。
( 这两个回调函数都有各自独立的作用域，如果在里面直接用this访问，是无法访问到 Vue 实例的， 可以 用 var _this = this; 的方法 ， 回调函数就可以访问到Vue实例了。 )
element-ui
http://element-cn.eleme.io/#/zh-CN/component/installation
element-ui与其他组件库一样，安装方式可以直接在页面通过标签引入 ， 也可以npm install方式引入，与webpack打包工具配合使用。
import ElementUI from 'element-ui' //element组件
import 'element-ui/lib/theme-chalk/index.css'//element ui样式
Vue.use(ElementUI)
自定义样式：
element-ui的样式使用的是scss,可以直接改变element-ui的样式变量。
( 也可以直接找到元素的类名，直接修改样式，但是这样改要注意样式优先级。)
网友评论