(3)Vue基础语法

1、v-bind

当我们需要为我们的html标签中的属性动态绑定数据时

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        [v-cloak]{
            display: none
        }
    </style>

    <body>
            <div id="app">
                <a v-bind:href="URL">百度一下</a>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    URL: "www.baidu.com"
                },
        })
        </script>
    </body>
</html>

结果如下:
在这里插入图片描述

语法糖形式(简写): v-bind 等同于 :
在这里插入图片描述

2、v-bind之绑定class属性

  1. 对象语法
  2. 数组语法

对象语法

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        .active{
            color: red;
        }
    </style>

    <body>
            <div id="app">
                <h1 class="test" :class="{'active' : true}">hello world111111</h1>
                <h1 :class="{'active' : showRed}">hello world22222</h1>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    showRed: true 
                },
        })
        </script>
    </body>
</html>

结果如下:
在这里插入图片描述
为true时,会为class添加该值,并且如果本身class有值,会追加在后面

也可以传多个对象

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        .active{
            color: red;
        }
    </style>

    <body>
            <div id="app">
                <h1 class="test" :class="{'active' : true}">hello world111111</h1>
                <h1 :class="{'active' : showRed,'line' : isline}">hello world22222</h1>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    showRed: true,
                    isline: true
                },
        })
        </script>
    </body>
</html>

在这里插入图片描述

数组语法

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        .active{
            color: red;
        }
    </style>

    <body>
            <div id="app">
                <h1  :class="message">hello world111111</h1>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                   message: ['html',"java","python"] 
                },
        })
        </script>
    </body>
</html>

在这里插入图片描述

3、v-bind之style

  1. 对象语法
  2. 数组语法

对象语法

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <h1  :style="{'color' : colorValue,'fontSize' : fontValue +'px'}">hello world111111</h1>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    colorValue: "red",
                    fontValue: "22" 
                },
        })
        </script>
    </body>
</html>

在这里插入图片描述

4、v-on

为我们的事件添加监听器

如为我们的点击事件添加监听器:

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <button  v-on:click="btn">点击</button>  {{msg}}
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    msg: "hello world"
                },
                methods:{
                    btn : function(){
                        this.msg="点击了"
                    }
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述

语法糖(简写): v-on 等同于 @

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <button  @click="count++">1</button>  {{count}}
                <button  @click="btn">1</button>  
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    count: 0
                },
                methods:{
                    //Es6 语法:  省略:function
                    btn(){
                       this.count--
                    }
                }
        })
        </script>
    </body>
</html>


当函数需要传值时
在这里插入图片描述
在这里插入图片描述

当函数需要传值,而不传时
在这里插入图片描述
在这里插入图片描述
默认会传浏览器的event事件

当函数既要传值,又要event事件时
在这里插入图片描述
在这里插入图片描述

v-on之修饰符

  1. stop
  2. prevent
  3. .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调。
  4. once

stop:阻止冒泡事件

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <span @click="btn2">
                        <button  @click="btn">点击</button>  
                        span区域
                </span>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    count: 0
                },
                methods:{
                    //Es6 语法:  省略:function
                    btn(){
                       console.log("button区域。。。")
                    },
                    btn2(){
                        console.log("span区域。。。")
                    }
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述
span标签包含了button,发现点击button时,span事件也被触发了(冒泡事件)

加了修饰符stop后
在这里插入图片描述
在这里插入图片描述

prevent阻止默认事件

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                        <a href="www.baidu.com" @click="btn">点击</button>  
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    count: 0
                },
                methods:{
                    //Es6 语法:  省略:function
                    btn(){
                       console.log("button区域。。。")
                    }
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述
点击a标签会跳转网页

当使用修饰符prevent

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                        <a href="www.baidu.com" @click.prevent="btn">点击</button>  
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    count: 0
                },
                methods:{
                    //Es6 语法:  省略:function
                    btn(){
                       console.log("button区域。。。")
                    }
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述
a标签失去了原来的跳转事件

.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调。

在这里插入图片描述
在这里插入图片描述
输入时按回车键才会执行。

once:只触发一次
在这里插入图片描述
在这里插入图片描述
不管点击多少次,只触发一次

5、computed计算属性

但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示,比如我们有name1和name2两个变量,我们需要显示完整的名称。 但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                        <h1 >{{name1}} {{name2}}</h1>  
                        <h1 >{{finalName}}</h1>  
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    name1: "kobe",
                    name2: "james"
                },
                methods:{
                    //Es6 语法:  省略:function
                    btn(){
                       console.log("button区域。。。")
                    }
                },
                computed:{
                    finalName(){
                        return this.name1 +" "+this.name2
                    }
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述

计算属性原理:每个计算属性都有set、get方法,计算属性默认调用的是get方法,return回来的值就是计算属性的值。

在这里插入图片描述

调用set方法
在这里插入图片描述

计算属于与函数的对比:计算属性有缓存,性能更佳

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                        <h1 >{{ getFinalName()}}</h1>  
                        <h1 >{{ getFinalName()}}</h1>  
                        <h1 >{{ getFinalName()}}</h1>  

                        <h1>{{finalName}}</h1>  
                        <h1>{{finalName}}</h1>  
                        <h1>{{finalName}}</h1>  

             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    name1: "kobe",
                    name2: "james",
                },
                methods:{
                    //Es6 语法:  省略:function
                    getFinalName(){
                        console.log("函数执行了。。")
                       return this.name1+" "+this.name2
                    }
                },
                computed:{
                    finalName(){
                        console.log("计算属性执行了。。")
                        return this.name1+" "+this.name2
                    }
                      
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述

6、v-if

当我们需要判断标签是否生效时(true生效)

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                    <h1 v-if="score > 90">优秀</h1>
                    <h1 v-else-if="score > 80">良好</h1>
                    <h1 v-else="score >= 60">及格</h1>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    score: 82
                },
              
        })
        </script>
    </body>
