本文介绍了如何在HTML中引入Vue.js，使用插值表达式、v-bind/v-model双向绑定、v-if/v-else-if/v-else条件控制，以及结合axios实现数据获取。还展示了Element UI在登录界面和主菜单的实例应用。
2.14 初识vue
1.示例1 vue.js的引入和插值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="base">
<!-- 插值表达式 往页面输出 -->
欢迎你登录 {{uname}}
</div>
{{uname}}
</body>
<script>
/*
1.创建vue对象 viewModel
2.el 指定监控的范围 data 指定数据模板
3.关注数据的赋值
*/
var myvue = new Vue({//viewModel
el:"#base",//vue监控的范围
data:{ //数据模板 json格式 model
uname:"rose"
}
})
console.log(myvue.uname);
myvue.uname = "jack";
//let 加块级作用域
//const 常量 改变时报错
/* for(let i = 0;i<10;i++){
console.log(i);
}
console.log(i); */
/* const test = "abc";
console.log(test); */
/* var a = 15;
var b = "test";
console.log(`a的值是${a}的值`); */
</script>
</html>
2.基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<style>
.cls1{
border: 1px solid black;
}
.cls2{
background-color: lightgreen;
}
.cls3{
width: 100px;
height: 100px;
}
.cls4{
border-radius: 10px;
}
</style>
</head>
<body>
<div id="base">
<!-- 插值表达式 往页面输出 -->
欢迎你登录
<div v-html="mytag"></div>
<input type="text" v-bind:value="myval" />
<input type="button" />
<input type="text" v-model="textval2" />
<div class="cls4" :class="{'cls1':show1,'cls2':show2,'cls3':show3}">测试</div>
<div v-if="showdiv==1">测试显示隐藏1</div>
<div v-else-if="showdiv==2">测试显示隐藏2</div>
<div v-else="showdiv==3">测试显示隐藏3</div>
<input type="button" value="测试按钮" @click="myclick" />
<input type="button" value="读取数据" @click="myclick2" />
</div>
</body>
<script>
/*
vue基本语法方式
v-xxx vue指定
1.插值表达式{{}} 向页面输出纯文本
2.v-html 指令 向页面输出标签
3.v-bind 指令 把html元素的属性 与数据模板绑定
//简化写法 属性前有冒号 :value :class
4.v-if 指令 通过绑定数据模板中的bol值 决定元素是否显示
v-else-if
v-else
5.v-on 指令 绑定事件
@事件
事件定义在
methods:{
myclick(){
//函数执行的代码
//在vue的函数中 通常来改变data中的值
//this vue对象
//vue对象.$data.key
this.textval="小明";
this.show2=true;
}
}
6.v-model 双向绑定
既可以给元素赋值 又可以获取到元素当前的值
经常用在文本框
<input type="text" v-model="textval2" />
单选按钮
<input type="radio" value="nan" v-model="gender"/>男
<input type="radio" value="nv" v-model="gender"/>女
复选框
<input type="checkbox" value="1" v-model="hobbys" />爬山
<input type="checkbox" value="2" v-model="hobbys"/>游泳
下拉框
<select v-model="selval" @change="getSelVal">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="007">深圳</option>
</select>
7.v-for 遍历集合元素
有集合数据 json结构数据
v-for="xxx in xxxlist" 在哪个元素上 就遍历哪个元素
输出到页面的数据 {{xxx.key}}
把属性值动态写入属性 :属性="xxx.key"
*/
var myvue = new Vue({//viewModel
el:"#base",//vue监控的范围
data:{ //数据模板 json格式 model
uname:"jack",
mytag:"<h1>rose</h1>",
myval:"默认值123" ,
textval2:"默认值123" ,
show1:true,
show2:false,
show3:true,
showdiv:5
},
methods:{
/* myclick:function(){
console.log(1);
console.log(this);
this.textval="小明";
this.show2=true;
} */
myclick(){
this.myval="小明";
this.show2=true;
},
myclick2(){
console.log(this.myval);
console.log(this.textval2);
}
}
})
</script>
</html>
3.axios
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
</head>
<body>
<div id="base">
<select v-model="prov" @change="showProv">
<option value="999" disabled>------请选贼-------</option>
<option v-for="provop in provops" :value="provop.areaId">{{provop.areaName}}</option>
</select>
</div>
</body>
<script>
var myvue = new Vue({//viewModel
el:"#base",//vue监控的范围
data:{ //数据模板 json格式 model
prov:"999",
provops:[],
myuser:{
username:"abc",
userpwd:"abc123"
}
},
methods:{
showProv(){
console.log(this.prov);
window.Qs.stringify(this.myuser);
}
},
created(){
//发ajax请求
axios.post("http://localhost:8080/day6/area", window.Qs.stringify({"pid":0}))
//同源策略 CORS
//http:// localhost : 8080
//域检请求 method=option
//跨域时 服务器需要设置响应头 让浏览器不阻止跨域请求数据
/* 允许跨域的主机地址 */
// resp.setHeader("Access-Control-Allow-Origin", "*");
/* 允许跨域的请求方法GET, POST, HEAD 等 */
// resp.setHeader("Access-Control-Allow-Methods", "*");
/* 重新预检验跨域的缓存时间 (s) */
// resp.setHeader("Access-Control-Max-Age", "3600");
/* 允许跨域的请求头 */
// resp.setHeader("Access-Control-Allow-Headers", "*");
/* 是否携带cookie */
// resp.setHeader("Access-Control-Allow-Credentials", "true");
.then(response =>{
this.provops = response.data.data;
})
.catch(function(err){
console.log(err)
})
}
})
</script>
</html>
4.element 简单实用
- 登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
.mycls{
margin: 260px auto;
}
.el-input{
width: 80%;
}
</style>
</head>
<body>
<div id="base">
<el-card class="box-card mycls">
<div slot="header" class="clearfix">
<span>登录</span>
</div>
<div class="text item">
<!-- 给组件起引用名称 可以通过$refs找到组件 -->
<el-form ref="loginForm" :rules="rules" :model="form" label-width="80px" hide-required-asterisk>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" suffix-icon="el-icon-s-custom"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="mysubmit">登录</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</body>
<script>
var Main = {
data () {
return {
form: {
username: '',
password: ''
},
rules: {
password: [
{ required: true, message: '请输密码', trigger: 'blur' },
{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
]
}
};
},
methods:{
mysubmit(){
this.$refs["loginForm"].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm() {
this.$refs["loginForm"].resetFields();
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#base')
</script>
</html>
- 主菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
<style>
html,body{
margin: 0px;
}
html,body,#base{
height: 100%;
}
.el-container{
height: 100%;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
</head>
<body>
<div id="base">
<el-container>
<el-header>一个漂亮的logo xxx管理系统</el-header>
<el-container>
<el-aside width="200px">
<el-row class="tac">
<el-col :span="24">
<el-menu
default-active="2-2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu v-for="menu in mymenus" :index="menu.menuid">
<template slot="title">
<i :class="menu.menuicon"></i>
<span>{{menu.menuname}}</span>
</template>
<el-menu-item v-for="subm in menu.submenu" :index="subm.menuid">
{{subm.menuname}}
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>欢迎你回来 这是你的工作台</el-main>
</el-container>
</el-container>
</div>
</body>
<script>
var Main = {
data () {
return {
mymenus:[{menuid:"1",menuname:"系统管理",menuicon:"el-icon-setting",submenu:[
{menuid:"1-1",menuname:"系统参数"},
{menuid:"1-2",menuname:"用户管理"}
]},
{menuid:"2",menuname:"订单管理",menuicon:"el-icon-location",submenu:[
{menuid:"2-1",menuname:"订单操作"},
{menuid:"2-2",menuname:"订单报表"}
]
}
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#base')
</script>
</html>
关于element ui的使用可以直接到官网查看相关组件进行使用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
