Vue前端框架常用指令
文章目录
- 常用指令
- 插值表达式：
- v-cloak:时钟指令
- v-text:文本信息绑定指令
- v-html:Html信息绑定指令
- v-bind:元素属性值绑定指令
- v-on:方法绑定指令
- v-mode:双向绑定指令
- v-for:循环指令
常用指令
插值表达式：
语法:{{要插入的值}}
此时相当于占位符，到时候{{关键字}}会被替换成Model中的数据
注意点:
- 当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
出来，加载完毕之后又会被替换成真实结果，造成闪烁效果（Vue的加载代码写在HTML元素之后时会出现该bug）
v-cloak:时钟指令
针对上面出现的问题,引出了v-clock指令 {{msg1}}
此指令是把它当作HTML元素的一个属性使用
示例：
特点：
当Vue加载完毕后，v-cloak属性会自动消失。
运行机理：
等同于添加了如下CSS样式：让所有带v-cloak属性的元素隐藏，Vue加载完成后显示实现，以解决使用插值表达式闪烁的问题:
[v-cloak]{
display: none;
}
v-text:文本信息绑定指令
语法：
作用：和插值表达式一样，用于给HTML元素添加文本
区别：
- v-text不会存在闪烁问题
- v-text会将Model中的数据完全替换到HTML元素中（覆盖）
- 插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）
相同点：
4. 插值表达式和v-text都可以给HTML元素显示文本
5. 插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）
示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试title>
head>
<body>
<div id="app">
<p v-cloak>{{msg}}p>
<p v-text="msg1">p>
div>
<script src="../lib/vue.js" type="application/javascript">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello,vue",
msg1:"hello"
}
})
script>
body>
html>
思考一个问题:要是我们在data中写一段html代码,那么替换到上面的div中,会被解析吗?
- 不会,因为不管是插值表达式还是v-text指令都是将字符串进行了替换,不会解析html代码…那有没有什么方法可以做到呢? v-html指令就出现了
v-html:Html信息绑定指令
- 和v-text的唯一区别：给HTML添加内容时会解析内容中的HTML代码
示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试title>
head>
<body>
<div id="app">
<p v-cloak>{{msg}}p>
<p v-text="msg1">p>
<p v-html="msg2">p>
div>
<script src="../lib/vue.js" type="application/javascript">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello,vue",
msg1:"hello",
msg2:"这是用来测试v-html指令的...
"
}
})
script>
body>
html>
结果:(可以看到这里确实将msg2中写入的代码进行了解析并展示了出来)
接下来我们再来看一种绑定字符串的方式…
v-bind:元素属性值绑定指令
语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据 用户名：
示例：
注意：
- 【v-bind:】用于绑定HTML元素属性的值
- 使用v-bind指令是需要加载一个命名空间的:
xmlns:v-bind="http://www.w3.org/1999/xhtml",使用:就可以不用导入了… - 【v-bind:】可以简写为 :
- Vue框架会把使用了v-bind:标识的HTML的属性的值当作一个Javascript表达式来使用
只要表达式合法，就能执行（当然，数据必须是自变量或来自于Model中）
如：
:value=“msg+‘你好’”
:value=“msg+msg”
示例:
<html lang="en"
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>测试title>
head>
<body>
<div id="app">
<p v-cloak>{{msg}}p>
<p v-text="msg1">p>
<p v-html="msg2">p>
用户名:<input type="text" name="username" v-bind:value="msg" />
用户名:<input type="text" name="username" :value="msg" />
用户名:<input type="text" name="username" v-bind:value="msg+'你好'" />
用户名:<input type="text" name="username" :value="msg+msg1" />
div>
<script src="../lib/vue.js" type="application/javascript">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello,vue",
msg1:"hello",
msg2:"这是用来测试v-html指令的...
"
}
})
script>
body>
html>
结果:
接下里我们看看如何绑定方法…
v-on:方法绑定指令
解释：在HTML的事件属性（属性名不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
示例：
注意：
- 常见的web网页的事件都支持绑定
- 事件名字不能带on
- v-on指令需要导入命名空间:
xmlns:v-on="http://www.w3.org/1999/xhtml",使用@就不用导入命名空间了… - 事件触发的方法必须在methods中有定义
- v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范都能正确执行（例如:传入参数）
- v-on:等价于 @
示例:
<html lang="en"
xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>测试title>
head>
<body>
<div id="app">
<p v-cloak>{{msg}}p>
<p v-text="msg1">p>
<p v-html="msg2">p>
用户名:<input type="text" name="username" v-bind:value="msg" />
用户名:<input type="text" name="username" :value="msg" />
用户名：<input type="text" name="username" v-bind:value="msg+'你好'" />
用户名:<input type="text" name="username" :value="msg+msg1" />
<br/>
<hr/>
<button v-on:click="vueTest1()">点击有惊喜1button>
<button @click="vueTest2()">点击有惊喜2button>
div>
<script src="../lib/vue.js" type="application/javascript">script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"hello,vue",
msg1:"hello",
msg2:"这是用来测试v-html指令的...
"
},
methods:{
vueTest1:function () {
alert("你好！");
},
vueTest2:function () {
alert("你好！");
}
}
})
script>
body>
html>
v-mode:双向绑定指令
唯一的一个实现双向数据绑定的指令
语法：
- 适用元素：表单元素，其它元素不能使用v-model指令
- input系列（可以输入内容的）、select、textarea
双向绑定：
model层数据的改变会影响view层HTML结果
HTML中表单元素值的改变会写入对应的model层的数据中
示例:通过双向绑定v-model指令实现一个简易的计算器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的双向数据绑定指令v-modetitle>
<script src="../lib/vue.js" type="text/javascript">script>
head>
<body>
<div class="box">
<h1>Vue中的双向数据绑定指令v-modeh1>
<label>单价：<input type="text" v-model="price">label><br/>
<label>数量：<input type="text" v-model="num">label><br/>
<button @click="calc()">点击计算总价button><br/>
<label>总价：<span style="color:deeppink" v-text="sum">span>label>
<hr/>
<h1>使用v-mode双向数据绑定实现建议计算器h1>
<label>操作数1：<input type="text" v-model="num1" />label>
<select v-model="opr">
<option value="+">+option>
<option value="-">-option>
<option value="*">xoption>
<option value="/">/option>
select>
<label>操作数1：<input type="text" v-model="num2" />label>
<button @click="doCalc()">=button>
<span style="font-size: 20px;color:deeppink" v-text="result">span>
div>
<script type="text/javascript">
var vm2 = new Vue({
el:".box",
data:{
price:12,
num:1,
sum:12,
num1:'0',
num2:'0',
opr:'+',
result:0
},
methods:{
calc(){
this.sum = this.price*this.num;
},
doCalc(){
this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
}
}
});
script>
body>
html>
结果:
知识点:
JavaScript的eval()方法可以把一个字符串当作JavaScript代码执行，并返回执行结果,如：
this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
注意：
当代码很复杂或难以控制时可以使用此方法，上面代码中会包含太多的判断,因此使用了eval()方法,大多数还是使用标准方法执行JavaScript代码
v-for:循环指令
- 使用v-for指令遍历简单数组
{{name}}
- 使用v-for指令遍历对象数组
id：{{user.id}}---name：{{user.name}}
- 使用v-for指令遍历对象属性值
{{key+'--'+value}}
- 使用v-for指令遍历数字（作用就是标准的for循环次数遍历）
总结:
- 格式为
v-for="xxx in xxx" - index是v-for中的默认属性,值下标,从0开始…
- 遍历方式类似于我们java中学过的增强for
- 对于遍历对象,可以直接user.id这种形式,不需要使用get方法来获取属性值
注意
- 遍历得到的值可以使用【插值表达式、v-text、v-html】显示
- 不管遍历何种数据类型，都可以得到值和索引
- 遍历对象属性和值时可以得到【值、属性名字、索引】
- 值的赋值顺序是：值、【键名】、索引
- 一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index）
- 遍历过程中接受值的变量名字可以任意
- 遍历数字时数字是从1开始，不能是负数（因为该功能是固定次数遍历）
- 在组件中使用数据时，一定要用key唯一绑定数据（保证对UI组件的操作不会因为其它组件的变化而发生变化）
注意：
- key必须是基本数据类型（string/number）
报错：Avoid using non-primitive value as key, use string/number value instead. - key的数据值一定不要重复
报错：Duplicate keys detected: ‘3’. This may cause an update error.
技巧：一般使用对象中的值唯一属性（主键）作为key，比如id
语法：
看不懂key和value?看看下面的代码
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
names:["张三","李四","王五","赵六","田七"],
users:[
{id:1,name:"胡歌",age:32},
{id:2,name:"袁弘",age:33},
{id:3,name:"霍建华",age:35}
],
allClass:{no:"年级",classteacher:"班主任",classnum:["重点班","实验班","普通版","火箭班"]
}
}
});
script>
解释:
- names为数组,可以直接遍历
- users为对象数组,也可以直接遍历
- allClass为一个对象,但是内部包含了很多属性,就要用到key和value来进行调用…
知识点
- 如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定
- 数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age}); - 在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据
的唯一关联，避免被其它操作（指非本元素）影响