专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

知了堂|Vue高效前端开发-Vue基本指令

ins518 2024-11-21 16:18:54 技术文章 10 ℃ 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-”前缀。

例:<av-bind:href="url"></a>

Vue绑定类样式和内联样式

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

1,类样式

语法:<divv-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,内联样式

语法:<divv-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中提供v-if,v-else和v-show的条件渲染指令,这些条件指令可以根据表达式的值在DOM中选择渲染元素和组件。

v-if和v-else

语法:<divv-if="bool">

</div><divv-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事件。

语法:<buttonv-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:点击事件仅触发一次

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表