【Vue学习】基础语法(二)

最新推荐文章于 2024-09-19 08:43:08 发布

橙点点

最新推荐文章于 2024-09-19 08:43:08 发布

阅读量214

点赞数

分类专栏： vue学习文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/qq_44976861/article/details/124474712

版权

vue学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.计算属性computed

1.计算属性的基本使用(字符串拼接)

<body>
    <div id="app">
        <!-- 法一 -->
        <h2>{{firstName + ' ' + lastName}}</h2> 
        <!-- 法二 直接拼接(一般不使用,语法过于繁琐) -->
        <h2>{{firstName}} {{lastName}}</h2>
        <!-- 法三 通过定义methods (使用几次就会调用几次)-->
        <h2>{{getFullName()}}</h2>
        <!-- 法四 通过computed计算属性(内部会缓存,值不改变时使用多次只会调用一次) -->
        <h2>{{fullName}}</h2>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            // computed 计算属性(简写)
            computed: {
                fullName: function(){
                    return this.firstName + ' ' + this.lastName
                }
            },
            methods: {
                getFullName: function(){
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script> -->
</body>

2.计算属性的复杂操作(计算集合中属性值之和)

<body>
    <div id="app">
        <h2>总价格:{{totalPrice}}</h2>     
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [
                    {id: 110, name:'计算机组成原理', price: 119},
                    {id: 111, name:'操作系统', price: 123},
                    {id: 112, name:'计算机网络', price: 129},
                    {id: 113, name:'数据结构', price: 99},
                ]
            },
            computed: {
                totalPrice: function() {
                    let result = 0;
                    for (let i=0; i < this.books.length; i++){
                        result += this.books[i].price
                    }
                    return result
                    
                    // 以下两种用法也可以实现(es6新增) 后面学习
                    // for(let i in this.books){this.books[i]}
                    // for(let book of this.books){}
                }
            }
        })
    </script> 
</body>

3.计算属性的setter和getter

计算属性的完整写法是有set方法和get方法,但由于计算属性一般是只读属性,不写set方法.

<div id="app">
            <h2>{{fullName}}</h2>
            <!-- 本质是一个属性,不是函数,故不用加括号 -->
        </div>
    
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    firstName: 'Lebron',
                    lastName: 'James' 
                },
                computed: {
                    fullName:{
                        //如果想设置计算属性为读写属性(一般为只读,不设置set方法,故可以直接简写为computed: {fullName: function(){})
                        set: function(newValue){
                            const names = newValue.split('');//通过空格拆分字符串
                            this.firstName = names[0];
                            this.lastName = names[1];
                        },
                        get: function(){
                            return this.firstName + ' ' + this.lastName
                        }
                    }
                },
            })
        </script>

二.常用es6语法

1.let/var

let有块级作用域,而var没有块级作用域

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        //ES5中的var没有块级作用域的概念(if和for),所以在很多时候,我们都必须借助function的作用域来解决应用外面变量的问题
        //借助闭包
        var btns = document.getElementsByTagName('button');
        for (var i=0; i<btns.length; i++){
            (function(num){
                btns[i].addEventListener('click',function(){
                    console.log('第' + num + '个按钮被点击');
                })
            })(i)
        }

        //在ES6中,加入了let,它有块级作用域(if和for)
        const btns = document.getElementsByTagName('button');
        for (let i=0; i<btns.length; i++){
            btns[i].addEventListener('click',function(){
                console.log('第' + i + '个按钮被点击');
            })
        }
    </script>
</body>

2. const的使用

作用: 将某个标识符修饰为常量,不可再次赋值,保证数据的安全性.
建议: 在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let.
注意:
1. 一旦给const修饰的标识符赋值后,不可修改
2. 在使用const定义标识符时,必须进行赋值
3. 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性

const obj = {
        name: 'pdh',
        age: 23,
        height: 1.85
    }
    console.log(obj);

    obj.name = 'kobe';
    obj.age = 42;
    obj.height = 1.92;
    console.log(obj);

3.对象字面量的增强写法

属性的增强写法

//1.属性的增强语法
        const name = 'pdh';
        const age = 18;
        const height = 1.88;
        //ES5的写法
        // const obj = {
        //     name: name,
        //     age: age,
        //     height: height
        // }

        //ES6的写法
        const obj = {
            name,
            age,
            height
        }
        console.log(obj);

函数的增强写法

//2.函数的增强写法
        //ES5的写法
        // const obj = {
        //     run: function (){

        //     },
        //     eat: function(){

        //     }
        // }
        //ES6的写法
        const obj = {
            run(){

            },
            eat(){

            }
        }

三. 事件监听

v-on指令
- 作用: 绑定事件监听器
- 缩写: @
- 参数:event

1.基本使用

<div id="app">
        <h2>当前计数: {{counter}}</h2>
        <!--  <button v-on:click="counter++">+</button> -->
        <!-- <button v-on:click="counter--">-</button> --> 
        <button v-on:click="increment">+</button>
        <button @click="decrement">-</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data : {
                counter : 0
            },
            methods : {
                increment(){
                    this.counter++;//用this指向当前对象
                },
                decrement(){
                    this.counter--;
                }
            }
        })
    </script>

