一篇文章快速搞懂VUE

一、环境安装配置

1、安装nodejs

https://nodejs.org/en/

2、安装淘宝npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v

安装成功后就可以通过可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

3、安装vue-cli3

脚手架网址

https://cli.vuejs.org/zh/

npm install -g @vue/cli

安装成功后可以通过以下命令验证是否安装成功

vue --version

二、创建项目

1、创建项目

方式1

用命令行工具（cmd）打开要创建目录的位置，本次设置项目目录为 D:\vue_demo，运行以下命令创建项目

vue create hello-world

提示选择要选择快速的镜像，选择默认的 default (babel, eslint)，等待片刻。创建完成之后打开运行命令

cd hello-world
npm run serve

即可启动项目，浏览器输入http://localhost:8080/即可访问

其他命令-编译

npm run build

方式2

使用图形化创建

vue ui

2、引用项目

拿到一个项目后如果没有node_modules包需要命令进入该目录下，然后运行，即可

cnpm install
npm install
不直接使用cnpm，直接使用cnpm会造成诡异bug
npm install --registry=https://registry.npm.taobao.org

三、操作

1、声明与渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2、条件和循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

<div id="app-4">
  <ol>
    <li v-for="(todo,index) in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

3、绑定属性

一般绑定

v-bind:title="message"
:title="message"

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  <div :title="message">asdfads</div>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString();
    src:''
  }
})

绑定html

v-html=""

<div v-html="h"></div>
h:'<h2>我是h2<h2>'

绑定text

v-text=""

绑定class

<div v-bind:class="{'red':flag,'blue':!flag}">
		我是一个div
</div>

flag:true

.red{
	color: red;
}
.blue{
	color: blue;
}

循环绑定class

<li v-for="(item,index) in list" :class="{'red':index==0,blue:index==1}">
				{{item}}
</li>

绑定style

<div class="box" v-bind:style="{width:boxWidth+'px'}">
		我是另一个div
</div>

boxWidth:300

.box{
    background: red;
    width:100px;
    height: 100px;
}

4、双向数据绑定

<input v-model="msg" />
msg:"121"

5、获取dom信息

<!-- 获取dom -->
<input value="" ref="userinfo" />
<button v-on:click="getUserInfo()">获取用户信息</button>

methods:{
	  getUserInfo(){
		  alert(this.$refs.userinfo.value);
	}	  
  }

6、点击事件

<button v-on:click="getUserInfo()">获取用户信息</button>
<button @click="getUserInfo()">获取用户信息</button>
<!-- 获取事件 -->
<button @click="eventFn($event)">获取事件</button>

7.引入js

export default storage;
import storage from './model/storage.js';

四、组件

1、组件的基本使用

在App.vue里创建一个components文件夹，创建vue文件，文件结构如下：

<template>
	<div>
		<h2>这是一个首页信息组件</h2>
	</div>
</template>

<script>
</script>

<style>
</style>

在App.vue中引用使用

<template>
  <div id="app">
	{{msg}}
	<v-home></v-home>
  </div>
</template>

<script>
	/*
	1、引入组件
	2、挂载组件
	3、在模版中使用
	*/
	import Home from './components/Home.vue';
	export default{
		data(){
			return{
				msg:'你好vue'
			}
		},
		components:{
			'v-home':Home
		}
	}
</script>
<style>
</style>

局部作用域

<style scoped>
	h2{
		color: red;
	}
</style>

2、声明周期函数

组件挂载以及组件更新组件销毁的时候触发的一系列的方法，这些方法叫作声明周期函数

mounted(){
			console.log("我是一个生命周期函数");
}

beforeCreate(){
	console.log("实例创建之前");
},
created(){
	console.log("实例创建完成");
},
beforeMount(){
	console.log("模版编译之前");
},
mounted(){
	console.log("模版编译完成");
},
beforeUpdate(){
	console.log("更新数据之前");
},
updated(){
	console.log("数据更新完毕");
},
beforeDestroy(){
	console.log("实例销毁之前");
},
destroyed(){
	console.log("实例销毁完成");
}

挂载以及卸载别的组件

<button @click="flag=!flag">挂载以及卸载life组件</button>

