一、vue基础语法（二）

Vue.js模版语法（二）——>vue 2

 一、事件监听

事件监听：v-on 指令

实例：<button v-on:click="counter++">按钮+</button>

语法糖：@      <button @click="counter++">按钮+</button>

1、示例：

 

<body>
    <div id='app'>
        <h2>{{counter}}</h2>
        <!-- <button v-on:click="counter++">按钮+</button>
        <button v-on:click="counter--">按钮-</button> -->

        <button @click="increase">按钮+</button>
        <button @click="decrease">按钮-</button>

    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: {
                increase() {
                    this.counter++
                },
                decrease() {
                    this.counter--
                }
            }
        });
    </script>
</body>
View Code

 

2、v-on的参数问题 

当通过methods定义方法时，需要注意参数问题：

  • 如果该方法不需要参数，方法调用时 () 可以不加
  • 但是如果方法本身需要一个参数，而我们在调用时既没有写 () 又没有传参，那么会将event对象传递进去
  • 如果需要传递多个参数，同时还需要传递event时，可以通过$event传递
<body>
    <div id='app'>

        <!-- 无参数 -->
        <button @click="btn1Click">按钮1</button>
        <button @click="btn1Click()">按钮1</button>

        <!-- 有一个参数 -->
        <!-- 当方法需要一个参数, 而写方法时省略了小括号,这时候,Vue会将浏览器生成的event事件对象作为参数传递 -->
        <button @click="btn2Click">按钮21</button>
        <!-- 此种情况注意有没有括号的区别 -->
        <!-- 下面一行会输出 undefined -->
        <button @click="btn2Click()">按钮22</button>
        <button @click="btn2Click(123)">按钮23</button>

        <!-- 当既需要其他参数,又需要event对象 -->
        <!-- 手动获取浏览器的event对象: $event -->
        <button @click="btn3Click">按钮3</button>
        <button @click="btn3Click(option,$event)">按钮3</button>

    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                option: 'option'
            },
            methods: {
                btn1Click() {
                    console.log('btn1被点击了');
                },
                btn2Click(event) {
                    console.log('bt2被点击了', event);
                },
                btn3Click(option, event) {
                    console.log('bt3被点击了', option, event);
                }
            }
        });
    </script>
</body>

3、v-on 修饰符

  <!-- 阻止事件冒泡 -->
    <button @click.stop="fn">阻止事件冒泡</button>

    <!-- 阻止默认行为 -->
    <button type="submit" value="提交" @click.prevent>submit</button>
    <button type="submit" value="提交" @click.prevent="submitClick">submit</button>

    <!-- 串联修饰符 -->
    <button @click.stop.prevent="fn"></button>

    <!-- 按键修饰符，按键名 -->
    <input type="text" @keyup.enter="fn">

    <!-- 按键修饰符，按键代码 -->
    <input type="text" @keyup.13="fn">

    <!-- 监听全部键盘事件 -->
    <input type="text" @keyup="fn">

    <!-- .once修饰符，点击后只回调一次 -->
    <button @click.once="fn"></button>

　　......

二、条件判断

指令：v-if、v-else-if、v-else

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

1、v-if

原理：v-if后面的条件为false时，对应的元素及其子元素都不会被渲染

<body>
    <div id='app'>
        <!-- <h2 v-if="false">{{message}}</h2> -->
        <h2 v-if="isShow">{{message}}</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                isShow: true
            },
        });
    </script>
</body>
View Code

2、v-else

原理：当v-if的条件为false时，执行v-else

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

        <h2 v-else>v-if为false时,显示我</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                isShow: false
            },
        });
    </script>
</body>
View Code

3、v-else-if

原理：当v-if条件为false时，执行v-else-if，当v-else-if也为false时，执行v-else

<body>
    <div id='app'>
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>70">良好</h2>
        <h2 v-else-if="score>=60">一般</h2>
        <h2 v-else>不及格</h2>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'template',
                score: 90
            },
        });
    </script>
View Code

4、v-if 和 v-show 的对比

v-show也能决定一个元素是否可以被渲染，两个对比：

  • v-if条件为false时，元素不会出现在DOM树中
  • v-show条件为false时，是将元素的display属性设置为none

如何选择：

  • 当需要在显示与隐藏之间频繁切换时，使用v-show
  • 当只有一次切换时，使用v-if

三、循环遍历

指令：v-for

v-for类似于JavaScript中的for循环

1、v-for遍历对象

<body>
    <div id='app'>
        <ul>
            <!-- 直接遍历 获取的是value属性值-->
            <li v-for="item in info">{{item}}</li> <br>

            <!-- 获取 value 和 key  第一次参数获取的是value,第二个是key  Vue内部规定 -->
            <li v-for="(value,key) in info">{{key}}-{{value}}</li> <br>

            <!-- 获取value key index -->
            <li v-for="(value,key,index) in info">{{index+1}}-{{key}}-{{value}}</li>
        </ul>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                info: {
                    name: '猫',
                    age: 18,
                    tall: 1.88
                }
            },
        });
    </script>
</body>

2、v-for遍历数组

body>
    <div id='app'>
        <ui>
            <!-- 遍历数组,无下标 -->
            <li v-for="item in movies">{{item}}</li>

            <!-- 获取下标,第一个为数组元素,第二个为下标  Vue内部规定 -->
            <li v-for="(item,index) in movies">{{index}}-{{item}}</li>
        </ui>
    </div>

    <script src='../../vuejs/vue.js'></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                movies: ['电影1', '电影2', '电影3', '电影4']
            },
        });
    </script>
</body>

 

posted @ 2021-04-20 11:18  只猫  阅读(72)  评论(0)  编辑  收藏  举报