VUE基本语法——指令与表单数据的收集-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE基本语法——指令与表单数据的收集。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

内置指令

v-bind

v-model

v-for

v-on

v-if

v-else-if

v-else

v-show

v-text

v-html

v-pre

v-once

v-clocak

自定义指令

自定义指令何时调用

自定义指令总结

语法

配置对象中的回调函数

收集表单数据的类型

“”

阻止表单默认提交行为：

内置指令

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>