import Life from './Lify.vue';
	export default{
		data(){
			return{
				msg:'我是一个组件',
				flag:true
			}
		},
		methods:{
		},
		components:{
			'v-life':Life
		}
	}

3、请求数据

vue中请求数据有三种方式：

• vue-resource 官方提供的vue插件
• axios
• fetch-jsonp

(1) 使用vue-resource进行请求

安装官方组件

cnpm install vue-resource --save

在main.js文件中引入

import VueResource from 'vue-resource'
Vue.use(VueResource);

var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then(function(response){
	console.log(response.body);
},function(err){
	console.log(err);
});

// GET /someUrl
  this.$http.get('/someUrl').then(response => {
    this.someData = response.body;
  }, response => {
    // error callback
  });

(2) 使用axios进行请求

cnpm install axios --save

哪里用哪里引用axios

import Axios from 'axios';

var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
Axios.get(api)
	.then( (response) => {
    // handle success
    console.log(response);
    })
    .catch( (error) => {
    // handle error
    console.log(error);
})

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

(3) 使用jsonp进行请求

this.$http.jsonp(api).then((response)=>{
					this.list = response.body.result;
				},function(err){
					alert(err);
				})

4、父子组件传值与方法

(1) 传值

父组件

<v-header :title="title1"></v-header>

data(){
	return{
		title1:'父组件传值到Header11'
	}
}

子组件，通过props接收数据

props:['title']
<h2>我是一个头部组件--{{title}}</h2>

(2) 传递方法

父组件

<v-header :title="title1" :run="run"></v-header>
方法：
run(msg){
				alert("这是主组件的run方法："+msg)
}

子组件

<button @click="run('header传递的参数')">运行run方法</button>

(3) 传递实例

父组件

<v-header :title="title1" :run="run" :home="this"></v-header>

子组件

props:['title','run','home']
方法里调用：
console.log(this.home.title1);
this.home.run();

5、父子组件主动获取值和方法

(1) 父组件主动获取子组件的数据和方法

• 调用子组件的时候定义一个ref

  <v-header ref="header"></v-header>
  

• 在父组件里面通过

  this.$refs.header.属性
  this.$refs.header.方法
  

(2) 子组件主动获取父组件的数据和方法

this.$parent.msg
this.$parent.run()

6、非父子组件的通信

(1) 新建一个js文件，引入vue，实例化vue，最后暴露这个实例

//引入一个空的vue实例
import Vue from 'vue'
var VueEvent = new Vue();
export default VueEvent;

(2) 在广播的地方引入刚才的实例

import VueEvent from '../model/VueEvent.js';

(3) 通过VueEmit.emit(‘名称’，‘数据’);

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

(4) 在接收数据的地方通过

VueEvent.$on('to-news',function(data){
				console.log(data);
})

五、路由配置

1、安装

官方网站：https://router.vuejs.org/zh/installation.html

npm install vue-router --save
或者
cnpm install vue-router --save

2、使用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3、配置路由

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
import Home from '../components/Home.vue';

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/home', component: Home},
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 5. 在 APP.vue 里设置路由即可进行访问
<RouterView></RouterView>
// 现在，应用已经启动了！

4、动态路由的传值

方式1

main.js配置组件和路由

import Content from './components/Content.vue';

{ path: '/content/:id', component: Content }

要跳转的页面配置跳转路径，有两种方式

<RouterLink to="/content/123">{{key}}---------{{item}}</RouterLink>

<RouterLink :to="'/content/'+key">{{key}}---------{{item}}</RouterLink>

<router-link  style="padding-left: 5px;color: #409EFF;text-decoration: none;" :to="{ name: 'detail',params:{id:item.id}}">{{ item.title }}</router-link>

在所在的页面获取值

console.log(this.$route.params);

方式2：get传值

main.js配置组件和路由

import Content from './components/Content.vue';

{ path: '/content', component: Content }

获取值

this.$route.query

方式3：编程式路由，通过js进行跳转

// this.$router.push({path:'/news'});
this.$router.push({path:'/content/486'});

方式4：命名路由

{ path: '/news', component: News ,name:'news'},//main.js配置名称
this.$router.push({name:'news',params:{userId:124}});

5、路由模式的转换

