vue基础指令
01：v-html / v-text文本指令：v-html / v-text 和插值表达式，名字也必须定义在data中。02：v-on事件指令：v-on:click=”事件名”，缩写：[@click](https://github.com/click)=”事件名”，注：事件名定义在：methods中03：v-bind属性指令：v-bind:属性名=”data的key” 缩写 : 属性名=”data
·
目录
10、槽指令：v-slot(后续自定义组件使用，自定义代码块的机制)（暂时忽略）
前端知识：label妙用
label和form元素的化学反应
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-多行入框.html</title>
</head>
<body>
<div id="app">
<p><label for="username">用户名：</label><input type="text" id="username"></p>
<p><label>用户名：<input type="text" id="username2"></label></p>
<hr>
<p><label><input type="checkbox" name="hobbys" value="1">篮球</label></p>
<p><label><input type="checkbox" name="hobbys" value="2">足球</label></p>
<p><label><input type="checkbox" name="hobbys" value="3">羽毛球</label></p>
<p><input type="checkbox" name="hobbys" id="hobbys1" value="1"><label for="hobbys1">篮球</label></p>
<p><input type="checkbox" name="hobbys" id="hobbys2" value="2"><label for="hobbys2">足球</label></p>
<p><input type="checkbox" name="hobbys" id="hobbys3" value="3"><label for="hobbys3">羽毛球</label></p>
<hr>
<p><label><input type="radio" name="gender" value="0">女</label></p>
<p><label><input type="radio" name="gender" value="1">男</label></p>
<p><label><input type="radio" name="gender" value="2">保密</label></p>
<hr>
<p><input type="radio" name="gender" id="gender0" value="0"><label for="gender0">女</label></p>
<p><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label></p>
<p><input type="radio" name="gender" id="gender2" value="2"><label for="gender2">保密</label></p>
</div>
</body>
</html>被label包裹或者用for指定元素，可以直接选中文件进行焦点的获取。
-
所以在开发中为什么前端都喜欢用label标签去包裹form元素，就是因为有这样的化学反应。
-
同时也告诉一个道理，如果要增强用户体验，在未来的开发中，尽量用label去包裹元素。
复选框
格式
<div id="app">
<p><input type="checkbox" v-model="hobbys" value="篮球" id="hobbys1"><label for="hobbys1">篮球</label></p>
<p><input type="checkbox" v-model="hobbys" value="足球" id="hobbys2"><label for="hobbys2">足球</label></p>
<p><input type="checkbox" v-model="hobbys" value="羽毛球" id="hobbys3" ><label for="hobbys3">羽毛球</label></p>
<p>你选择的元素是：{{hobbys}}</p>
</div><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-checkbox复选框.html</title>
</head>
<body>
<div id="app">
<p><input type="checkbox" v-model="hobbys" value="篮球" id="hobbys1"><label for="hobbys1">篮球</label></p>
<p><input type="checkbox" v-model="hobbys" value="足球" id="hobbys2"><label for="hobbys2">足球</label></p>
<p><input type="checkbox" v-model="hobbys" value="羽毛球" id="hobbys3"><label for="hobbys3">羽毛球</label></p>
<p>你选择的元素是：{{hobbys}}</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
hobbys:[]
}
},
methods:{
loginbtn(){
var intro = this.intro;
alert("你获取的内容是:" + intro)
}
}
}).mount("#app");
</script>
</body>
</html>回填数据
如果你要回调数据的话，直接改变hobbys数组即可
data() {
return {
hobbys:["篮球","羽毛球"]
}
},
获取value和文本
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-checkbox复选框.html</title>
</head>
<body>
<div id="app">
<p v-for="(item,index) in hobbysArr" :key="item.id"><input type="checkbox" v-model="hobbys" v-bind:value="item" :id="'hobbys'+index"><label :for="'hobbys'+index">{{item.name}}</label></p>
<p>你选择的元素是：{{hobbys}}</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
hobbys:[],
hobbysArr:[
{id:1,name:"篮球1"},
{id:2,name:"篮球2"},
{id:3,name:"篮球3"}
]
}
},
methods:{
loginbtn(){
var intro = this.intro;
alert("你获取的内容是:" + intro)
}
}
}).mount("#app");
</script>
</body>
</html>如果你data模型中数据值和value一致，checked会自动选中。
单选框
格式
<form action="" id="form"> <p><input type="radio" value="男" name="gender"><label>男</label></p> <p><input type="radio" value="女" name="gender" checked><label>女</label></p> <p><input type="radio" value="保密" name="gender" ><label>保密</label></p> </form>
javascipt获取值的方式
# 获取所有
var formdom = document.getElementById("form");
var genderArr = formdom.gender;
var arr = [];
for(var i=0;i<genderArr.length;i++){
arr.push(genderArr[i].value);
}
alert(arr)
# 选中的取出来
var formdom = document.getElementById("form");
var genderArr = formdom.gender;
var arr = [];
for(var i=0;i<genderArr.length;i++){
if(genderArr[i].checked){
arr.push(genderArr[i].value);
}
}
alert(arr[0])
jQuery写法获取值的方式
# 所有，不管选中不选中
var gender = $("input[type='radio'][name='gender']").val();
# 获取选中的
var gender = $("input[type='radio'][name='gender']:checked").val();
var gendertext = $("input[type='radio'][name='gender']:checked").next().text();
vue获取的的写法--直接获取
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-radio单选框.html</title>
</head>
<body>
<div id="app">
<p><input type="radio" v-model="gender" value="男" id="male"><label for="male">男</label></p>
<p><input type="radio" v-model="gender" value="女" id="female"><label for="female">女</label></p>
<p><input type="radio" v-model="gender" value="保密" id="baomi" ><label for="baomi">保密</label></p>
<p>你选择的元素是：{{gender}}</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
gender:""
}
},
methods:{
loginbtn(){
var intro = this.gender;
alert("性别是:" + gender)
}
}
}).mount("#app");
</script>
</body>
</html>获取value和文本
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-radio单选框-02.html</title>
</head>
<body>
<div id="app">
<p><input type="radio" v-model="gender" :value="genderArr[0]" id="male"><label for="male">男</label></p>
<p><input type="radio" v-model="gender" :value="genderArr[1]" id="female"><label for="female">女</label></p>
<p><input type="radio" v-model="gender" :value="genderArr[2]" id="baomi" ><label for="baomi">保密</label></p>
<p>你选择的元素是：{{gender.gender}}，{{gender.name}}</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
gender:"",
genderArr:[{id:1,gender:1,name:"男"},{id:2,gender:0,name:"女"},{id:3,gender:2,name:"保密"}]
}
},
methods:{
loginbtn(){
var intro = this.gender;
alert("性别是:" + gender)
}
}
}).mount("#app");
</script>
</body>
</html>默认规则
如果你data模型中数据的值和value一致，checked会自动选中。
select框
注意事项
-
如果select的option的value不指定，那么value等text。建议大家不要搞迷惑行为。
-
value和text不一致的情况下
格式
<select id="education" οnchange="changeEducation(this)"> <option value="">--请选择学历--</option> <option value="1">小学</option> <option value="2">初中</option> <option value="3">高中</option> <option value="4">本科</option> <option value="5">硕士</option> <option value="6">博士</option> </select>
javascipt获取值的方式
function changeEducation(obj){
// 1:获取 select元素本身
var selectDom = obj; // document.getElementById("education");
// 2: 获取选中的options的索引
var selectIndex = selectDom.selectedIndex;
// 3: 根据索引找到select中索引为selectedIndex的option
var optionDom = selectDom.children[selectIndex]; // selectDom.options[selectIndex];
alert(optionDom.value +"==="+optionDom.text)
}
jQuery写法获取值的方式
## 获取value
var education = $("#education").val();
var education = $("#education").find("option:selected").val();
## 获取文本
var educationtext = $("#education").find("option:selected").text();
vue获取的的写法--直接获取
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-select元素.html</title>
</head>
<body>
<div id="app">
<h3>单选选择框</h3>
<select v-model="education">
<option value="">---请选择学历---</option>
<option v-for="(option,index) in options" v-bind:value="option">{{option.atxt}}</option>
</select>
<p>你获取的学历是：{{education.aval}} == {{education.atxt}}</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created() {
},
data() {
return {
education: "",
options:[
{aval:1,atxt:"小学"},
{aval:2,atxt:"初中"},
{aval:3,atxt:"高中"},
{aval:4,atxt:"本科"},
{aval:5,atxt:"硕士"},
{aval:6,atxt:"博士"}
]
}
},
methods: {
}
}).mount("#app");
</script>
</body>
</html>
00：单输入框与多行输入
单行输入
<input type="text" id="username">javascript获取值：var username = document.getElmentById("username").value;
jquery获取值：var username = $("#username").val();
vue直接获取：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model.html</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<h1>你输入的值是：{{username}}</h1>
<button @click="loginbtn">登录</button>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
username:""
}
},
methods:{
loginbtn(){
var username = this.username;
alert("你登录的用户是===>" + username)
}
}
}).mount("#app");
</script>
</body>
</html>多行输入
<textarea id="intro"></textarea>
javascript方式：
var intro = document.getElmentById("intro").value;
jquery方式：
var intro = $("#intro").val();
vue方式：
<textarea id="intro" v-model="intro"></textarea>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model-多行入框.html</title>
</head>
<body>
<div id="app">
<textarea v-model.lazy.trim.number="intro" style="height: 200px;width: 400px;resize:none;"></textarea>
<h1>你输入的字符长度是：{{intro.length}}</h1>
<button @click="loginbtn">登录</button>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
intro:"你好"
}
},
methods:{
loginbtn(){
var intro = this.intro;
alert("你获取的内容是:" + intro)
}
}
}).mount("#app");
</script>
</body>
</html>01：v-html / v-text
文本指令：v-html / v-text 和插值表达式，名字也必须定义在data中。
02：v-on
事件指令：v-on:click=”事件名”，缩写：[@click](https://github.com/click)=”事件名”，注：事件名定义在：methods中
03：v-bind
属性指令：v-bind:属性名=”data的key” 缩写 : 属性名=”data的key” .注意动静拼接的问题
动静拼接两种写法：
<a :href="'/detail?id='+user.id+'&name='+user.name">点我查看明细</a>
<a :href="`/detail?id=${user.id}&name=${user.name}`">点我查看明细</a>
04：v-model
控制指令：v-model=”data的key”，用于获取form控制元素的值。如果的多余3个建议使用对象去定义和获取
Vue为什么说是：双向数据绑定
就是体现在这个指令上：v-model 因为v-model是唯一一个可以改变视图----改变数据的指令。
v-model的作用范围
v-model指令：只能用在form表元素上( input text,password,checkbox ,radio) ,textarea, select。它可以同步表单的值--比如回填数据，selected，checked选中
除了这些元素意外都不能使用v-model。比如：
<div v-model="username"></div>注意
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。**
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- - text 和 textarea 元素使用 value property 和 input 事件；
- - checkbox 和 radio 使用 checked property 和 change 事件；
- - select 字段将 value 作为 prop 并将 change 作为事件。
案例分析：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model.html</title>
</head>
<body>
<div id="app">
**v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过
JavaScript 在组件的 data 选项中声明初始值。*
<input type="text" @input="inputevent" :value="username">
<input type="text" v-model="username">
<h1>你输入的值是：{{username}}</h1>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
username:"yykk"
}
},
methods:{
inputevent($event){
this.username = $event.target.value;
}
}
}).mount("#app");
</script>
</body>
</html>vue获取的的写法--增强处理
Lazy
默认情况下，vue对输入框textarea,text，默认是采用@input事件，输入就进行替换和渲染。这样造成性能开销和损耗。所以vue就用lazy来解决这个同步实时的问题，讲@input事件转换成@change事件，当用户输入完毕以后，释放焦点时候触发同步：
<div id="app">
<input type="text" v-model.lazy="username">
<h1>你输入的值是：{{username}}</h1>
<button @click="loginbtn">登录</button>
</div>不建议，建议实时同步触发。
trim（重要）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18、表单属性指令-v-model.html</title>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="username">
<h1>你输入的值是：{{username.length}}</h1>
<input type="text" v-model.trim="username2">
<h1>你输入的值是：{{username2.length}}</h1>
<button @click="loginbtn">登录</button>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
username:"",
username2:""
}
},
methods:{
loginbtn(){
var username = this.username;
alert("你登录的用户是===>" + username)
}
}
}).mount("#app");
</script>
</body>
</html>使用.trim会自动剔除左右空格。
number（重要）
提示：不会做校验，
-
如果输入的不是数字，直接输出
-
如果输入的以数字开头+混合其他，就直接输出数字 (parseFloat(number))
-
如果是数字直接输出数字。
var number = "10px";
parseFloat(number)===10
05：v-for
循环指令：v-for =”(obj,index) in data” 中定义数组的名字” 。
<div v-for="(obj,index) in dataArrKey" :key="obj.id"></div>最好写一下:key索引
数组循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11、属性指令-v-bind.html</title>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<p>{{price}}</p>
<p>{{mark}}</p>
<p>{{date}}</p>
<hr>
<p>{{user.id}} ，{{user.name}}{{user.age}}</p>
<hr>
<div v-for="(obj,index) in friends">{{index}}==={{friends[index].id}}，{{friends[index].name}}，{{friends[index].age}}</div>
<hr>
<div v-for="(obj,index) in friends">{{index}}==={{obj.id}}，{{obj.name}}，{{obj.age}}</div>
</div>
<script src="js/vue.global.js"></script>
<script>
var vue = Vue.createApp({
data(){
return {
title:"学习V-for",
price:1499,
mark:false,
date:new Date(),
user:{
id:1,
name:"小文文",
age:20
},
friends:[
{id:1,name:"飞哥1",age:35},
{id:2,name:"飞哥2",age:15},
{id:3,name:"飞哥3",age:13},
{id:4,name:"飞哥4",age:5},
]
}
},
methods:{
}
}).mount("#app");
</script>
</body>
</html>实际应用
-
归档
-
统计
-
分组
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11、属性指令-v-bind.html</title>
</head>
<body>
<div id="app">
<div v-for="(value,key,index) in yingshous">
{{key}}：
<div style="margin-left: 20px;">
<div v-for="(data,index) in value">
<span>{{data.month}}==={{data.money}}</span>
</div>
</div>
</div>
<hr>
<div v-for="(value,key,index) in yingshous">{{key}}：
<div style="margin-left: 20px;">
<div v-for="(data,index) in value">
<span>{{data.month}}==={{data.money}}</span>
</div>
</div>
</div>
</div>
<script src="js/vue.global.js"></script>
<script>
var vue = Vue.createApp({
data() {
return {
yingshous: {
"2019": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
"2020": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
"2021": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
"2022": [{month: 1, money: 54545}, {month: 2, money: 54545.23}],
}
}
},
methods: {}
}).mount("#app");
</script>
</body>
</html>
06：v-if / v-else-if /v-else
条件指令：v-if / v-else-if /v-else 注意中间不能出现标签，否则会出现断层。
所以最好使用v-if v-if v-if，这种不会出现断层。
案例
在开发中，需求：如果性别是：0 女 1 男 2 保密
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件指令-v-if/v-else-if/v-else</title>
</head>
<body>
<div id="app">
<p v-if="gender == 2">保密</p>
<p v-if="gender == 1">男</p>
<p v-if="gender == 0">女</p>
<hr>
<p v-if="gender == 0">女</p>
<p v-else-if="gender == 1">男</p>
<p v-else>保密</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
data() {
return {
gender: 0 // 0 女 1 男
}
}
}).mount("#app");
</script>
</body>
</html>注意:
<p v-if="gender == 0">女</p>
<p v-else-if="gender == 1">男</p>
<p v-else>保密</p>上面会存在一个问题，不能在指令中间插入别元素，否则就断层。比如：
<p v-if="gender == 0">女</p>
<span></span>
<p v-else-if="gender == 1">男</p>
<span></span>
<p v-else>保密</p>
07：v-show
显示指令：v-show 控制元素的隐藏和显示。（鼠标事件 + v-show /v-if选项卡）
<h1 v-show="ok">Hello!</h1>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。 注意，v-show 不支持
-
v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
-
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
-
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
-
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
08：渲染指令：v-cloak
09：其他指令：v-pre v-once（ 用的非常的少）
v-once
代表插值表达式，或者任何指令只会渲染一次。后续data发生变更，不会在进行同步。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>17、其他指令-v-once.html</title>
</head>
<body>
<div id="app">
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<button @click="changeMsg">改变msg</button>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
msg:"Hello Vue3.x"
}
},
methods:{
changeMsg(){
this.msg = "Hi Vue3.x";
}
}
}).mount("#app");
</script>
</body>
</html>一旦被v-once修饰的指令，只会和data同步一次，后续的data的变更不会在进行同步v-once的标签元素。
v-pre
如果被v-pre修饰的元素，直接不会和data替换。原样输出插值表达式
10、槽指令：v-slot(后续自定义组件使用，自定义代码块的机制)（暂时忽略）
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)