03-Vue指令

Posted 2023-02-08 极客江南

很高兴在我的分享里与你认识，想持续跟着江哥学习 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渲染的数据未发生变化。

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>

点击下方卡片，关注微信公众号 回复 书籍 获取 c语言、Go语言、Git等近百万字原创保姆级编程电子书