vue.js学习笔记三

最新推荐文章于 2023-03-30 17:48:19 发布

-恰饭第一名-

最新推荐文章于 2023-03-30 17:48:19 发布

阅读量98

点赞数

分类专栏：学习笔记 vue 文章标签： vue

原文链接：https://blog.csdn.net/hxy1625309592/article/details/116100489

版权

学习笔记同时被 2 个专栏收录

151 篇文章 8 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

一、ES6

1、块级作用域let/var

js中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关
针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题

<script>
        //ES5中的var是没有块级作用域的(if/for)
        //ES6中的let是有块级作用域的(if/for)

        //ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用域来解决应用外面变量的问题
        //ES6中，加入了let，let它是有if和for的块级作用域
        //1.变量作用域：变量在什么范围内是可用
        {
            var name = "why";
            console.log(name); //why
        }
        console.log(name); //why

        //2.没有块级作用域引起的问题：if的块级
        var func;
        if (true) {
            var name = "why";
            func = function() {
                console.log(name); //why
            }
            func();
        }
        name = "kobe";
        func();//kobe
        console.log(name);//kobe

        var name = "why";

        function abc(bbb) {
            console.log(bbb); //kobe
        }
        name = "kobe";
        abc(name);

        //3.没有块级作用域引起的问题：for的块级
        //为什么闭包可以解决问题：函数是一个作用域
        var btns = document.getElementsByTagName("button");
        for (var i = 0; i < btns.length; i++) {
            (function(num) {
                btns[i].addEventListener("click", function() {
                    console.log("第" + num + "个按钮被点击");
                })
            })(i)
        }

        const btns = document.getElementsByTagName("button");
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function() {
                console.log("第" + i + "个按钮被点击");
            })
        }
        </script>

2、const的使用

<script>
        //1、注意一：一旦给const修饰的标识符被赋值之后，不能修改
        // const name = "why";
        // name = "abc";

        //2、注意二：在使用const定义标识符，必须进行赋值
        // const name;

        //3、注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
        const obj = {
                name: "why",
                age: 18,
                height: 1.88
            }
            //obj = {} //Uncaught TypeError: Assignment to constant variable.
        console.log(obj); //{name: "why", age: 18, height: 1.88}

        obj.name = "kobe";
        obj.age = 40;
        obj.height = 1.87;
        console.log(obj); //{name: "kobe", age: 40, height: 1.87}
    </script>

const关键字
在很多语言中已经存在，比如C/C++中，主要的作用是将某个变量修饰为常量
在JavaScript中也是如此，使用const修饰的标识符为常量，不可以再次赋值
什么时候使用const呢？
当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性
建议：在ES6开发中，优先使用const，只有需要改变某一标识符的时候才使用let
const的注意：
const注意一：

const注意二：
在这里插入图片描述

3、对象增强写法

 <script>
        // const obj = new Object()
        // const obj = {
        //     name: "why",
        //     age: 18,
        //     run: function() {
        //         console.log("在奔跑");
        //     },
        //     eat: function() {
        //         console.log("在此东西");
        //     }
        // }



        //1、属性的增强写法
        // const name = "why";
        // const age = 18;
        // const height = 1.88

        // //ES5的写法
        // const obj = {
        //     name: name,
        //     age: age,
        //     height: height
        // }
        // console.log(obj); //{name: "why", age: 18, height: 1.88}

        // const obj1 = {
        //     name,
        //     age,
        //     height
        // }
        // console.log(obj1); //{name: "why", age: 18, height: 1.88}


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

            },
            eat: function() {

            }
        }

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

            },
            eat() {

            }
        }
    </script>

ES6中，对对象字面量进行了很多增强
属性初始化简写和方法的简写：

在这里插入图片描述

二、事件监听

在前端开发中，我们需要经常用于交互
这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
再Vue中如何监听事件呢？使用v-on指令
v-on介绍
作用：绑定事件监听器
缩写：@
预期：Function | Inilne Statement | Object
参数：event

1、v-on基础

