03-Vue指令

很高兴在我的分享里与你认识，想持续跟着江哥学习Vue系列一键三连走起！

什么是指令？

指令就是Vue内部提供的一些自定义属性,这些属性中封装好了Vue内部实现的一些功能，只要使用这些指令就可以使用Vue中实现的这些功能。通过这些指令可以让 Vue 对一个 DOM元素进行各种骚操作，如 v-once、 v-model 等指令。

• 常见的 Vue 指令
  v-model
  v-once
  v- if
  v-else
  v-text
  v-html
  v-show
  v-for
  v-bind

v-model

v-model主要是用来做数据绑定的，数据绑定又可以归为单向绑定与双向绑定。

• 单向绑定：将 Model 中的数据渲染到 View 上，Vue 中默认就是单向绑定
• 双向绑定：将 Model 中的数据渲染到 View 上，再将 View 上更新的数据重新保存到 Model 中

v-once

只渲染元素和组件一次，让界面不要跟着数据变化

    
原始数据: {{ name }}
    
当前数据: {{ name }}

打开控制台，修改 data 中的数据为 李南江 ，我们可以观察到界面上通过v-once渲染的数据未发生变化。

image.png

v-if

• 什么是v-if指令
  条件渲染: 如果 v-if 取值是 true 就渲染元素, 如果不是就不渲染元素

• v-if 特点:
  如果条件不满足根本就不会创建这个元素(重点)

• v-if注意点
  v-if 可以从模型中获取数据
  v-if 也可以直接赋值一个表达式

    
显示数据
 //会显示在界面上
    
不显示数据
//不会显示在界面上

v-else

• v-else 指令不能单独出现，必须配合 v-if 使用。
• v-else-if 可以和 v-if 指令配合使用, 当 v-if 不满足条件时就依次执行后续 v-else-if, 哪个满足就显示哪个。

    
优秀
 //会显示在界面上
    
及格
    
不及格

配套教程