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

Vue模板语法

文本插值

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

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

body>

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

2，表达式

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

工资计算器

当月收入：

奖金：

养老保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))\*0.077}}

医疗保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))\*0.019}}

失业保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))\*0.002}}

公积金：{{(parseFloat(gongzi)+parseFloat(jiangjin))\*0.058}}

到手薪资：{{(parseFloat(gongzi)+parseFloat(jiangjin))\*(1-0.077-0.019-0.002-0.058)}}

年薪：{{((parseFloat(gongzi)+parseFloat(jiangjin))\*(1-0.077-0.019-0.002-0.058))\*12}}

————————————————

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

3，指令

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

例：av-bind:href="url"

Vue绑定类样式和内联样式

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

1，类样式

语法：divv-bind:class="{类样式名:数据,...}"

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

.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; }

效果：

通过绑定类样式实现了效果。

2，内联样式

语法：divv-bind:style="{样式属性:数据,...}"

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

条件渲染指令

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

v-if和v-else

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

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

效果：

v-show指令

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

事件绑定

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

语法：buttonv-on:click="方法"按钮

例：实现简单四则远算。

效果：

以及事件绑定时需要用到的修饰符：

.stop：相当于event.stopProagation()方法

.prevent：相当于event.preventDefault()方法

.capture：使用capture模式添加事件监听器

.self：只有事件在监听本身元素时才会触发回调

.once：点击事件仅触发一次