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

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

<div id="app">
    <p v-once>原始数据: {{ name }}</p>
    <p>当前数据: {{ name }}</p>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "it666",
        }
    });
</script>

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

image.png

v-if

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

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

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

<div id="app">
    <p v-if="age > 33">显示数据</p> //会显示在界面上
    <p v-if=" age < 33">不显示数据</p>//不会显示在界面上
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            age:26
        }
    })
</script>

v-else

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

<div id="app">
    <p v-if="score >=90">优秀</p> //会显示在界面上
    <p v-else-if="score > 60">及格</p>
    <p v-else>不及格</p>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            score:88
        }
    })
</script>

配套教程