记录Vue结合Element-Ui组件库的安装与基本用法
1. 创建工程
- 选择一个文件夹 cmd 创建一个名字为 hello-vue 的工程
vue init webpack hello-vue
- 安装依赖,需要安装 vue-router、element-ui、sass-loader、node-sass 四个插件(如果安装失败尝试使用 cnpm 安装)
// 进入 hello-vue 目录
cd hello-vue
// 安装 vue-router 路由
npm install vue-router --save-dev
// 安装 element-ui
npm i element-ui -S
// 安装依赖
npm install
// 安装 sass加载器
cnpm install sass-loader node-sass --save-dev
// 启动测试
npm run dev
2. 测试vue基本语法和使用
- 取值
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello vue!"
}
});
</script>
- v-if
<div id="app">
<h1 v-if="ok">
yes
</h1>
<h1 v-if="!ok">
no
</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
ok:true,
}
});
</script>
- v-for
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}--{{index}}
</li>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message:"hello java"},
{message:"hello php"}
]
}
});
</script>
- 绑定事件
<div id="app">
<button v-on:click="sayHi">
sayHi
</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hi java and vue"
},
methods:{
sayHi :function () {
alert(this.message)
}
}
});
</script>
- 双向绑定
<div id="app">
<br>输入框
输入的文本:<input type="text" v-model="message"/>
{{message}}
<br>单选框
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
{{sex}}
<br>select选择框
<select v-model="select">
<option disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
{{select}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"111",
sex:'',
select:''
}
});
</script>
- 定义组件
<div id="app">
<it v-for="item in items" v-bind:its="item"></it>
</div>
<script>
<!--定义一个Vue组件-->
Vue.component("it",{
props:['its'],
template:'<li >{{its}}</li>',
});
var vm = new Vue({
el:"#app",
data:{
items:["java","php","css"]
}
});
</script>
3. 使用element-ui
- main.js中引入 ElementUI 和 router
import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js';
Vue.use(ElementUI);
Vue.use(router);
new Vue({
router,
el: '#app',
render: h => h(App)
});
- src下创建/router/index.js文件,安装路由并且配置导出路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/user/login'
//安装路由
Vue.use(VueRouter);
//配置路由导出配置
export default new VueRouter({
mode:'history',
routes:[
{
path:'/login',
component:Login
}
]
});
- 创建Login.vue文件
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name:"Login",
data(){
return {
form:{
username: '',
password: ''
},
//表单验证,需要再el-form-item 元素中增加prop属性
rules:{
username:[
{required:true,message:'账号不能为空',trigger:'blur'}
],
password:[
{required: true,message: '密码不能为空',trigger:'blur'}
]
},
//对话框显示和隐藏
dialogVisible:false
}
},
methods:{
onSubmit(formName) {
//为表单绑定验证功能
this.$refs[formName].validate((valid) =>{
if (valid){
//使用 vue-router路由到指定页面,该方式称之为编程式导航
this.$router.push("/main/"+this.form.username);
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding:35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0 0 25px #909399;
}
.login-title{
text-align:center;
margin:0 auto 40px auto;
color:#303133;
}
</style>
-
npm run dev 启动项目,http://localhost:8080/login访问
-
路由嵌套传递参数
路由嵌套:在router/index.js的routes中使用children:[ ]。
传递参数:<router-link :to="{name:'profile',params:{id:1}}">
,
并且path路径后加/:id,在router/index.js的routes的children:[ ]中使用属性 props:true,可以实现参数的传递,props:[‘参数名’]接收。(若没有设置props属性可以使用{{ $route.params.id}}接收)
1. 创建Main.vue文件
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!-- profile -->
<router-link :to="{name:'profile',params:{id:1}}">个人信息</router-link>
<!-- <router-link to="/profile">个人信息</router-link> -->
</el-menu-item>
<el-menu-item index="1-2">
<router-link :to="{name:'list',params:{id:123}}">用户列表</router-link>
<!-- <router-link to="/list">用户列表</router-link> -->
</el-menu-item>
<el-menu-item index="1-3">
<!-- <router-link :to="{name:'list',params:{id:1}}">用户列表</router-link> -->
<router-link to="/main">goMian</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<e1-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</e1-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right:15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>{{name}}</span>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'Main',
props:['name']
}
</script>
<style scoped>
.el-header {
background-color: #0399e4;
color: rgb(26, 23, 207);
line-height: 60px;
}
.el-aside {
color: rgb(30, 7, 230);
}
2. 创建List.vue、Profile.vue文件
<template>
<div>
<h1>Profile</h1>
{{ $route.params.id}}
</div>
</template>
<script>
export default {
name:'Profile',
beforeRouteEnter:(to,from,next)=>{
console.log('进来了');
next(vm=>{
vm.getData();
});
},
methods: {
getData:function(){
this.axios({
method:'get',
url:'http://localhost:8080/static/mock/data.json'
}).then(function (response){
console.log(response)
});
}
},
}
</script>
<style>
</style>
<template>
<div>
<h1>List</h1>
<!-- {{$route.params.id}} -->
{{id}}
</div>
</template>
<script>
export default {
props:['id'],
name:'Lsit'
}
</script>
<style>
</style>
3./router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/user/Main'
import List from '../views/user/List'
import Profile from '../views/user/profile'
import Login from '../views/user/login'
import NotFound from '../views/user/NotFound'
Vue.use(VueRouter);
export default new VueRouter({
mode:'history',
routes:[
{
path:'/main/:name',
props:true,
name:'main',
component:Main,
children:[
{
path:'/list/:id',
name:'list',
component:List,
props:true
},
{
path:'/profile/:id',
// path:'/profile',
name:'profile',
component:Profile
}
]
},
{
path:'/login',
component:Login
}
]
});
- 重定向
{
// 重定向
path:'/goMian',
redirect:'/main'
}
- 404页面
path:’*’ 路径未匹配到则走 * 路径 到404页面
<template>
<div>
<h1>404,页面没有找到</h1>
</div>
</template>
<script>
export default {
name:'NotFound',
}
</script>
<style>
</style>
{
path:'*',
component:NotFound
}
- 使用路由钩子发起axios异步请求
1. 安装 axios
npm install --save axios vue-axios
2. main.js引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3. beforeRouteEnter
<script>
export default {
name:'Profile',
beforeRouteEnter:(to,from,next)=>{
console.log('进来了');
next(vm=>{
vm.getData();
});
},
methods: {
getData:function(){
this.axios({
method:'get',
url:'http://localhost:8080/static/mock/data.json'
}).then(function (response){
console.log(response)
});
}
},
}
</script>