20230414----重返学习-vue基础-vue表单-element-ui
day-049-forty-nine-20230414-vue基础-vue表单-element-ui
vue基础
基础指令
-
v-on: 绑定事件
- 简写@
- 传参 后面加小括号
- event事件对象
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>ontitle> head> <body> <div id="app"> <button v-on:click="showa">全称v-on:点击-无括号button> <button v-on:click="showa()">全称v-on:点击-有括号button> <button v-on:click="showa(10,20,$event)">全称v-on:点击-有括号-有传参button> <button @click="showa">简写@点击-无括号-默认第一个入参为vue包装后事件对象button> <button @click="showa()">简写@点击-有括号-无传参button> <button @click="showb(10,20)">简写@点击-有括号-有传参-无事件对象button> <button @click="showc(10,20,$event)">简写@点击-有括号-有传参-有vue包装后事件对象button> div> body> html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> <script> let vm = new Vue({ el: "#app", methods: { showa(event) { console.log(`showa无括号: -->`, event); }, showb(n, m = 10,event) { console.log(`showb有括号-无事件对象: -->`, n, m,event); }, showc(n, m = 10,event) { console.log(`showc有括号-有vue包装后事件对象: -->`, n, m,event); }, }, }); script> -
v-model 组件元素值
修饰符
事件修饰符
一般得要配合事件后方中使用才能触发。
- @事件名.stop 阻止事件冒泡
- @事件名.prevent 阻止事件默认行为
- @事件名.capture 捕获阶段执行事件（由外向里）
- @事件名.once 事件只触发1次
- @事件名.passive 不阻止事件默认行为，这个实际上就类似于不写，不写也不阻止
- @事件名.self 只是触发自己，不包含子元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ontitle>
<style>
* {
margin: 0;
padding: 0;
}
.divbox {
height: 300px;
width: 300px;
background-color: aquamarine;
}
.pbox {
height: 200px;
width: 200px;
background-color: pink;
}
.spanbox {
display: inline-block;
height: 100px;
width: 100px;
background-color: blue;
}
style>
head>
<body>
<div id="app">
<div class="divbox" @click="divshow">
<p class="pbox" @click="pshow">
<span class="spanbox" @click="spanshow">正常事件冒泡span>
p>
div>
<h1 @contextmenu.prevent="showa">阻止事件默认行为h1>
<div class="divbox" @click.stop="divshow">
<p class="pbox" @click.stop="pshow">
<span class="spanbox" @click.stop="spanshow">阻止事件冒泡span>
p>
div>
<h1 @contextmenu.once="showa">事件只触发1次h1>
<div class="divbox" @click.capture="divshow">
<p class="pbox" @click.capture="pshow">
<span class="spanbox" @click.capture="spanshow">
捕获阶段执行事件
span>
p>
div>
<h1 @contextmenu.passive="showa">
不阻止事件默认行为，这个实际上就类似于不写，不写也不阻止
h1>
<h1 @click.self="showb">
只是触发自己-不包含子元素
<span>子元素span>
<i>子元素i>
h1>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
let vm = new Vue({
el: "#app",
methods: {
divshow() {
console.log("div");
},
pshow() {
console.log("p");
},
spanshow() {
console.log("span");
},
showa() {
console.log("右键单击出菜单");
},
showb() {
console.log("33333");
},
},
});
script>
按键修饰符
得在表单元素中使用keydown这类事件才能触发。
按键别名修饰符
- .enter：回车键
- .tab：制表键
- .delete：含delete和backspace键
- .esc：返回键
- .space: 空格键
- .up：向上键
- .down：向下键
- .left：向左键
- .right：向右键
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" @keydown="showa" />
<input type="text" @keydown.enter="showb" />
div>
<script>
Vue.config.keyCodes.one = 49;
var vm = new Vue({
el: "#app",
methods: {
showa(e) {
console.log("任意按钮都行", e.keyCode);
},
showb(e) {
console.log("回车", e.keyCode);
}
},
});
script>
body>
html>
字母修饰符
- 直接写字母就表示只有由该字母触发对应事件才会调用绑定好的对应函数方法。
- 单个字母
- .a 只有由字母a触发才会调用
- 多个字母链式调用
- .a.b.c 在a或b或c任意中的一个都会触发对应的函数方法
- 如@keydown.a.b.c=“showa” 按a或b或c任意中的一个都会触发this.showa()
- .a.b.c 在a或b或c任意中的一个都会触发对应的函数方法
- 单个字母
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" @keydown="showa" />
<input type="text" @keydown.enter="showb" />
<input type="text" @keydown.c="showc" />
<input type="text" @keydown.one="showd" />
<input type="text" @keydown.more="showe" />
div>
<script>
Vue.config.keyCodes.one = 49;
Vue.config.keyCodes.more = [49,50,51];
var vm = new Vue({
el: "#app",
methods: {
showa(e) {
console.log("任意按钮都行", e.keyCode);
},
showb(e) {
console.log("回车", e.keyCode);
},
showc(e) {
console.log("小写字母c", e.keyCode);
},
showd(e) {
console.log("自定义配置-one的key值为49，字母区的1", e.keyCode);
},
showe(e) {
console.log("自定义配置-one的key值为[49,50,51]，字母区的[1,2,3]中的任意都可以", e.keyCode);
},
},
});
script>
body>
html>
- 直接写数字不可以
-
如@keydown.1=“showa” 就不能按下1时触发this.showa()
-
但可以自己配置
Vue.config.keyCodes.XXX = 键码号;
-
鼠标修饰符
一般得配合鼠标事件来用，如click事件。
- .left：鼠标左键
- .middle：鼠标中间滚轮
- .right：鼠标右键
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<button @click.right="showa">右键点击-默认事件button>
<button @click.prevent.right="showa">右键点击-移除默认事件button>
div>
<script>
var vm = new Vue({
el: "#app",
methods: {
showa() {
console.log("showa");
},
},
});
script>
body>
html>
系统修饰键
-
一般得在表单元素中使用keydown这类事件配合按键修饰符来使用。
- .ctrl
- 如.ctrl.67 按键编码67–>c，同时按下ctrl键及c键就会触发
- .alt
- .shift
- .meta 键盘键，即徽标键
- .ctrl
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" @keydown.ctrl.67="showa" />
<input type="text" @keydown.ctrl.c="showa" />
div>
<script>
Vue.config.keyCodes.one = 49;
var vm = new Vue({
el: "#app",
methods: {
showa() {
console.log("ctrl.c");
},
},
});
script>
body>
html>
选项卡练习
- 思路
- 搭建好HTML骨架及css样式。
- 确定HTML中可以循环的部分，在vue实例的配置对象中的data响应式数据对象的配置中设置对应的属性名。
- 对HTML骨架中可以循环的部分改写成vue模板，使用v-for及v-if及v-bind之类的指令。
- 给HTML添加事件，动态修改vue实例对象的data。
- 核心：使用tabArr循环出来html结构。使用indexActive控制当前显示的地方。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 300px;
overflow: hidden;
background-color: aquamarine;
display: flex;
}
li {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
list-style: none;
}
li.active {
background-color: aqua;
}
#app div {
display: none;
width: 300px;
height: 300px;
background-color: aqua;
}
#app div.active {
display: block;
}
style>
head>
<body>
<div id="app">
<ul>
<li
v-for="(item,index) in tabArr"
:key="item.title"
:class="indexActive==index?'active':''"
@click="tab(index)"
>
{{item.title}}
li>
ul>
<div
v-for="(item,index) in tabArr"
:key="item.content"
:class="indexActive==index?'active':''"
>
{{item.content}}
div>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
tabArr: [
{
title: "标题一",
content: "111111111111",
},
{
title: "标题二",
content: "222222222222",
},
{
title: "标题三",
content: "333333333333",
},
],
indexActive: 0, //默认激活0
},
methods: {
tab(i) {
this.indexActive = i;
},
},
});
script>
body>
html>
template标签
- template创建空标签，不会在页面上渲染。可以用来提高性能。
- 页面上只有template标签内部的html结构或文本
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
head>
<body>
<div id="app">
<template> 页面上只有template标签内部的html结构或文本 template>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
let vm = new Vue({
el: "#app",
});
script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
head>
<body>
<div id="app">
<template>
页面上只有template标签内部的文本或
<div>html结构div>
template>
<template v-if="false"> v-if为false template>
<template v-if="true"> v-if为true template>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
let vm = new Vue({
el: "#app",
});
script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
head>
<body>
<div id="app">
<template v-if="flag">
1页面上只有template标签内部的文本或
<div>html结构div>
template>
<template v-if="!flag">
2页面上只有template标签内部的文本或
<div>html结构div>
template>
<button @click="toggle()">切换button>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
let vm = new Vue({
el: "#app",
data: {
flag: false,
},
methods: {
toggle() {
this.flag = !this.flag;
},
},
});
script>
v-if与v-for配合
- v-if与v-for一起使用，v-for的优先级高于v-if
-
步骤：
- 先创建7个div
- 在不满足v-if条件时删除对应的div
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> head> <body> <div id="app"> <div v-for="item in arr" v-if="item>3">{{item}}div> div> <script> var vm = new Vue({ el: "#app", data: { arr: [1, 2, 3, 4, 5, 6, 7], }, }); script> body> html> -
解决方法
- 配合template标签上使用
-
template 创建空标签，不会在页面上渲染它内部的标签
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> head> <body> <div id="app"> <template v-for="item in arr"> <div v-if="item>3">{{item}}div> template> div> <script> var vm = new Vue({ el: "#app", data: { arr: [1, 2, 3, 4, 5, 6, 7], }, }); script> body> html>
-
- 配合template标签上使用
-
vue表单
与v-model配合
- 表单元素中的v-model中对应的表单元素的属性
-
value类型
-
input[text] 标签上的value属性值
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> head> <body> <div id="app"> <input type="text" v-model="inp" /> <h1>{{inp}}h1> div> <script> var vm = new Vue({ el: "#app", data: { inp: "", //value--字符串 }, }); script> body> html> -
input[password] 标签上的value属性值
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> head> <body> <div id="app"> <input type="password" v-model="inp" /> <h1>{{inp}}h1> div> <script> var vm = new Vue({ el: "#app", data: { inp: "", //value--字符串 }, }); script> body> html> -
textarea 标签上的value属性值
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> head> <body> <div id="app"> <textarea cols="30" rows="10" v-model="inp">textarea> <h1>{{inp}}h1> div> <script> var vm = new Vue({ el: "#app", data: { inp: "", //value--字符串 }, }); script> body> html>
-
-
选中状态类型
- input[checkbox]
- 单个标签 单个标签的选中状态
- 多个标签 同一组标签的选中状态
- 单个标签中每个标签必定要写value属性及value属性值
- input[radio]
- 单个标签 单个标签的选中状态
- 多个标签 同一组标签的选中状态
- 单个标签中每个标签必定要写value属性及value属性值
- select标签，内部要有option标签
- 单选状态 选中的option标签值
- 多选状态 同一组select标签内的option标签值的集合，按ctrl再点击才能多选
- option标签可以不写value属性,不写就取option中间的内容，写了就取value属性值
- input[checkbox]
-
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="inp" />
<h1>{{inp}}h1>
<textarea cols="30" rows="10" v-model="inp">textarea>
<br />
<input type="checkbox" id="aa" v-model="flag" />
<label for="aa">AA--{{flag}}label>
<br />
<input type="checkbox" id="one" value="a" v-model="arrA" />
<label for="one">ONElabel>
<input type="checkbox" id="two" value="b" v-model="arrA" />
<label for="two">TWOlabel>
<input type="checkbox" id="three" value="c" v-model="arrA" />
<label for="three">THREElabel>
<h1>{{arrA}}h1>
<br />
<input type="radio" name="sex" id="man" value="man1" v-model="sexStr" />
<label for="man">男label>
<input
type="radio"
name="sex"
id="woman"
value="woman1"
v-model="sexStr"
/>
<label for="woman">女label>
<h1>{{sexStr}}h1>
<br />
<select v-model="selecteda" multiple>
<option value="a">Aoption>
<option value="b">Boption>
<option value="c">Coption>
<option value="d">Doption>
select>
<h1>{{selecteda}}h1>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
inp: "", //value--字符串
flag: true, //单个选中状态---布尔
arrA: [], //多选---数组
sexStr: "man1", //单选---字符串
selecteda: [], //下拉列表 多选--数组 单选---字符串
},
});
script>
body>
html>
配合select标签v-for
表单修饰符
- 一般与表单元素中的v-model配合一起使用
- .number : 将表单中value的字符串格式转化为数值
- .lazy : 值改变+失去焦点 —> 同步数据
- .trim : 去掉前后空格
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model.trim="inp" @keydown="show" />
<h1>{{inp}}h1>
<select v-model="selecteda">
<option>--请选择--option>
<option v-for="item in options" :key="item.value" :value="item.value">
{{item.text}}
option>
select>
<h1>{{selecteda}}h1>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
inp: "",
selecteda: "",
options: [
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" },
],
},
methods: {
show() {
// console.log(typeof this.inp);
console.log(this.inp.length);
},
},
});
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model.lazy="theInput01" @keydown="showa" />
<h1>{{theInput01}}h1>
<input type="text" v-model.trim="theInput02" @keydown="showb" />
<h1>{{theInput02}}h1>
<select v-model="selecteda">
<option>--请选择--option>
<option v-for="item in options" :key="item.value" :value="item.value">
{{item.text}}
option>
select>
<h1>{{selecteda}}h1>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
theInput01: "",
theInput02: "",
selecteda: "",
options: [
{ text: "One", value: "A" },
{ text: "Two", value: "B" },
{ text: "Three", value: "C" },
],
},
methods: {
showa() {
console.log(typeof this.theInput01, this.theInput01, this.theInput01.length);
},
showb() {
console.log(typeof this.theInput02, this.theInput02, this.theInput02.length);
},
},
});
script>
body>
html>
element-ui
- 引入对应css与js。js代码要放在vue.js后面。
- 看组件库文档使用，并复制粘贴。
- 把文档中template标签内的vue标签元素放到html中vue实例组件中el属性对应的DOM元素内部。
- 把文档中script标签内但在
export default {}外部的代码放到html中vue实例配置外。 - 把文档中
data() {return {};}中return {}对象内的数据放到html中vue实例配置中的data: {}内。 - 把文档中
methods: {}的方法放到html中vue实例配置中的methods: {}内。
- 在html中修改对应的数据及方法，细调。
-
示例
-
文档的样式，vue单文件组件
全选 {{city}} -
修改成html中的文件
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> head> <body> <div id="app"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选el-checkbox > <div style="margin: 15px 0">div> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" > <el-checkbox v-for="city in cities" :label="city" :key="city" >{{city}}el-checkbox > el-checkbox-group> div> body> html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> <script src="https://unpkg.com/element-ui/lib/index.js">script> <script> const cityOptions = ["上海", "北京", "广州", "深圳"]; let vm = new Vue({ el: "#app", data: { checkAll: false, checkedCities: ["上海", "北京"], cities: cityOptions, isIndeterminate: true, }, methods: { handleCheckAllChange(val) { this.checkedCities = val ? cityOptions : []; this.isIndeterminate = false; }, handleCheckedCitiesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; }, }, }); //来源 //1. [el-checkbox](https://element.eleme.cn/#/zh-CN/component/checkbox#indeterminate-zhuang-tai) script>
-
-
其它示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style>
#app {
width: 400px;
}
style>
head>
<body>
<div id="app">
<h1>珠峰h1>
<el-input v-model="input" placeholder="请输入内容">el-input>
<el-radio v-model="radio" label="man">男el-radio>
<el-radio v-model="radio" label="woman">女el-radio>
<br />
<h1>选择课程h1>
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>
全选
el-checkbox>
<div style="margin: 15px 0">div>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox v-for="city in cities" :label="city" :key="city">
{{city}}
el-checkbox>
el-checkbox-group>
<h1>美食h1>
<el-select v-model="selectValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
el-option>
el-select>
<br />
<br>
<el-button type="primary" @click="handerGet">提交el-button>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/element-ui/lib/index.js">script>
<script>
const cityOptions = ["html", "css", "js"];
let vm = new Vue({
el: "#app",
data: {
input: "",
radio: "man",
checkAll: false, //是否全选
checkedCities: ["html", "css"], //默认选择
cities: cityOptions, //循环的数据
isIndeterminate: true,
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
selectValue: "",
},
methods: {
//全等与全不选方法
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
//单个选择
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cities.length;
},
handerGet() {
let obj = {
姓名: this.input,
性别: this.radio,
选择课程: this.checkedCities,
美食: this.selectValue,
};
console.log(`obj-->`, obj);
},
},
});
//来源
//1. [el-input基础用法](https://element.eleme.cn/#/zh-CN/component/input#ji-chu-yong-fa)
//2. [el-radio基础用法](https://element.eleme.cn/#/zh-CN/component/radio#ji-chu-yong-fa)
//3. [el-checkbox](https://element.eleme.cn/#/zh-CN/component/checkbox#indeterminate-zhuang-tai)
//4. [el-select基础用法](https://element.eleme.cn/#/zh-CN/component/select#ji-chu-yong-fa)
//5. [el-button基础用法](https://element.eleme.cn/#/zh-CN/component/button#ji-chu-yong-fa)
script>
进阶参考
- element-ui安装