Vue 基本指令

最新推荐文章于 2024-05-28 11:44:38 发布

宇宙无敌程序员+1

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量302

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_58875572/article/details/129049370

版权

Vue.js的基本指令

主要任务：Vue的基本指令

1、插值表达式：{{ }}

2、v-show

3、v-if、v-else、v-elseif

4、v-for

5、class和style绑定

一、复习

1、vue框架：是一个渐进式的用于构建用户界面的前端框架

2、vue的使用

（1）页面中引用vue.js文件

（2）vue脚手架：vue-cli

3、Vue实例：

（1）el：用来指定vue实例的容器

（2）data：用来定义Vue实例的数据(属性)

4、v-show指令：

（1）用来显示或隐藏页面元素的：放在页面标签中，它会绑定一个boolean型变量（true显示，false隐藏）

（2）本质是通过控制元素的CSS样式的display属性来实现元素的显示和隐藏

二、基本指令

1、v-if指令：条件渲染指令。使用if条件语句对相关的变量进行判断

（1）根据条件控制页面元素的显示和隐藏

（2）本质是通过DOM的appendChild命令在页面中添加元素的

2、v-show和v-if的区别（重点）

（1）实现方式：v-show底层是通过CSS的display实现的，v-if底层是通过appendChild实现的。

（2）加载速度：v-if的加载速度快，v-show的加载速度慢

（3）切换开销：v-if的切换开销大，v-show的切换开销小

3、v-else-if、v-else指令

<div id="app">
        <span v-if="score>=90">优秀</span>
        <span v-else-if="score>=75">良好</span>
        <span v-else-if="score>=60">及格</span>
        <span v-else>不及格</span>
</div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                score: 55
            }
        })
    </script>

课堂练习：判断并输出2019年2月的天数

判断闰年的条件：

（1）年份对400取余等于0，且对100取余不等于0

（2）年份对4取余等于0

4、v-for指令：使用循环的方式渲染一组数据。指令操作的对象可以是数组、对象

（1）对象数组：数组中的每个元素都是对象（使用v-for循环遍历一个数组）

   <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th width="100">编号</th>
                    <th width="150">书名</th>
                    <th width="100">作者</th>
                    <th width="100">单价</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(book,index) in books" align="center">
                    <td>{{ index+1 }}</td>
                    <td>{{ book.title }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.price }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                books: [
                    {title: '天龙八部',author:'金庸',price:78.5},
                    {title: '西游记',author:'吴承恩',price:95},
                    {title: '三国演义',author:'罗贯中',price:45},
                    {title: '平凡的世界',author:'路遥',price:67}
                ]
            }
        })
    </script>

课堂练:1：电影票房的排名

（2）使用v-for遍历对象的所有属性

        <ul>
            <li v-for="value in student">{{ value }}</li>
        </ul>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                student:{
                    name: '曹操',
                    sex: '男',
                    age: 18,
                    address: '西安'
                }
            }
        })

课堂练习2：使用v-for循环输出一个九九乘法表

<style>
    span{
        width: 80px;
        height: 30px;
        display: inline-block;
    }
</style>
<body>
    <div id="app">
        <div v-for="n in val">
            <span v-for="m in n">{{m}}*{{n}}={{ m*n }}</span>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data:{
                val: 9
            }
        })
    </script>
</body>

5、元素的class属性的绑定

（1）class属性的作用：定义了另外一种定位页面元素的途径

（2）v-bind指令：又称为动态绑定指令。作用是将页面元素的属性绑定到变量上

    <div id="app">
        <img v-bind:src="imgUrl" width="300" height="180">
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                imgUrl:'./images/1.png'
            }
        })
    </script>

课堂练习3：动态绑定a标签的href属性

（3）v-bind的语法糖：（：属性名）

（4）使用v-bind绑定class属性

A、对象写法：页面元素的class属性绑定的是一个对象

<style>
    .class1{
        font-size: 45px;
    }
    .class2{
        color: red;
    }
</style>
<body>
    <div id="app">
        <p v-bind:class="cls">{{ info }}</p> //cls是一个对象
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                info:'AAAAAAA',
                cls:{
                    class1:true,
                    class2:true
                }
            }
        })
    </script>
</body>

B、数组写法：元素的class属性绑定的是一个列表（样式列表）

<style>
    .class1{
        font-size: 45px;
    }
    .class2{
        color: red;
    }
</style>
<body>
    <div id="app">
        <p :class="[c1,c2]">{{ info }}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                info:'AAAAAAA',
                c1: 'class1',
                c2: 'class2'
            }
        })
    </script>
</body>

6、元素内联样式的绑定：给元素的style属性绑定变量

A、对象语法：style绑定一个对象，对象的属性名就是样式属性名

 <div v-bind:style="{color:myColor,fontSize:mySize}">蜗牛学苑</div>

 <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                myColor: 'red',
                mySize: '35px'
            }
        })
 </script>

B、数组语法：给style属性绑定一个数组，数组中元素是对象

<div v-bind:style="[k1,k2]">茂陵</div>

<script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                k1:{ color: 'blue'},
                k2:{ fontSize: '65px'}
            }
        })
    </script>