Vue、Vuex、MintUi、ElementUi 基础

一、搭建vue的开发环境

(1)安装node.js

(2) 安装脚手架工具，官方命令行工具

npm install  --global  vue-cli     /    cnpm install  --global  vue-cli

(3) 创建项目

vue init webpack vue-demo01

创建过程 看到 ESlint 字样，输入n ，不开启代码检查，否则代码多少空格都会报错

cd vue-demo01

安装依赖

cnpm install    / npm  install

npm  run  dev   /  cnpm run  dev

安装 cnpm

http://npm.taobao.org/

另一种创建项目的方法

vue init webpack-simple vuedemo02

可以省去繁琐的步骤，并且没有Eslint 语法检查

vs code 安装 vue2.0 插件

（4）vue-cli 3.0

如果想使用vue-cli 3.0  创建项目可以先删除 原来的vue-cli 2.0

cnpm  uninstall  -g  vue-cli

npm install  -g @vue/cli

创建项目

vue create hello-world

运行：cnpm  run serve

编译 ：cnpm  run  build

图形创建工具

vue  ui

二、使用vue-resource请求数据

vue官方数据请求工具

（1）安装 vue-resource  注意： 要加--save ，这样package.json中就会加上依赖

cnpm  install  vue-resource --save

（2）main.js 中导入

import  VueResource from 'vue-resource'

Vue.use(VueResource)

(3)在组件中直接使用

var api = 'https://www.baidu.com/'

this.$http.get(api).then((response)=>{

alert(response)

this.list = response.body.result

},function(error){

})

三、使用axios请求数据

安装 axios

cnpm install axios --save

axios 是第三方的依赖，所以不需要使用Vue.use()方法

直接在想使用axios 的组件中导入使用即可

import Axios from 'axios'

var api = 'https://www.baidu.com/';

Axios.get(api).then(function(response){

alert(response)

}).catch(function(error){

alert(error)

})

Axios.get(api).then((response)=>{

this.list = response.body.result

}).catch((error)=>{

alert(error)

})

建议function 改成箭头函数，免得this的指向有问题

四、fetch-jsonp  请求数据

五、父子组件

父组件传值到子组件

（1）父组件调用子组件的时候，绑定动态属性

（2）子组件中通过 props 接收父组件传来的值

父组件主动获取子组件的属性

（1）调用子组件的时候定义一个ref

主动获取子组件属性或者方法

（2）在父组件里面通过

this.$ref.header.属性

this.$ref.header.方法

子组件主动获取父组件的属性

(1)  直接在子组件中使用

获取父组件的属性或者方法

六、非父子组件传值

（1）新建一个js文件，然后引入vue，实例化vue，最后暴露出这个实例

import Vue from 'vue'

var VueEvent = new Vue()

export default VueEvent

（2）在要广播的地方引入刚才定义的实例

import VueEvent from '../modal/VueEvent'

首页广播事件

（3）通过VueEvent.$emit('名称','数据')

首页广播事件

sendMq(){

VueEvent.$emit('to-news',this.title)

}

（4）在接收数据的地方通过VueEvent.$on('')

import VueEvent from '../modal/VueEvent'

mounted() {

VueEvent.$on('to-news',function(data){

console.log(data)

})

},

七、Vue-Router的使用

1.安装

cnpm install vue-router --save

2.引入并使用

Vue.use(VueRouter)

3.配置路由

（1）创建组件  引入组件

（2）定义路由

const routes = [

{

path: '/',

name: 'HelloWorld',

component: HelloWorld

},

{

path: '/Home',

name: 'Home',

component: Home

}

]

(3) 实例化 VueRouter

const  router = new VueRouter(

{

routes   // 缩写 相当于 routes : routes

}

)

（4）挂载

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

（5）根组件的模板里面放上这句话

八、动态路由

1.配置动态路由

routes:[

// 动态路径参数 以冒号开头

{parh:'/user/:id',component: User}

]

2. 在对应的页面

this.$route.params 获取 动态路由的值

3.编程式导航

4. history 模式

九、路由嵌套

1.配置路由

{

path: '/user',

component: User,

children: [

{path: 'useradd',component: UserAdd}

{path: 'userlist',component: UserList}

]

}

2.父路由里面配置子路由显示的地方

十、MintUi  和  Element Ui

MintUi 基于 vue 的  移动端 ui 框架

cnpm install mint-ui --save

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)

Element Ui 基于 vue 的 pc 端 ui 框架

cnpm i element-ui -S

import ElementUI from 'element-ui';

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

Vue.use(ElementUI)

其他更多用法参照 官方文档

十一 、vuex

vuex 是一个专为 vue.js 应用程序开发 的 状态管理模式

1.vuex 解决了组件之间同一状态的共享问题，（解决了不同组件之间的数据共享）

2.组件里面数据的持久化

小型项目不建议用vuex，而使用 localstroage 和 sessionstroage

state 单一状态树 用来存放数据‘

getter 相当于计算属性

Mutation 用来改变 state 里面的 数据

Action  用来触发 mutation 来改变state的数据，提交的是 mutation，而不是直接变更

状态，可以包含任意的异步操作

3. 安装vuex

cnpm  install  vuex  --save

4. vuex 的使用

（1）src 目录下面创建一个 vuex 的文件夹

（2）vuex文件夹里面创建一个store.js

（3）在store.js引入 vue 及 vuex，并且 Vue.use（Vuex）

（4）定义数据

/**

* 1.state在vuex中用于存储数据

*/

var state ={

count: 1

}

（5）定义方法

/**

* 2.mutation里面放的是方法，方法主要用于改变state的数据

*/

var mutations={

incCount(){

++state.count;

}

}

（6）实例化vuex.store 并 暴露

/**

* 3.vuex 实例化 Vuex.store

*/

const store = new Vuex.Store({

state:state,

mutations:mutations

})

export default store;

（7）组件里面使用vuex

1.引入 store

import  store  from  ’../vuex/store.js‘

2.注册

export  default {

data(){

return {

msg:'aaa',

value: null,

}

},

store,

methods:{

incCount(){

// 触发 前面定义的 mutation 里面定义的方法，改变 state的数据

this.$store.commit('incCount');

}

}

}

3.获取 state 里面的数据

this.$store.state.数据

4. 触发 前面定义的 mutation 里面定义的方法，改变 state的数据

this.$store.commit('incCount');

5.getter 的用法

/**

* getter 有点类似计算属性，改变state里count数据的时候会触发getters里面的方法获取新的值

*/

var getters = {

computedCount:(state) => {

return state.count*2

}

}

在组件里面使用的时候，首先引入并注册，

然后 使用 this.$store.getters.computedCount

6.action 的用法

var  actions={

incMutationsCount(context){

context.commit('incCount')

}

}

在组件里面使用action的时候使用

this.$store.dispatch('incMutationsCount')

注意： 使用的时候都要暴露

const store = new Vuex.Store({

state:state,

mutations:mutations,

getters:getters,

actions:actions

})

7.注意事项：

var mutations={

incCount(){

++state.count;

},

// this.$store.commit('addList',list) 当需要传值的时候，这里定义的方法必须加上state参数

addList(state,data){

state.list = data;

}

}

JavaScript Node.js Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。