Vue高效前端开发-Vue基本指令

最新推荐文章于 2023-12-17 10:15:00 发布

PROBIE_

最新推荐文章于 2023-12-17 10:15:00 发布

阅读量1.4k

点赞数 27

分类专栏： h5 文章标签： vue html js

本文链接：https://blog.csdn.net/PROBIE_/article/details/118164408

版权

h5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue模板语法

文本插值

文本差值最基本的形式一般有三种方式

一是使用两个花括号{{}}，二是使用v-once指令，三是使用v-text指令，下面用代码演示

<body>
    <div id="app">
        <p>
            <input type="text" v-model="msg" />
        </p>
        <p>{{msg}}</p>
        <!--仅一次-->
        <p v-once>{{msg}}</p>
        <p v-text="msg"></p>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "123456"
            }
        })
    </script>
</body>

三种方式均可实现文本插值。

2，表达式

文本插值也支持表达式形式的值，用于数值运算，三目判断以及筛选，下面用一个计算工资的例子演示。

<body>
    <fieldset id="app">
        <legend>工资计算器</legend>
        <p>当月收入：<input type="text" v-model="gongzi"></p>
        <p>奖金：<input type="text" v-model="jiangjin" name="" id=""></p>
        <p>养老保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.077}}</p>
        <p>医疗保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.019}}</p>
        <p>失业保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.002}}</p>
        <p>公积金：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.058}}</p>
        <p>到手薪资：{{(parseFloat(gongzi)+parseFloat(jiangjin))*(1-0.077-0.019-0.002-0.058)}}</p>
        <p>年薪：{{((parseFloat(gongzi)+parseFloat(jiangjin))*(1-0.077-0.019-0.002-0.058))*12}}</p>
    </fieldset>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                gongzi: 0,
                jiangjin: 0
            }
        })
    </script>
</body>

以上代码实现了工资的基本计算，由上可以看出，文本插值也支持数值运算。

3，指令

指令是Vue中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM行为，指令的特殊属性便是带有“v-”前缀。

例：

<a v-bind:href="url"></a>

Vue绑定类样式和内联样式

在Vue中对属性的绑定一般使用v-bind指令（可缩写为“：”），而操作元素的class列表和内联样式是数据绑定的一个常见需求。

1，类样式

语法：

<div v-bind:class="{类样式名:数据,...}"></div>

例：使用绑定类样式方式实现样式的绑定

<body>
    <style>
        .base {
            width: 200px;
            height: 200px;
        }
        
        .border {
            border: 2px solid black;
            transition: all 3s;
        }
        
        .box {
            box-shadow: 15px 5px 15px 5px gray;
            transition: all 3s;
        }
        
        .bgcolor {
            background-color: aqua;
            transition: all 3s;
        }
        
        .donghua:hover {
            border-radius: 50%;
            transition: all 3s;
        }
    </style>
    <div id="app">
        <input type="checkbox" v-model="border" name="check1" id="">边框
        <input type="checkbox" v-model="box" name="check1" id="">阴影
        <input type="checkbox" v-model="bgcolor" name="check1" id="">背景
        <input type="checkbox" v-model="donghua" name="check1" id="">动画
        <hr/>
        <div class="base" v-bind:class="{border:border,box:box,bgcolor:bgcolor,donghua:donghua}"></div>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                border: false,
                box: false,
                bgcolor: false,
                donghua: false
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
通过绑定类样式实现了效果。

2，内联样式

语法：

<div v-bind:style="{样式属性:数据,...}"></div>

例：使用绑定内联样式实现效果

<body>
    <div id="app" style="width: 100%;text-align: center;">
        <img src="img/1.JPG" alt="" v-bind:style="allstyle">
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                allstyle: {
                    "border": "2px solid black",
                    "border-radius": "10%",
                    "width": "50%"
                }
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
这些就是vue的样式绑定，把传统的style方式转化为了vue的方式。

条件渲染指令

Vue中提供v-if，v-else和v-show的条件渲染指令，这些条件指令可以根据表达式的值在DOM中选择渲染元素和组件。

v-if和v-else

语法：

<div v-if="bool"></div>
<div v-else> </div>

例：使用条件渲染实现登录页面和注册界面的切换

<body>
    <div id="app">
        <input type="checkbox" v-model="isf" name="" id="">登录
        <div v-if="isf">
            <fieldset>
                <legend>登录界面</legend>
                <input type="text" placeholder="请输入账号" name="" id=""><br />
                <input type="text" placeholder="请输入密码" name="" id="">
                <p><button>登录</button></p>
            </fieldset>
        </div>
        <div v-else>
            <fieldset>
                <legend>注册界面</legend>
                <input type="text" placeholder="请输入账号" name="" id=""><br />
                <input type="text" placeholder="请输入密码" name="" id=""><br />
                <input type="text" placeholder="请再次输入密码" name="" id="">
                <p><button>注册</button></p>
            </fieldset>
        </div>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isf: true
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

v-show指令

v-show的用法与v-if类似，不同的地方在于v-show指令只是实现切换css的display，同时也不支持< template >元素和v-else指令。

事件绑定

在vue中一般使用v-on来进行事件的绑定，实现监听DOM事件。

语法：

<button v-on:click="方法">按钮</button>

例：实现简单四则远算。

<body>
    <div id="app">
        <p>x值：<input type="text" v-model="x"></p>
        <p>y值：<input type="text" v-model="y"></p>
        <p>
            <button v-on:click="add()">+</button>
            <button v-on:click="sub()">-</button>
            <button v-on:click="mlt()">*</button>
            <button v-on:click="div()">/</button>
        </p>
        <p>结果：{{result}}</p>
    </div>
    <script src="js/Vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                x: 0,
                y: 0,
                result: 0
            },
            methods: {
                add: function() {
                    this.result = parseFloat(this.x) + parseFloat(this.y);
                },
                sub: function() {
                    this.result = parseFloat(this.x) - parseFloat(this.y);
                },
                mlt: function() {
                    this.result = parseFloat(this.x) * parseFloat(this.y);
                },
                div: function() {
                    this.result = parseFloat(this.x) / parseFloat(this.y);
                }
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
以及事件绑定时需要用到的修饰符：

.stop：相当于event.stopProagation()方法
.prevent：相当于event.preventDefault()方法
.capture：使用capture模式添加事件监听器
.self：只有事件在监听本身元素时才会触发回调
.once：点击事件仅触发一次

PROBIE_

关注

27
点赞
踩
48

收藏

觉得还不错? 一键收藏
打赏
28
评论
Vue高效前端开发-Vue基本指令

Vue模板语法文本插值文本差值最基本的形式一般有三种方式一是使用两个花括号{{}}，而是使用v-once指令，三是使用v-text指令，下面用代码演示<body> <div id="app"> <p> <input type="text" v-model="msg" /> </p> <p>{{msg}}</p> <!
复制链接

扫一扫