2.注意

当在methods中定义方法,以供@click调用时,需注意以下情况:
- 情况一: 在事件监听时,如果该方法不需要额外参数,那么方法后的()可以不添加.但如果方法本身有一个参数,那么会默认将原生事件event参数传递进去.
- 情况二: 如果需要同时传入某个参数,且需要event时,可以通过 $event传入事件.

<body>
    <div id="app">
        <!-- 1.事件调用的方法没有参数(括号可以省略) -->
        <button @click="btn1click()">按钮1</button>    
        <button @click="btn1click">按钮1</button>    

        <!-- 2.在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,此时vue会默认将浏览器生产的event事件对象作为参数传入到方法 -->
            <!-- <button @click="btn2click(123)">按钮2</button>  -->
            <!-- 如果函数需要参数,但是没有传入,那么函数的形参为undefined -->
            <!-- <button @click="btn2click()">按钮2</button>     -->
        <button @click="btn2click">按钮2</button>   
        
        <!-- 3.方法定义时,当我们既需要event对象,也需要其他参数时 -->
        <!-- 在调用方式,手动获取浏览器参数的event对象: $event -->
        <button @click="btn3click(123, $event)">按钮3</button>    
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
            },
            methods: {
                btn1click(){
                   console.log("btn1click");
                },
                btn2click(event){
                   console.log("-------",event);
                },
                btn3click(abc, event){
                    console.log('+++++++', abc, event);
                }
            },
        })
    </script>
</body>

3. v-on的修饰符

<body>
    <div id="app">
        <!-- 1. .stop修饰符的使用 (阻止冒泡)-->
        <div @click="divClick">
            aaaaa
            <button @click.stop="btnClick">按钮</button>
        </div>
        <br>

        <!-- 2. .prevent修饰符的使用(阻止默认事件) -->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

        <!-- 3. .{keyCode|keyAlias}监听键盘的某个按键 -->
        <input type="text" @keyup.enter="keyUp">

        <!-- 4. .once修饰符的使用(只触发一次回调) -->
        <button @click.once="btn2Click">按钮2</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
            },
            methods: {
                btnClick() {
                    console.log("btnClick");
                },
                divClick() {
                    console.log("divClick");
                },
                submitClick() {
                    console.log("submitClick");
                },
                keyUp() {
                    console.log('keyup');
                },
                btn2Click() {
                    console.log('btn2Click');
                }
            },
        })
    </script>
</body>

四.条件判断指令

1. v-if的使用

v-if 和 v-else 的使用

<body>
    <div id="app">
        <h2 v-if="isShow">
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            {{message}}
        </h2> 
        <h1 v-else>isShow为FALSE</h1>    
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
                isShow : true
            }
        })
    </script>
</body>

v-if 和 v-else-if 和 v-else 的使用

<div id="app">
        <h2 v-if="score >= 90">成绩优秀</h2>     
        <h2 v-else-if="score >= 60">成绩及格</h2>  
        <h2 v-else>成绩不合格</h2>   
    </div>

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

2.条件渲染小案例

(用户登录时,切换使用账号或者邮箱登录)

<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户账号</label> 
            <input type="text" id="username" placeholder="用户账号">
        </span>
        <span v-else>
            <label for="email">用户邮箱</label>
            <input type="text" id="email" placeholder="用户邮箱">
        </span>
        <button @click="isUser = !isUser">切换类型</button>
    </div>

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

小问题: 当点击切换按钮时,输入框内已经输入的内容不会清空
- 原因: 涉及Vue底层原理,输入的内容会先到虚拟DOM中.Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素.在以上案例中,Vue内部发现input元素不再使用,就直接会拿来作为else中的input来使用.
- 解决方案: 如果不希望Vue出现类似重复利用的问题,可以给对应的input添加key属性,需保证key值的不同(发现key值不同时,Vue将不会进行复用)
  <input type="text" id="username" placeholder="用户账号" key="username">
  <input type="text" id="email" placeholder="用户邮箱" key="email">

3. v-show

用法和 v-if 非常相似,都用于决定一个元素是否渲染

<body>
    <div id="app">
        <!-- 当条件为false时,包含v-if指令的元素,根本就不会存在于DOM中 -->
        <h2 v-if="isShow" id="aaa">{{message}}</h2>     

        <!-- 当条件为false时,v-show只是给元素添加了一个行内样式: display: none  -->
        <h2 v-show="isShow" id="bbb">{{message}}</h2>     
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message : '你好啊',
                isShow : true
            }
        })
    </script>
</body>

v-if 和 v-show的区别:
当条件为false时,包含v-if指令的元素,根本就不会存在于DOM中,而v-show只是给元素添加了一个行内样式: display: none
开发中如何选择:
- 当需要在显示与隐藏之间频繁切换时,一般使用 v-show
- 当只有一次切换时,一般使用 v-if