</html>

v-if 小案例:切换登录方式

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                   <label for="phone" v-if="check">
                        <input type="text" name="phone" id="phone" placeholder="请输入手机号"/>请输入手机号
                   </label>
                   <label for="email" v-if="!check">
                        <input type="text" name="email" id="email" placeholder="请输入邮箱"/>请输入邮箱
                   </label>
                   <br>
                   <button @click="btn">切换登录方式</button>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    check: true
                },
                methods:{
                    btn(){
                        this.check=!this.check
                    }
                }
              
        })
        </script>
    </body>
</html>

如输入在没有文本输入的情况下,按切换登录按钮,没问题。
在这里插入图片描述
但是在输入文本后再按切换登录方式,发现有问题,输入的文本也带过去了。
在这里插入图片描述

原因:这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素

解决方式:如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key并且我们需要保证key的不同

在这里插入图片描述

7、v-show

跟v-if一样可以决定元素是否要被渲染(true时渲染)

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                    <h1 v-if="check">v-if方式</h1>
                    <h1 v-show="check">v-show方式</h1>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    check: true
                },
                methods:{
                    btn(){
                        this.check=!this.check
                    }
                }
              
        })
        </script>
    </body>
</html>

在这里插入图片描述
可以看出不同:v-show是直接添加display:none属性,v-if为直接删除属性,在需要频繁的显示隐藏时,v-show性能更佳

8、v-for

当我们需要遍历元素时。

  1. 遍历数组
  2. 遍历对象

遍历数组

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <ul>
                    <li v-for="(item,index) in movies ">{{index}}  {{item}}</li>
                </ul>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    movies: ["海贼王","火影忍者","七龙珠"]
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述

遍历对象

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <ul>
                    <li v-for="(value,key,index) in students ">{{index}}  {{key}}  {{value}}</li>
                </ul>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    students: {
                        info:
                            { 
                                "id":0,
                                "name": "xian",
                                "age": 18
                            }
                    }
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述

官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性
在这里插入图片描述

检测数组更新

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <body>
            <div id="app">
                <ul>
                    <li v-for="(item,index) in movies ">{{index}}  {{item}}  </li>
                </ul>
                <ul>
                     <li v-for="(item,index) in testSort ">{{index}}  {{item}}  </li>
                 </ul>
                <button @click="btn">点击</button>
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    movies: ["火影忍者","海贼王","七龙珠","盗梦空间"],
                    testSort: ["a","b","c","g","e"]
                },
                methods:{
                    btn(){
                        //末尾弹出一个元素
                        //this.movies.pop()

                        //末尾插入元素
                        // this.movies.push("aaa","bbb")

                        //末尾弹出一个元素
                        // this.movies.shift()

                        //头部插入元素
                        // this.movies.unshift("aaa","bbbb")

                        //从第一个位置开始,删除2个元素
                        // this.movies.splice(1,2)
                        
                        //从第一个位置开始,插入2个元素
                        // this.movies.splice(1,0,"aa","bb")

                        //从第一个位置开始,替换2个元素
                        // this.movies.splice(1,2,"aa","bb")
                        
                        //排序
                        // this.testSort.sort()
                        // this.movies.sort()
                        
                        //反转元素
                        this.movies.reverse()
                    }
                }
        })
        </script>
    </body>
</html>

9、v-model

双向绑定,当我们需要把数据绑定在文本框,并且用户更新了文本框输入的值时,也需要把最新值绑定回数据

<html>
    <head>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <body>
            <div id="app">
                <input type="text" v-model="message"/>
                {{message}}
             </div>
        <script type="text/javascript">
            const vue = new Vue({
                el: '#app',
                data: {
                    message: "hello world"
                }
        })
        </script>
    </body>
</html>

在这里插入图片描述
v-model原理:
在这里插入图片描述

v-model之radio
在这里插入图片描述

v-model之checkbox
在这里插入图片描述

v-model之select
在这里插入图片描述

v-model之修饰符
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值