VUE
VUE
vue是很重要的，多敲多练习
MVVM开发模式，VUE采用的就是MVVM，记住数据和页面是分离的，我们的数据发生改变，页面会跟着改变。
element地址: https://element.eleme.cn/
vue快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue入门</title>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.准备一个区域，让vue进行管 -->
<div id="app">
{{msg}}
</div>
<!-- 3.创建vue对象，接管app区域 -->
<script>
new Vue({
el: "#app", //让vue去接管id值位ap的标签
//data里边写的是定义的数据
data: {
msg: "hello vue"
}
})
</script>
</body>
</html>
vue指令
v-bind指令
操作方法：
** v-bind =》绑定属性的
需要定义好对应的变量
我们需要在设置变量的属性上 v-bind可以写为 v-bind:属性=‘变量名’
v-bind:属性=‘变量名’ 可以简写为 :属性=‘变量名’**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind =》绑定属性的
需要定义好对应的变量
我们需要在设置变量的属性上 v-bind可以写为 v-bind:属性='变量名'
v-bind:属性='变量名' 可以简写为 :属性='变量名'
-->
<a v-bind:href="websit"> 点我访问网页</a>
<font v-bind:color="ys">这是一段内容</font>
<hr>
<img :src="imgPath" >//v-bond简写模式
</div>
<script>
new Vue({
el:'#app',
data:{
websit:'https://www.baidu.com',
ys:'green',
imgPath:'https://img1.baidu.com/it/u=3663508195,2907650417&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689354000&t=57d2197e11e6fc099a7007e11b4cf442'
}
})
</script>
</body>
</html>
v-if和v-show、v-if-else-if
v-if和v-show都可以控制标签的隐藏和现实
v-if是根据结果来决定是否渲染标签
v-show是通过display样式来决定标签是否显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if用来判断的
符合条件的会显示
不符合条件的不会出现(渲染)
-->
<span v-if="score > 90">
成绩优秀
</span>
<span v-else-if="score>70">
成绩中等
</span>
<span v-else>
成绩垃圾
</span>
</div>
<script>
new Vue({
el: '#app',//让vue去接管，id值是app的而标签
data: {
score:75
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if和v-show都可以控制标签的隐藏和现实
v-if是根据结果来决定是否渲染标签
v-show是通过display样式来决定标签是否显示 -->
<span v-show="flag">
成绩优秀
</span>
</div>
<script>
new Vue({
el:'#app',
data:{
flag:false
}
})
</script>
</body>
</html>
v-html和v-text
v-html是不带标签进去
v-text是带标签进去。把解耦合的内容直接打印处理啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- innerHTML 加载属性上的 -->
<div v-html="content"></div>
<!-- innerText加在属性上的
说白了和{{content}}展示的效果是一样的 -->
<div v-text="content"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
content:'<b>aaa</b>'
}
})
</script>
</body>
</html>
v-on
显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 任务需求
点击按钮在div中显示了内容
v-on:事件='函数名'可以简写位@事件
-->
<button v-on:click="showContent">点我</button>
<button @click="showContent">点我隐藏</button>
<div v-html="content"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
content: ""
},
//在methods中写函数名
methods:{
showContent(){
this.content ='点击div在按钮点击显示内容'
}
}
})
</script>
</body>
</html>
v-for
** v-for遍历 item in 数组 ==》 表示数组中的每个元素**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<dir id="app">
<div v-for="item in arr">
<!-- v-for遍历
item in 数组 ==》 表示数组中的每个元素
-->
{{item}}
</div>
</dir>
<script>
new Vue({
el: '#app',
data: {
//数据
arr: ['aaa', 'bbb', 'ccc']
},
methods: {
//函数
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<table width="600px" height="300px" align="center" border=".5px"><tr>
<th>id</th>
<th>名字</th>
<th>年龄</th>
<th> 性别</th>
</tr>
<tr v-for="stu in stuList" align="center">
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td v-html="stu.age"></td>
<td>{{stu.gender == 1?"男":'女'}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
stuList:[
{'id':1,'name':'张三','age':18,"gender":1},
{'id':2,'name':'李四','age':20,"gender":0},
{'id':3,'name':'王五','age':22,"gender":0},
{'id':4,'name':'赵六','age':24,"gender":1}
]
},
methods: {
}
})
</script>
</body>
</html>
v-model
**作用：表单的双向绑定（只能用在表单上） **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model
作用：表单的双向绑定（只能用在表单上）
-->
<input type="text" v-model="username"><br>
<input type="password" v-model="password"><br>
<button @click="login">点我登陆</button>
</table>
</div>
<!-- 初始化vue -->
<script>
new Vue({
el: '#app',
data: {
username: 'tom',//此时我们的username记录的表单框输入的内容
password: '123456'
},
methods: {
//函数
login() {
alert(this.username +"========"+this.password)
}
}
})
</script>
</body>
</html>
vue的声明周期
创建前
创建后created(){} =>windows.οnlοad=function(){}
挂载前
挂载后mounted(){} =>windows.οnlοad=function(){}
更新前
更新后
销毁前
销毁后
created 和mounted选择一个用来就可以
这类方法我们成为钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--
创建前
创建后created(){} =>windows.οnlοad=function(){}
挂载前
挂载后mounted(){} =>windows.οnlοad=function(){}
更新前
更新后
销毁前
销毁后
created 和mounted选择一个用来就可以
这类方法我们成为钩子函数
-->
{{msg}}
</div>
<!-- 初始化vue -->
<script>
new Vue({
el: '#app',
data: {
msg:'hello,vue'
},
created(){
//函数
alert('1')
},mounted(){
alert(2)
}
})
</script>
</body>
</html>
在div中写{{}}两个花括号，花括号里边可以填写new vue对象的data数据的属性。也可以使用三元方法
VUE-element
网站：
@表示函数
：表示数据
vue-element入门
- 引入vue-element
引入element-ui
2. 创建区域给VUE接管
3. 初始化vue接管app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<!--1. 引入vue -->
<script src="./js/vue.js"></script>
<!-- 引入element-ui -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<!--2. 创建区域给VUE接管 -->
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
<!--3. 初始化vue接管app -->
<script>
new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
</html>
vue-element表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<!--1. 引入vue -->
<script src="./js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<!--2. 创建区域给VUE接管 -->
<div id="app">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="id" label="id" width="200">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="gender" label="性别" width="180">
<template slot-scope="scope">
{{scope.row.gender == 1 ? "男":"女"}}
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--3. 初始化vue接管app -->
<script>
new Vue({
el: '#app',
data: {
tableData: [{
id: 1001,
date: '2016-05-02',
name: '王小虎',
gender: 1,
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 1002,
date: '2016-05-04',
name: '王小虎',
gender: 1,
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 1003,
date: '2016-05-01',
name: '王小虎',
gender: 0,
address: '上海市普陀区金沙江路 1519 弄'
}]
},
methods: {
handleEdit(index,row){
console.log(index+'=====================')
console.log(row)
},
handleDelete(id){
alert('要删除的数据是==》'+id)
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<!--1. 引入vue -->
<script src="./js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<!--2. 创建区域给VUE接管 -->
<div id="app">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="id" label="id" width="200" sortable >
</el-table-column>
<el-table-column prop="name" label="班级" width="180" sortable >
</el-table-column>
<el-table-column prop="count" label="班级人数" width="180" sortable >
</el-table-column>
<el-table-column prop="status" label="班级种类" width="180" sortable >
<template slot-scope="scope">
{{scope.row.status == 1 ? "特长班":"普通班"}}
</template>
</el-table-column>
<el-table-column prop="address" label="教室位置" sortable >
</el-table-column>
<el-table-column prop="date" label="开班时间" width="180" sortable >
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row,scope.row.id)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--3. 初始化vue接管app -->
<script>
new Vue({
el: '#app',
data: {
tableData: [{
id: 1001,
date: '2016-05-02',
name: '01班',
count: 50,
status:1,
address: '普利商务中心2楼最东头'
}, {
id: 1002,
date: '2016-05-04',
name: '02班',
count: 50,
status:0,
address: '普利商务中心2楼最西头'
}, {
id: 1003,
date: '2016-05-01',
name: '03班',
count: 50,
status:1,
address: '普利商务中心2楼中间'
}]
},
methods: {
//index => 表示索引
//row => 表示的是当前这一行显示的内容对应的对象
handleEdit(index,row,id){
console.log(index+'=====================')
console.log(index)
alert('正在编辑'+'id是'+row.id +'班级名字为'+row.name+'班级人数是'+row.count+'班级类型是'+row.status+'班级位置是'+row.address+"的数据")
},
handleDelete(id){
alert('要删除的数据是==》'+id)
}
}
})
</script>
</body>
</html>
vue-element表单&弹出框
弹出框和添加数据代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<!--1. 引入vue -->
<script src="./js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<!--2. 创建区域给VUE接管 -->
<div id="app">
<el-button type="danger" @click="dialogVisible = true">点击打开 </el-button>
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<el-form label-position="left" label-width="80px" :model="student">
<el-form-item label="学生姓名">
<el-input v-model="student.name"></el-input>
</el-form-item>
<el-form-item label="学生年龄">
<el-input v-model="student.region"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="student.gender" placeholder='请选择性别'>
<el-option key="1" label="男" value="1"></el-option>
<el-option key="0" label="女" value="0"></el-option>
</el-select >
</el-form-item>
<el-form-item label="学生住址">
<el-input v-model="student.type"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitData">确 定</el-button>
</span>
</el-dialog>
</div>
<!--3. 初始化vue接管app -->
<script>
new Vue({
el: '#app',
data: {
title: "添加数据",
dialogVisible: false,
student: {
name: '',
region: '',
age: '',
type: '',
gender: ''
}
},
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
submitData() {
console.log(this.student)
this.dialogVisible=false
}
}
})
</script>
</body>
</html>
vue降序
降序代码使用的是sortable属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<!--1. 引入vue -->
<script src="./js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<!--2. 创建区域给VUE接管 -->
<div id="app">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="id" label="id" width="200" sortable >
</el-table-column>
<el-table-column prop="name" label="班级" width="180" sortable >
</el-table-column>
<el-table-column prop="count" label="班级人数" width="180" sortable >
</el-table-column>
<el-table-column prop="status" label="班级种类" width="180" sortable >
<template slot-scope="scope">
{{scope.row.status == 1 ? "特长班":"普通班"}}
</template>
</el-table-column>
<el-table-column prop="address" label="教室位置" sortable >
</el-table-column>
<el-table-column prop="date" label="开班时间" width="180" sortable >
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row,scope.row.id)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--3. 初始化vue接管app -->
<script>
new Vue({
el: '#app',
data: {
tableData: [{
id: 1001,
date: '2016-05-02',
name: '01班',
count: 50,
status:1,
address: '普利商务中心2楼最东头'
}, {
id: 1002,
date: '2016-05-04',
name: '02班',
count: 50,
status:0,
address: '普利商务中心2楼最西头'
}, {
id: 1003,
date: '2016-05-01',
name: '03班',
count: 50,
status:1,
address: '普利商务中心2楼中间'
}]
},
methods: {
//index => 表示索引
//row => 表示的是当前这一行显示的内容对应的对象
handleEdit(index,row,id){
console.log(index+'=====================')
console.log(index)
alert('正在编辑'+'id是'+row.id +'班级名字为'+row.name+'班级人数是'+row.count+'班级类型是'+row.status+'班级位置是'+row.address+"的数据")
},
handleDelete(id){
alert('要删除的数据是==》'+id)
}
}
})
</script>
</body>
</html>
vue-elment分页条代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<!--1. 引入vue -->
<script src="../element_code上课代码/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../element_code上课代码/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="../element_code上课代码/element-ui/lib/index.js"></script>
</head>
<body>
<!--2. 创建区域给VUE接管 -->
<div id="app">
<el-form :inline="true" :model="tableData" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="tableData.name" placeholder=""></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="tableData.gender" placeholder="状态">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
<el-form-item label="状态">
<el-select v-model="tableData.status" placeholder="状态">
<el-option label="在读" value="1"></el-option>
<el-option label="毕业" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit(tableData.name)">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="id" label="学生学号" width="200" sortable>
</el-table-column>
<el-table-column prop="name" label="学生姓名" width="180" sortable>
</el-table-column>
<el-table-column prop="age" label="学生年龄" width="180" sortable>
</el-table-column>
<el-table-column prop="gender" label="学生性别" width="180" sortable>
<template slot-scope="scope">
{{scope.row.gender == 1 ? "男":"女"}}
</template>
</el-table-column>
<el-table-column prop="address" label="学生住址" sortable>
</el-table-column>
<el-table-column prop="status" label="学生在校状态" width="180" sortable>
<template slot-scope="scope">
{{scope.row.status == 1 ? "在读":"毕业"}}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- <el-button
size="mini"
@click="handleEdit(scope.$index, scope.row,scope.row.id)">编辑</el-button> -->
<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="10" layout=" prev, pager, next,total" :total="100">
</el-pagination>
</div>
<!--3. 初始化vue接管app -->
<script>
new Vue({
el: '#app',
data: {
tableData: [{
id: 1,
status: 2,
name: '张三',
age: 25,
gender: 1,
address: '山东省济南市'
}, {
id: 2,
status: 1,
name: '李四',
age: 35,
gender: 0,
address: '山东省济南市'
}, {
id: 3,
status: 1,
name: '刘琳',
age: 29,
gender: 1,
address: '山东省济南市'
}, {
id: 4,
status: 2,
name: '老李',
age: 20,
gender: 1,
address: '山东省济南市'
}, {
id: 5,
status: 2,
name: '赵六',
age: 25,
gender: 1,
address: '山东省济南市'
}],
currentPage: 1
},
methods: {
//index => 表示索引
//row => 表示的是当前这一行显示的内容对应的对象
handleEdit(index, row, id) {
console.log(index + '=====================')
console.log(index)
alert('正在编辑' + 'id是' + row.id + '班级名字为' + row.name + '班级人数是' + row.count + '班级类型是' + row
.gender + '班级位置是' + row.address + "的数据")
},
handleDelete(id) {
alert('要删除的数据是==》' + id)
},
handleSizeChange() {
},
handleCurrentChange() {
},
}
})
</script>
</body>
</html>
常用的方法
- 消息提示
- 按钮
- 等等
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
