Vue前端框架常用指令

最新推荐文章于 2023-03-13 16:19:36 发布

_板蓝根_

最新推荐文章于 2023-03-13 16:19:36 发布

阅读量303

点赞数

分类专栏： Vue框架文章标签：常用指令

本文链接：https://blog.csdn.net/mulinghanxue/article/details/98631034

版权

Vue框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

- - 常用指令

常用指令

插值表达式：

语法:{{要插入的值}}
此时相当于占位符，到时候{{关键字}}会被替换成Model中的数据

注意点:

当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
出来，加载完毕之后又会被替换成真实结果，造成闪烁效果（Vue的加载代码写在HTML元素之后时会出现该bug）

v-cloak:时钟指令

针对上面出现的问题,引出了v-clock指令
此指令是把它当作HTML元素的一个属性使用
示例：<p v-cloak>{{msg1}}</p>
特点：
当Vue加载完毕后，v-cloak属性会自动消失。
运行机理：
等同于添加了如下CSS样式：让所有带v-cloak属性的元素隐藏，Vue加载完成后显示实现，以解决使用插值表达式闪烁的问题:

 [v-cloak]{
      		display: none;
		  }

v-text:文本信息绑定指令

语法：<p v-text="msg1"></p>
作用：和插值表达式一样，用于给HTML元素添加文本
区别：

v-text不会存在闪烁问题
v-text会将Model中的数据完全替换到HTML元素中（覆盖）
插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）

相同点：
4. 插值表达式和v-text都可以给HTML元素显示文本
5. 插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<div id="app">
	<!--插值表达式 -->
    <p v-cloak>{{msg}}</p>
    <!--v-text指令-->
    <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代码
示例:

<!DOCTYPE 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:"<h1>这是用来测试v-html指令的...</h1>"
             }
    })
</script>
</body>
</html>

结果:(可以看到这里确实将msg2中写入的代码进行了解析并展示了出来)
在这里插入图片描述
接下来我们再来看一种绑定字符串的方式…

v-bind:元素属性值绑定指令

语法：在HTML元素的属性目前加上绑定标识，此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
示例：<p>用户名：<input type="text" name="username" v-bind:value="msg" /></p>
注意：

【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”
示例:

<!DOCTYPE html>
<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:"<h1>这是用来测试v-html指令的...</h1>"
             }
    })
</script>
</body>
</html>

结果:
在这里插入图片描述

接下里我们看看如何绑定方法…

v-on:方法绑定指令

解释：在HTML的事件属性（属性名不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
示例：
<button v-on:click="vueTest()">点击有惊喜</button>
<button @click="vueTest()">点击有惊喜</button>

注意：

常见的web网页的事件都支持绑定
事件名字不能带on
v-on指令需要导入命名空间:xmlns:v-on="http://www.w3.org/1999/xhtml",使用@就不用导入命名空间了…
事件触发的方法必须在methods中有定义
v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范都能正确执行（例如:传入参数）
v-on:等价于 @

示例:

<!DOCTYPE html>
<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()">点击有惊喜1</button>
    <button @click="vueTest2()">点击有惊喜2</button>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>这是用来测试v-html指令的...</h1>"
             },
        methods:{
            vueTest1:function () {
                alert("你好！");
            },
            vueTest2:function () {
                alert("你好！");
            }
        }
    })
</script>
</body>
</html>

v-mode:双向绑定指令

唯一的一个实现双向数据绑定的指令
语法：<input type="text" v-model="num1" />

适用元素：表单元素，其它元素不能使用v-model指令
input系列（可以输入内容的）、select、textarea

双向绑定：
model层数据的改变会影响view层HTML结果
HTML中表单元素值的改变会写入对应的model层的数据中

示例:通过双向绑定v-model指令实现一个简易的计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的双向数据绑定指令v-mode</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <div class="box">
        <h1>Vue中的双向数据绑定指令v-mode</h1>
        <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="*">x</option>
            <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指令遍历简单数组
<p v-for="name in names">{{name}}</p>
<p v-for="name,index in names" v-text="name+'---'+index"></p>
使用v-for指令遍历对象数组
<p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>
使用v-for指令遍历对象属性值
<p v-for="value,key in cqCity">{{key+'--'+value}}</p>
使用v-for指令遍历数字（作用就是标准的for循环次数遍历）
<p v-for="num,index in 12" v-text="num+'---'+index"></p>

总结:

格式为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
语法：

<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
</p>

看不懂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属性，进行组件和数据
的唯一关联，避免被其它操作（指非本元素）影响

_板蓝根_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue前端框架常用指令

文章目录常用指令插值表达式：v-cloak指令v-text指令v-html指令v-bind指令v-on指令常用指令插值表达式：语法:{{要插入的值}}此时相当于占位符，到时候{{关键字}}会被替换成Model中的数据注意点:当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示出来，加载完毕之后又会被替换成真实结果，造成闪烁效果（Vue的加载代码写在HTML元素之后时...
复制链接

扫一扫