Vue中v-bind、v-model、v-on、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会

Vue中v-bind、v-on、v-model、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会

v-bind:属性绑定(简写:)

v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的

v-bind指令主要用于响应式的更新html属性

一般我们要想在元素节点的属性上绑定vue的data数据

是不可以直接使用{{ }}插入值语法来使用

如果我们想让dom属性节点与data数据绑定响应

就需要使用 v-bind 指令

一般常用通过ES6语法中的解构赋值来简写

达成启用某个class或者关闭某个class了

当然这种解构语法

需要class类名和我们data数据定义的属性名是一致的

当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。

v-bind的使用说明：动态地绑定一个或多个特性，或一个组件 prop 到表达式

v-bind的三种用法

1. 直接使用指令v-bind
2. 使用简化指令:
3. 在绑定的时候，v-bind的绑定内容是js表达式，所以可以拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

4. Vue v-bind绑定元素属性的基本使用-腾讯云开发者社区-腾讯云

双向数据绑定 v-model

不仅将data中的数据对标签内进行绑定,还会将标签中的数据反向绑定到data中,标签数据改变后data中的数据也会同步改变。是用在表单、和元素上创建双向数据绑定。

仅限： <input>、<select>、 <textarea>、components

修饰符：

• .lazy ——监听 change 事件而不是 input
• .number ——将输入的合法符串转为数字
• .trim ——移除输入内容两端空格

无法使用v-model的情况：

v-model只能用于表单情况，输入类元素，存在value值的情况。
不存在value值的元素无法捕捉用户的输入数据，根本不存在从元素改变数据的路径。

单选框，多选框，Input，select等等都行，它们都存在value值

可以使用v-bind与v-on实现v-model

v-model其实是一个语法糖，他的背后本质包含两个操作： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件

实现步骤如下： ① 通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。② 通过v-on实现，若通过键入input，则修改app.message的值。③ 更简单的书写方式实现v-on 根本不用绑定方法

vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定 ？-腾讯云开发者社区-腾讯云

v-model可以初始化value的属性， v-model改变value的值，就会改变数据的值，数据的值又可以改变value属性的值，成为双向数据绑定。

v-model也有一定的局限性，只能绑定「表单元素」，则v-bind可以绑定「各类元素」。

那么什么是「表单元素」呢？

「表单元素」：input(radio, text, address, email....) 、select、checkbox、textarea等。

v-on事件绑定(简写@)

给元素绑定事件监听器，监听用户的点击, 拖拽, 键盘事件等

绑定的是事件(函数)是vue中methods中的数据,触发v-on绑定,就会执行其所绑定的事件。

事件绑定我们可以看成在HTML页面中触发一个事件(这里的事件可以理解为一个函数)。
经过v-on绑定的属性可以直接执行js代码,也可以去vue中methods中寻找函数执行。

事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

• 当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。
• 当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。
• v-on 还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。

5. Vue v-on绑定监听事件的基本使用-腾讯云开发者社区-腾讯云

循环v-for

基于原始数据多次渲染元素或模板块。

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

通过循环的方法渲染一个列表，循环对象可以是对象和数组

9. Vue v-for指令的使用方式以及使用key解决组件问题-腾讯云开发者社区-腾讯云

判断v-if、v-else

实现条件判断

v-if : 当flag为true，则显示，如果flag为false，则隐藏。v-if 的特点：每次都会重新删除或创建元素

v-show 

当flag为true，则显示，如果flag为false，则隐藏。

v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

v-text指令和v-html指令

v-text指令是用于更新元素的文本内容

v-html指令是更新元素的innerHTML

v-pre指令和v-once指令

v-pre指令是跳过这个元素和它的子元素的编译过程，当子元素也挂载了vue实例则该子元素不受影响，该指令不需要表达式。

v-once指令是让元素或组件值渲染一次，该指令不需要表达式

当元素被v-pre修饰时，该元素的所有操作都会跳过，不会进行任何处理。而被v-once指令修饰时，该元素只会渲染一次，当值有所改变时也不会重新渲染