Vue框架的一点使用总结

2018-07-27 本文已影响47人 GongZH丶

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

https://router.vuejs.org/zh/

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

https://vuex.vuejs.org/zh/

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的样式变量。
( 也可以直接找到元素的类名，直接修改样式，但是这样改要注意样式优先级。)