这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
下面的代码中，我们使用了v-on:click=“counter++”
另外，我们可以将事件指向一个在methods中定义的函数
注：v-on也有对应的语法糖：
v-on:click可以写成@click

    <div id="app">
        <h2>{{counter}}</h2>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            increment() {
                this.counter++
            },
            decrement() {
                this.counter--
            }
        }
    })
</script>

2、v-on参数

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

<div id="app">
        <!-- 1.事件调用的方法没有参数 -->
        <button @click="btn1Click()">按钮1</button>
        <button @click="btn1Click">按钮1</button>

        <!-- 2.在事件定义时,写方法时省略了小括号，
        但是方法本身是需要一个参数的，这个时候,
        Vue会默认将浏览器事件对象作为参数传入到方法 -->
        <!--<button @click="btn2Click(123)">按钮2</button>-->
        <!--<button @click="btn2Click()">按钮2</button>-->
        <button @click="btn2Click">按钮2</button>


        <!-- 3.方法定义时，我们需要event对象，同时又需要其他参数 -->
        <!-- 在调用方式，如何手动的获取到浏览器参数的event对象：$event -->
        <button @click="btn3Click(abc, $event)">按钮3</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊",
                    anc: 123
                },
                methods: {
                    btn1Click() {
                        console.log(btn1Click);
                    },
                    btn2Click(event) {
                        console.log('--------', event);
                    },
                    btn3Click(abc, event) {
                        console.log("_________", abc, event);
                    }
                }
            })
            // 如果函数需要参数,但是没有传入, 那么函数的形参为undefined
            // function abc(name) {
            //   console.log(name);
            // }
            //
            // abc()
    </script>

3、v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理
Vue提供了修饰符来帮助我们方便的处理一些事件
.stop 调用event.stopPropagation()
.prevent 调用event.preventDefault()
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调
.native 监听组件根元素的原生条件
.once 只触发一次回调

 <div id="app">
        <!-- 1. .stop修饰符的使用 -->
        <div @click="divClick">
            aaaaa
            <button @click="btnClick">按钮</button>
        </div>

        <!-- 2. .prevent修饰符的使用 -->
        <br>
        <form action="百度" method="get">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

        <!-- 3. .监听某个键盘的键帽 -->
        <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>

三、v-if、v-else-if、v-else

这三个指令与JavaScript的条件语句if、else、else if类似
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
简单的案例演示

    <div id="app">
        <h2 v-if="isShow">
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            <div>abc</div>
            {{message}}
        </h2>
    </div>

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

v-if后面的条件为false时，对应的元素1以及子元素不会渲染
也就是根本不会有对应的标签出现在DOM中

<div id="app">
        <h2 v-if="isShow">
            <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: false
            }
        })
    </script>

   <div id="app">
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>
        <h1>{{result}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                score: 99
            },
            computed: {
                result() {
                    let showMessage = '';
                    if (this.score >= 90) {
                        showMessage = '优秀'
                    } else if (this.score >= 80) {
                        showMessage = '良好'
                    }
                    return showMessage
                }
            }
        })
    </script>

四、条件渲染案例

我们来做一个简单的小案例

用户再登录时，可以切换使用用户账户登录还是邮箱地址登录
类似如下情景

在这里插入图片描述

<div id="app">
        <span v-if="isUser">
          <label for=" username">用户账户</label>
          <input type="text" name="" id="username" placeholder="用户账户">
        </span>
        <span v-else>
          <label for="email">用户邮箱</label>
          <input type="text" name="" 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>

五、案例小问题

小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容
但是按道理讲，我们应该切换到另外一个input元素中了
在另一个input元素中，我们并没有输入内容
为什么会出现这个问题呢？

问题解答：

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用

解决方案：

如果我们不需要Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同

在这里插入图片描述

六、v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
v-show和v-if对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中
v-show当条件为false时，仅仅是将元素的display属性设置为none而已
开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

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

        <!--v-show: 当条件为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>

-恰饭第一名-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习笔记三

一、let/var1、块级作用域js中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题<script> //ES5中的var是没有块级作用域的(if/for) //ES6中的let是有块级作用域的(if/for) //ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用域来解决应用外
复制链接

扫一扫