前端开发vue指令使用和说明

来源:07素材网 05月16日 21:02

指令是指v-开头,作用于html标签。


1、v-for:遍历数组进行渲染。


2、v-on:事件监听,简写为 @要绑定的事件类型。


3、v-html:将data的属性作为html语法输出,类似js中的innerHtml属性和jQuery的html()方法。


4、v-text:数据绑定标签,将对象data中的属性绑定给对应的标签作为内容显示出来,类似js的innerText属性和jQuery的text()方法。


5、v-show:实际是控制了dom的css的display属性。当这个指令为true时dom标签显示,否则为dom标签隐藏。


6、v-if:是条件指令,作用和v-show一样也是控制dom的显隐,只是原理不同,当v-if为false时,dom被直接删除掉;为true时,又重新渲染此dom。


v-else-if和v-else的作用和与v-if一致,都是用来控制dom显隐的。


注意:v-else必须和v-if使用


5、v-pre:要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。


6、v-cloak:解决插值表达式闪烁的问题。因为页面在渲染之前会出现双花括号。


7、v-bind:动态绑定属性,简写为  :要绑定的指令,它的简写也称为语法糖


1)绑定常见的属性有class、style、src、href和一些自定义的属性。


2)这个指令只能实现数据的单向绑定,从M 自动绑定到V , 无法实现数据的双向绑定。


8、v-model :指表单和数据绑定,只能运用在表单元素中。可以实现表单元素和 M中数据的双向绑定,我们通常称的双向数据绑定。


1)使用方法:在表单dom中添加v-model指令,并绑定变量。


2)双向绑定:指当原数据发生变化时,form表单元素值也跟着发生变化,反过来在form表单进行输入和删除时,原数据也发生了变化。


3)原理:在表单元素中动态绑定value属性并赋予一个变量,此时原数据会在表单中显示,该方式和花括号展示是一样的,然后再绑定一个监听事件@input,,当表单实时操作时会通过事件参数下的tager.value值获表单中取数据然后赋予原数据。


表单元素有:文本框、文本域、单选按钮、多选框和下拉框


1)v-modle与radio使用


是否属于同一组单选框一般是通过name属性名称划分,但是在vue模板中,我们通过给radio添加v-modle指令并绑定同一变量时,name属性可以不写,他们起到的效果实质一样的。


2)v-modle与checkbox使用,有单选和多项2中情况


单选:常用应用场景,比如下一步前勾选协议。变量值是布尔值,在绑定v-modle指令时,指向的变量为true时,则checkbox被选中,否则不选中。


多选:常用应用场景,比如兴趣爱好,一般有多个选择。变量值是一个数组,并绑定到v-modle指令上,当某个复选框被勾选时,会把该复选框的值添加到该数组中,取消时将该值从数组中移除。最后把数据提交到后台。


3)v-modle与select使用,有以下2种情况


单选项:在select标签上v-modle绑定的变量类型是字符串,当option选项选择某个值后,会将该值赋予该变量。


多选项:在select标签上v-modle绑定的变量类型是数组,option可以多选,选择后该值添加到数组中,取消时将该值会从数组中移除。设置select多选,需要在select标签上添加multiple属性。


前端开发vue指令使用和说明

原文出处:
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

头条

在使用SQLite3时遇到的几个坑

在使用SQLite3时遇到的几个坑

《本打算在SQLite3数据库里执行一个查询语句,使用的是php语言,起初遇到的是权限问题: permission denied,因为SQLite3数据库文件和PHP执行者属于两个不同的用户,首先需要对这个文件执行mode 777的权限开放,然后,又遇到了下面这样的PHP错误