Vue - 2 插值语法与指令系统

目录

Vue - 2 插值语法与指令系统

一、插值语法

Vue中的插值语法必须写在标签内部，而DTL(Django Template Language)则可以写在标签的属性中

语法

<body>
<div id="app">
  
{{变量名}}
  
</div> 
</body>
<script>
    // 配置项 通过key:value的形式配置
    var vm = new Vue({
        el: '#app',  // 标签选择 
        // data是要插入的数据值，已k:v形式编写
        data: {
            title: 'Vue插值语法',
            desc: 'vue框架提供的插值语法，将数据渲染到对应的变量名中',
        }
    })
</script>

插值语法中可以放变量、对象取值、数组取值、简单的js语法、函数()

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- div标签会被vue托管-->
<div id="app">
<!--    插值语法：将数据值渲染到变量name中-->
    <p>{{title}}</p>
    <p>简介：{{desc}}</p>
    <p>(数组)：{{arrayList}}-----{{arrayList[0]}}</p>
    <p>(对象取值)：{{msg}}-------{{msg.name}}</p>
    <p>(运算){{1+2*20}}</p>
    <p>(三目运算符【条件?'符合了':'不符合了'】){{100>90?'符合条件':'不符合条件'}}</p>
    <p>(标签){{a_url}}</p>
    <p>( 函数() )</p>
</div>
 
</body>
<script>
    // 配置项 通过key:value的形式配置
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'Vue插值语法:可以存放的类型',
            desc: 'vue框架提供的插值语法，将数据渲染到对应的变量名中',
            arrayList:['榆木','玉米'],
            msg:{name:'duo',age:18},
            a_url:'<a href="http://www.baidu.com">点我看美女</a>',
 
        }
    })
</script>
</html>
image-20230214210216101

二、指令

1.什么是指令系统？

在Vue中写在标签属性中的，如v-xx形式的统称为指令

  • 如
<p v-text="a_url"></p>

2.文本指令

指令 释义
v-html 让HTML渲染成页面
v-text 标签内容渲染成js变量对应的值
v-show 等于布尔值：为true，标签就显示；为false，标签就不显示(通过样式控制显示不显示)
v-if 等于布尔值：为true，标签就显示；为false，标签就不显示(整个标签之间删除，效率低，控制在dom中删除标签)

v-html

把字符串的内容渲染成标签，写在标签内部

    <h2>v-html</h2>
    <p v-html="a_url"></p>
 
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我看美女</a>',
        }
    })
</script>
image-20230214235750372

v-text

直接把字符串内容渲染在标签内部，等同于插值语法

<div id="app">
    <h2>v-text</h2>
    <p v-text="a_url"></p>
</div>
<script>
    // 配置项 通过key:value的形式配置
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我看小狗</a>',
        }
    })
</script>
image-20230214235917377

v-show：显示/隐藏任务

等于布尔值，该标签是否显示，v-show是通过添加css的样式来控制是否显示：display:none

<div id="app">
    <h2>v-show</h2>
    <img v-show="show" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px">
 
</div>
 
<script>
    // 配置项 通过key:value的形式配置
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
        }
    })
</script>
image-20230215000147798

v-if：显示/删除任务

等于布尔值，该标签是否显示。其与v-show不同，底层是通过dom删除标签来展示标签的，当布尔值为false时会将整个标签删除（效率较v-show较低）

<div id="app">
    <h2>v-show</h2>
    <img v-show="show" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px">
    <h2>v-if</h2>
    <img v-if="ifShow" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px">
 
 
</div>
 
<script>
    // 配置项 通过key:value的形式配置
    var vm = new Vue({
        el: '#app',
        data: {
            show: false,
            ifShow: false
        }
    })
</script>

当v-show和v-if 对应的布尔值都是false时候，v-show只是将标签隐藏，而v-if是将标签直接删除

image-20230215000621631

3.属性指令

指令 释义
v-bind v-bind:属性名="变量名"
: :属性名="变量名" 
v-bind:属性名='js变量名'
缩写
:属性名='js变量名'

标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化

如：

href、src、name、class、style、height

4.事件指令

通过v-on来讲事件和标签绑定

指令 释义
v-on 触发事件（不推荐）
@ 触发事件（推荐）
@[event] 触发event事件（可以是其他任意事件）

语法

v-on:事件名="函数名"，函数必须写在methods的配置项中
缩写
@:事件名="函数名"
<button v-on:click="handleClick">点我看美女
methods:{
            'handleClick':function (){
                // alert('美女')
                console.log(this)  // this 就是当前vue实例，就是vm实例
                this.show=!this.show
            },

在vue的中，this值得是vue的vm实例，但是当在vm实例中如果又嵌套了一层函数，this的指代有可能不同，注意区分

5.class和style

语法

:属性名='js变量/js语法'
  • class
:class='字符串、数组、对象'

对于class推荐使用数组来进行绑定

  • style
:style='字符串、数组、对象'

对于style推荐使用对象来进行绑定

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style 和 Class</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .red {
            color: rgba(255, 104, 104, 0.7);
        }
        .font-20 {
            font-size: 20px;
        }
        .be-bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
 
<div id="app">
    <p>p标签</p>
    <div :class="class_obj">
        <p>class的p标签</p>
    </div>
 
    <button @click="handleClick">点击放大字体</button>
    <div :style="style_obj">
        <p>style的p标签</p>
    </div>
</div>
 
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class_obj: 'red',    // 放1个是字符串
            class_obj: ['red', 'font-20', 'be-bold'],    // 放2个是数组
            // class_obj: { red:true, be-bold:false},    // 也可以放对象
            // 数组.push()   从尾部添加1个元素
            // 数组.pop()    删除最后1个元素 并返回
 
            // 对象的写法
            style_obj: {
                color: 'red',
                fontSize: '20px'
            }
            // style_obj: [{background:'red'}, {fontSize:'20px'}]
 
        },
        methods: {
            handleClick(){
                this.style_obj['fontSize']='30px'
            }
        }
 
    })
</script>
</html>

三、渲染

1.条件渲染

语法

v-if=条件1
绑定给标签，如果条件1成立，该标签就显示；如果条件不成立，该标签就不显示
 
v-else-if=条件2  
绑定给标签，如果条件2成立，该标签就现实；如果条件不成立，该标签就不显示
 
v-else     
绑定给标签，上面条件都不成立，显示这个标签

案例

<div id="app">
    <h1>通过分数显示文字</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=60&&score<80">及格</div>
    <div v-else>不及格</div>
 
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 99
        },
    })
</script>
image-20230215012557871

2.循环渲染

语法

<标签 v-for="item in 数组">
    {{item.xxx}}
    {{item.yyy}}
</标签>

案例

<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h2 class="text-center">循环渲染</h2>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in msg" :class="item.background">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: [
                {id: "1", name: "duo", age: 18},
                {id: "2", name: "jason", age: 18},
                {id: "3", name: "justin", age: 18}
            ]
        }
    })
</script>
image-20230215013610322
posted @   Duosg  阅读(145)  评论(0)  编辑  收藏  举报
相关博文：
· Vue - 3 事件处理、表单输入绑定
· Vue - 回顾与总结
· Vue框架：2、插值语法，文本指令，属性指令，事件指令，class和style，条件渲染，列表渲染
· Vue 02
· vue-day02插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示