const router = new VueRouter({
  mode:'history', //hash模式转换为history模式
  routes // (缩写) 相当于 routes: routes
})

6、路由的嵌套

(1) 配置路由

{ path: '/user',
	 component: User,
	 children:[
		 { path: 'useradd', component: UserAdd },
		 { path: 'userlist', component: UserList },
		]
	 }

(2) 父路由配置子路由显示的地方

<div class="user">
		<div class="left">
			<ul>
				<li><RouterLink to="/user/useradd">增加用户</RouterLink></li>
				<li><RouterLink to="/user/userlist">增加用户</RouterLink></li>
			</ul>
		</div>
		<div class="right">
			<RouterView></RouterView>
		</div>
	</div>

7、路由模块化

在src创建一个router文件夹，并创建router.js文件，把mian.js里关于路由的语句，全部转移到router.js中去，并在最后加上语句 export default router; 把router暴露出来。

import Vue from 'vue'
//Router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//1.创建组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import Content from '../components/Content.vue';
import User from '../components/User.vue';
import UserAdd from '../components/User/UserAdd.vue';
import UserList from '../components/User/UserList.vue';
//2.配置路由
const routes = [
	{ path: '/home', component: Home},
	{ path: '/news', component: News ,name:'news'},
	{ path: '/content/:aid', component: Content },
	{ path: '/user',component: User,children:
	[{ path: 'useradd', component: UserAdd },
	{ path: 'userlist', component: UserList },],
	},

]

const router = new VueRouter({
  mode:'history',
  routes // (缩写) 相当于 routes: routes
})
export default router;

之后再main.js中引入改router

import router from './router/router.js' 

即可完成

六、VUE的UI库

1、Mint UI

官网：https://mint-ui.github.io/#!/zh-cn

安装

cnpm install mint-ui --save

引入mint UI

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

注意：在mintUI组件上面执行事件的写法

@click.native	

2、element UI

官网：https://mint-ui.github.io/#!/zh-cn

安装

 cnpm install element-ui --save

进入完整的Element

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

按需引入Element

import Vue from 'vue'
import { Button } from 'element-ui'

Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button)

七、vuex

1、介绍

vuex：解决不同组件的数据共享问题 ，小项目中不建议使用vuex

1、vuex解决了组件的数据共享问题

2、数据的持久化

2、准备

1、在src目录创建一个vuex的文件夹

2、创建一个store.js文件

3、安装vuex

cnpm install vuex --save

4、在刚才创建的store.js引入vue 引入vuex 并且use vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

/*1.在vuex存储数据*/
var state={
	count:1
}
/*2.mutations里面主要是放的是方法，方法主要是改变state的数据*/
var mutations = {
	incCount(){
		++state.count;
	}
}

//vuex 实例化Vuex.store
const store = new Vuex.Store({
	state,
	mutations
})

export default store;

5、要引入的页面

import store from '../vuex/store.js'

引入store组件,引入方法如下

methods:{},
  store,
  components:{
  },

获取数据

{{this.$store.state.count}} 

执行方法

	//执行方法
	methods:{
			incCount(){
				this.$store.commit("incCount");
			}
		},

Getter

在store.js里配置getter

var getters = {
	computedCount:(state)=>{
		return state.count*2
	}
}
//vuex 实例化Vuex.store
const store = new Vuex.Store({
	state,
	getters,
	mutations
})

获取数据

{{this.$store.state.count}} --- {{this.$store.getters.computedCount}}

Action

var actions={
	incmutationsCount(context){ /*因此可以调用一个context.commit提交一个mutations*/
		context.commit('incCount');
	}
}

//vuex 实例化Vuex.store
const store = new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})

触发

this.$store.dispatch('incmutationsCount');

八、CSS–scss

安装

npm install -D sass-loader node-sass

<style lang="scss">
</style>

九、打包

在项目的根目录下，新建一个vue.config.js

里面添加内容

module.exports={
    publicPath: '/pddProduct',//根目录
    outputDir: 'dist2' //构建输出目录
}

npm run build

参考

https://www.jianshu.com/p/f639975fdb00

十、成型框架

iview-admin

element-admin

https://codeload.github.com/BuNuo/iview-admin-simple/zip/master

npm install --registry=https://registry.npm.taobao.org