VUE基本语法——指令与表单数据的收集

最新推荐文章于 2024-09-30 14:28:41 发布

ybb_ymm

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量1k

点赞数

分类专栏：从0到1了解vue2及vue3更新内容文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ybb_ymm/article/details/130315742

版权

从0到1了解vue2及vue3更新内容专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的内置指令如v-bind、v-model、v-for等的用途和用法，强调了它们在数据绑定和条件渲染中的作用。还详细讲解了自定义指令的创建和生命周期，以及如何收集不同类型的表单数据，包括文本、数字、复选框和radio。此外，提到了v-once和v-pre用于性能优化，以及如何阻止表单默认提交行为。

摘要由CSDN通过智能技术生成

内置指令

v-bind

他是用来进行单向绑定对表达式进行解析，简写方式就是一个冒号加指令名字

例子 :xxx

v-model

他是用来进行双向绑定对表达式进行解析的

v-for

它是用来遍历数组、对象、字符串、指定循环次数的

v-on

他是用来绑定事件监听的，简写方式就是一个@字符

例子 @

v-if

条件渲染（动态的控制我们节点是否存在）

v-else-if

条件渲染（动态的控制我们节点是否存在）

v-else

条件渲染（动态的控制我们节点是否存在）

v-show

条件渲染（动态的控制我们节点是否进行展示）

以上是我们之前讲过的，这里进行复习一下，接下来看我们之前没有讲过的指令

v-text

向他所在的标签插入一串文本。他会把标签当作字符串的，所以他是不能够解析标签的。

他会替换掉节点中的内容，插值语法{{xxxxx}}则是不会的。

v-html

他可以向指定的节点中去渲染包含html结构的内容信息

和v-text比较而言，他可以将html标签解析插入

注意：

1、网站中动态渲染任何html信息都是比较危险的动作，他容易引起xss攻击

2、一定要在我们确定可以信的内容上去使用v-html标签，这样可以保证安全，一定不能让用户提交任何内容。

v-pre

他是用来跳过他所在的节点编译过程。

我们可以用它来跳过一些标签，比如没有用到任何指令语法、没有任何插值语法的标签节点，这样可以加快我们编译器的编译工作。

v-once

他所在的节点在第一次动态渲染以后，他就会看错了静态内容。当数据改变的时候，它也不会引起v-once所在的结构的更新及任何变化。他可以用来优化性能。

v-clocak

他是一个特殊属性（他没有属性值），当vue的实例创建完成以后并且接管了容器以后，vue会默认删掉v-clocak属性。

注意：

他和css一起配合使用，可以解决我们网速慢的时候展示不出来模板的问题。

自定义指令

自定义指令何时调用

1、指定和元素第一次成功绑定的时候会执行

2、指令他所在的模板被重新解析的时候，他会被调用。

自定义指令总结

语法

1、局部指令

new Vue（{

directives:{指令名:配置对象}

}）

或者

new Vue({

directives{指令名:回调函数}

})

2、全局指令

Vue.directive(指令名,配置对象)

Vue.directive(指令名,回调函数）

配置对象中的回调函数

1、bind：他指的是指令与元素成功绑定的时候进行调用

2、inserted:他指的是指令元素呗插入到页面的时候进行调用

3、update：指令所在的模板结构他被重新解析的时候进行调用

注意：

1、当指令定义的时候不要加v-，但是要是用的时候需要加上v-

2、指令的名字如果有多个单词的时候，我们要是用的命名方式是kebab-case（短横杠命名），而不是camelCase（驼峰命名）

收集表单数据的类型

“<input type="text"/>”

使用v-model收集的是value值，用户输入的就是我们设定的value值

“<input type="number"/>”

它用来表示我们的数字输入，比如常用的年龄

“<input type="checkbox"/>”

1、当我们没有配置input的value的属性的时候，他手机的就是checked值（他是布尔值，标识勾选或者未勾选）

2、v-model的初始值是数组的时候，那么他收集的就是value组成的一个数组

3、v-model的初始值是不是一个数组的时候，那么他收集的就是checked（布尔值。勾选或者未勾选）

4、v-model他又三个修饰符，如下，分别是：

1）、trim：他是指的首尾空格的过滤

2）、lazy：失去焦点以后在对数据进行收集

3）、number：将用户输入的字符串转为我们想要的数字

具体代码示例如下：

<form >
    姓名：<input type="text"/> <br/>
    年龄：<input type="number"/><br/>
    爱好：
    <input type="checkbox"/>抽烟
    <input type="checkbox"/>喝酒
    <input type="checkbox"/>烫头<br/>
    性别：
    <input type="radio"/>男
    <input type="radio"/>女<br/>
    介绍：<input type="text"/><br/>

    <input type="checkbox">阅读协议(同意)<br/>
    <button>提交</button>

</form>