vue.js学习笔记三

Posted -恰饭第一名-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js学习笔记三相关的知识,希望对你有一定的参考价值。

一、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" namevue.js学习笔记三

vue.js学习笔记三

vue.js学习笔记:什么是mvvm框架,vue.js的核心思想

Vue学习笔记01:准备开发与调试环境

Vue.js学习笔记: 数据绑定语法---绑定表达式

vue.js精讲02