Vue.js 学习笔记（五）模板渲染和事件绑定

一、模板渲染1、条件渲染v-if、v-else-if和v-else，v-show<!DOCTYPE html><html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><title></title>&l

奥妙无穹

2876人浏览 · 2022-02-28 21:03:29

奥妙无穹 · 2022-02-28 21:03:29 发布

一、模板渲染

1、条件渲染

v-if、v-else-if和v-else，v-show

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
    <!--if、else if指令-->
    <p v-if="status==1">当status为1时，显示该行</p>
    <!--注意中间不能插入其他代码，否则会报错-->
    <p v-else-if="status==2">当status为2时，显示该行</p>
    <p v-else-if="status==3">当status为3时，显示该行</p>
    <p v-else>否则显示该行</p>
    <!--v-show指令-->
    <p v-show="status==2">当status为2时，显示该行</p>
    <p v-show="status==3">当status为3时，显示该行</p>
</div>
<!--script脚本-->
<script>
    //创建vue实例
    var  vm=new Vue({
        el: '#app',
        data: {
            status: 2
        }
    });
</script>
</body>
</html>

二者的用处相似，但二者也存在区别：
vue-show：本质就是标签display设置为none，控制隐藏
vue-if：是动态的向DOM树内添加或者删除DOM元素

key：新版vue已更新，每个元素都会自动生成唯一的key

2、列表渲染

v-for循环用于数组

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app">
    <!--for in 和for of都可以遍历数组或者对象。他们的区别就在于：
    for in是ES5标准，遍历key.
    for of是ES6标准，遍历value.
    而数组中key和index的值相同-->
    <li v-for="item in items">
        {{ item.name }}
    </li>
    <!--第二项表示当前项的索引，不一定非要用index，也可以用inde等-->
    <li v-for="(item,index) of items">
        {{index}}-----{{ item.name }}
    </li>
</ul>
<script type="text/javascript">
    var vm= new Vue({
        el: '#app',
            data: {
                items: [
                    { name: 'beixi' },
                    { name: 'jzj' }
                ]
            }
    })
</script>
</body>
</html>

在这里插入图片描述

v-for用于对象

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app">
    <li v-for="value in object">
        {{ value }}
    </li>
    <!--在对象中key和value的值不同-->
    <li v-for="(value,key,index) in object">
        {{ index }}----{{key}}:{{value}}
    </li>
</ul>
<script type="text/javascript">
    var vm=new Vue({
        el: '#app',
            data: {
                object: {
                    name: 'beixi',
                    gender: '男',
                    age: 30
                }
            }
    })
</script>
</body>
</html>

在这里插入图片描述

v-for用于整数

v-for="n in 10"

3、template标签用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>template</title>
    <!--使用CDN方式引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--vue提供内置标签<template>
    使用 <template> 保留页面加载时隐藏的内容-->
    <div v-if="ok">
        <p>这是第一段代码</p>
        <p>这是第二段代码</p>
        <p>这是第三段代码</p>
    </div>
    <template v-for="item in items">
        {{item.name}}
        {{item.age}}
    </template>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            ok:false,
            items: [
                { name: 'beixi' },
                { name: 'jzj' }
            ]
        }
    })
</script>
</body>
</html>

二、事件绑定

1、基本用法

直接使用：使用 v-on:事件名=函数名完成绑定
调用methods：
v-on绑定事件、方法传参、传入事件对象

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--绑定事件-->
    <button @click="say">点击</button>
    <!--方法传参-->
    <button @click="say2('Hello World!')">单击</button>
    <!--传入事件对象
    $event的用处是获取原生DOM事件的事件对象-->
    <button data-aid="123" @click="eventFn($event)">事件对象</button>
</div>
<script type="text/javascript">
    var vm= new Vue({
        el: '#app',
        data:{
           msg:'Say Hello'
        },
        methods:{
            say: function () {
                //弹出警告框
                alert(this.msg)
            },
            //js不能重载，函数名相同只会认同后者
            say2: function (val) {
                //弹出警告框
                alert(val)
            },
            eventFn:function (e){
                console.log(e);
                //e.srcElement,是一个DOM结点
                e.srcElement.style.background='red';
                //获取自定义属性的值
                console.log(e.srcElement.dataset.aid);
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2、修饰符

.stop：阻止事件继续传播
.prevent：阻止默认事件
.capture：在捕获模式下触发，即优先触发
.self：仅当点击元素自身时才会触发
.once：只触发一次
键盘事件：捕捉键盘事件

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div style="background-color: aqua;width: 100px;height: 100px" v-on:click="outer">
        外部点击
        <!--调用inner方法后，阻止其继续调用外层的outer方法-->
        <div style="background-color: red;width: 50px;height: 50px"  v-on:click.stop="inner">内部点击</div>
    </div>
    <!--.prevent阻止了a标签的默认刷新-->
    <a href="" v-on:click.prevent>单击</a>
    <!--.capture指优先被触发,故点击内部点击会先触发外部点击，然后才是内部点击-->
    <div style="background-color: aqua;width: 100px;height: 100px" v-on:click.capture="outer">
        外部点击
        <div style="background-color: red;width: 50px;height: 50px"  v-on:click="inner">内部点击</div>
    </div>
    <!--.self指只有关联到自己时才会触发，而不会是冒泡式触发，故点击内部点击只会触发内部点击-->
    <div style="background-color: aqua;width: 100px;height: 100px" v-on:click="outer">
        外部点击
        <div style="background-color: red;width: 50px;height: 50px"  v-on:click.self="inner">内部点击</div>
    </div>
    <!--捕捉键盘事件，固定格式-->
    <input type="text" @keydown="show($event)" />
</div>
<script type="text/javascript">
    var vm= new Vue({
        el: '#app',
        methods:{
            outer: function () {
                console.log("外部点击")
            },
            inner: function () {
                console.log("内部点击")
            },
            show:function (ev){
                console.log(ev.keyCode);
                if (ev.keyCode==13){
                    alert('你按了回车键');
                }
            }
        }
    })
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^