菜单 搜索
首页 前端知识 Vue2（初识vue）

Vue2（初识vue）

2024-03-20 11:03:27 前端知识 前端哥 921 890 我要收藏

目录

      • 一，Vue2简介
        • 1.1，什么是vue
        • 1.2，初始vue
        • 1.3，搭建vue环境
        • 1.4，第一个hello world
      • 二，基础知识
        • 2.1 指令
          • 2.2-1 指令v-text
          • 2.2-2 指令v-html
          • 2.2-3 指令v-if
          • 2.2-4 指令v-else
          • 2.2-5 指令v-show
          • 2.2-6 v-if指令与v-show指令区别
          • 2.2-7 指令v-on
          • 2.2-8 指令v-bind
          • 2.2-9 指令v-model
          • 2.2-10 指令v-for
      • 三，事件绑定
        • 3.1，在事件对应的方法中获取到事件对象
        • 3.1，事件修饰符-阻止冒泡
        • 3.2，事件修饰符-阻止默认行为
        • 3.3，一次事件
        • 3.3，键盘事件修饰符
      • 四，Vue过滤器
      • 五，vue中class样式的动态绑定
        • 5.1，字符串写法
        • 5.1，对象写法
        • 5.1，数组写法
      • 六，完整代码
      • 最后

一，Vue2简介

1.1，什么是vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

1.2，初始vue
  • M：Model（模型） 对应data的数据
  • V：View（视图） 模板==>页面
  • VM：ViewModel（视图模型） Vue实例对象

在这里插入图片描述

1.3，搭建vue环境

vue环境的搭建有很多种：

  • 使用cdn
  • 下载javaScript文件，自行托管
  • 使用npm安装
  • 使用官方的cli来构建项目

对于我们初次学习，我们使用自行下载js的方式。

1.4，第一个hello world
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el: '#app',     // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
        data: {					// 用于储存数据，数据供el指定的容器使用
            message: 'Hello world!',
        },
    });
</script>
</html>

在这里插入图片描述
注意

  • 一个vue实例只能接管一个容器
  • 插值语法：{{}} 可以读取到在data的所有属性
  • data中数据发生变化，那么在容器用到的数据会自动更新
  • data的写法，我们通常会写成函数的方式，代码如下：
        data(){
            return {
                message: 'Hello world!',
            }
        }

面试题：
Data为啥要写成函数？
Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。

二，基础知识

2.1 指令

什么是指令？
在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
譬如在HTML页面中这样使用

<div v-xxx=''></div>

在vue中v-xxx就是vue的指令，指令就是以数据去驱动DOM行为的,简化DOM操作。
常用的指令有哪些，及怎么使用这些指令

  • v-text 不可解析html标签
  • v-html 可解析html标签
  • v-if 做元素的插入（append）和移除（remove）操作
  • v-else-if
  • v-else
  • v-show display:none 和display：block的切换
  • v-for 数组 item，index 对象 value，key ，index
2.2-1 指令v-text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <div v-text="showText"></div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                showText:'<h1>vue</h1>',
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-2 指令v-html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <div v-html="showHtml"></div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                showHtml:'<h1>vue</h1>',
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-3 指令v-if

v-if指令称为条件渲染指令，根据表达式的真假来插入和删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                isIf:true,
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-4 指令v-else

v-else指令为v-if指令添加“else块”，v-else元素必须立即跟在v-if元素的后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>
        <h1 v-else="isIf">我是isIf为false时显示</h1>
       <!-- v-if不成立时，才会显示 -->
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                isIf:false,
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-5 指令v-show

v-show指令控制切换一个元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
            // 表达式为真元素显示
                isShow:true,  
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-6 v-if指令与v-show指令区别

按下F12键，打开控制台查看

  • v-if指令满足条件时会渲染到HTML中，不满足条件时，不会渲染
  • 使用v-show指令的元素始终会被渲染到HTML中
    • 只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式

应用场景的区别

  • v-if指令有更高的切换消耗，当v-if指令条件成立的时候会将元素加上，不成立的时候，就会移除DOM，并且内部的指令不会执行
  • v-show指令有更高的初始渲染消耗，v-show只是简单的隐藏和显示
2.2-7 指令v-on

v-on指令为HTML元素绑定事件监听

v-on：事件名称 ="函数名称() "
简写形式   @事件名称 ="函数名称()"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        {{message}}<br>
        <button @click="fun1">点击1</button>
        <button @dblclick="fun2">双击2</button> 
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                message: 'Hello world!',
            } 
        },
        methods:{
             // 声明了一个叫fun1的方法
             fun1(){
                // 怎么在方法中使用data对象的变量,需要使用this
                console.log("button1被点击了",this.message);
                this.isShow=false
                if(this.isIf){
                    this.isIf=false
                }else{
                    this.isIf=true
                }
            },
            fun2(){
                console.log("button2被双击了");
            },
        }
    })
</script>
</html>

在这里插入图片描述

2.2-8 指令v-bind

v-bind指令可以在其名称后面带一个参数，参数通常是HTML元素的特性（attribute）

v-bind:属性名 ="表达式" 
简写形式 :属性名 ="表达式"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <div>
            <img v-bind:src="img1url" width="300px" height="100px" alt="">
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                img1url:'../img/banner1.jpg',
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-9 指令v-model

v-model指令能轻松实现表单输入和应用状态之间的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <form action="">
            <!-- 双向数据绑定是表单元素进行绑定 -->
            <input type="text" name="personNmae" v-model="person.name">
            <input type="text" name="age" v-model="person.age">


            <select name="love" v-model="person.love">
                <option value="eat">吃</option>
                <option value="drick">喝</option>
            </select>


            <input type="radio" v-model="person.sex" name="sex" value="1">男
            <input type="radio" v-model="person.sex" name="sex" value="2">女
        </form>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                person:{
                    name:'王琪',
                    age:18,
                    love:'eat',
                    sex:1,
                },
            } 
        },
    })
</script>
</html>

在这里插入图片描述

2.2-10 指令v-for

v-for指令可以遍历data中的数据，并在页面进行数据展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <form action="">
            <div>
                <select v-model="shabi1" name="" id="">
                    <option v-for="(item, index) in shabi" >{{item}}</option>
                </select>
            </div>
            <div v-for="(attr,key) in person">
                {{key}}-{{attr}}
            </div>
        </form>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                person:{
                    name:'王导',
                    age:18,
                    love:'eat',
                    sex:1,
                },
                shabi:["小豪","王导","光头"],
                shabi1:"小豪",
            } 
        },
    })
</script>
</html>

在这里插入图片描述

三，事件绑定

事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”
事件名可以是原生也可以是自定义的。注意函数的定义也要在Vue中，采用methods属性

3.1，在事件对应的方法中获取到事件对象

加括号，加括号一般是需要有额外参数的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        <form action="">
            <div>
                <table border="1">
                    <tr>
                        <td>序号</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(stu,index) in person.studentArray">
                        <td>{{index+1}}</td>
                        <td>{{stu.name}}</td>
                        <td>{{stu.age}}</td>
                        <td><button type="button" @click="fun1($event,stu.name)">修改</button></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                person:{
                    studentArray:[
                        {name:"小豪",age:"18"},
                        {name:"导哥",age:"20"}
                    ],
                },
            } 
        },
        methods:{
            // 声明了一个叫fun1的方法
            fun1(event,name){
                console.log("事件对象",event);
                console.log(name);
            },
        }
    })
</script>
</html>
3.1，事件修饰符-阻止冒泡

冒泡发生的情景：子元素和父元素绑定了相同的事件，然后点击了子元素，父元素也触发了该事件

使用原生js阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <div @click="fun3">
            外层div
            <div @click="fun3">里层div</div>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun3(event){
                console.log("sss");
                event.stopPropagation(); // 使用原生js阻止冒泡
            },
        }
    })
</script>
</html>

在这里插入图片描述
使用vue事件的修饰符阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <div @click="fun3">
            外层div
            <div @click.stop="fun3">里层div</div>
        </div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun3(event){
                console.log("sss");
                // event.stopPropagation(); // 使用原生js阻止冒泡
            },
        }
    })
</script>
</html>

在这里插入图片描述

3.2，事件修饰符-阻止默认行为

有些标签是由默认行为的，比如a标签，有个默认的页面跳转。

使用原生js阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <a href="http://www.baidu.com" @click="fun5">百度</a>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun5(event){
                alert("不可跳转！")
                event.preventDefault(); // 使用原生js阻止默认行为
            },
        }
    })
</script>
</html>

在这里插入图片描述
使用vue的事件修饰符阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <a href.prevent="http://www.baidu.com" @click="fun5">百度</a>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun5(event){
                alert("不可跳转！")
                // event.preventDefault(); // 使用原生js阻止默认行为
            },
        }
    })
</script>
</html>

在这里插入图片描述

3.3，一次事件

此事件只会执行一次，第二次点击无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <div @click.once="fun7">一次事件</div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            fun7(event){
                console.log("sss");
            },
        }
    })
</script>
</html>

在这里插入图片描述

3.3，键盘事件修饰符

键盘事件修饰符，主要筛选输入特定字符才触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        
        <!-- 13表示是输入enter，起的keycode值可以查询 -->
        <input type="text" @keyup.13="change">
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        methods:{
            change(event){
                console.log(event.key,event.keyCode);
            }
        }
    })
</script>
</html>

在这里插入图片描述

四，Vue过滤器

过滤器是指Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母的大写、货币的千位使用、逗号分隔等

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<body>
    <div id="app">
        {{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                times: 1690944730436,
            }
            
           
        },
         // 2. 定义过滤器
        filters: {
            //3.定义一个处理函数，参数value为要处理数据,format为传入参数
            conversion: function (value, format) {
            //这个转换方法就不介绍了，看看就行，过滤器用法为主
            var date = new Date(value);
            function addZero(date) {
                if (date < 10) {
                return "0" + date;
                }
                return date;
            }
            let getTime = {
                yyyy: date.getFullYear(),
                yy: date.getFullYear() % 100,
                MM: addZero(date.getMonth() + 1),
                M: date.getMonth() + 1,
                dd: addZero(date.getDate()),
                d: date.getDate(),
                HH: addZero(date.getHours()),
                H: date.getHours(),
                hh: addZero(date.getHours() % 12),
                h: date.getHours() % 12,
                mm: addZero(date.getMinutes()),
                m: date.getMinutes(),
                ss: addZero(date.getSeconds()),
                s: date.getSeconds(),
                w: (function () {
                let a = ["日", "一", "二", "三", "四", "五", "六"];
                return a[date.getDay()];
                })(),
            };
            for (let i in getTime) {
                format = format.replace(i, getTime[i]);
            }
            return format;
            },
            //4.再定义一个过滤器，给数据前加上"时间为："这几个字
            againChange: function (value) {
            return "时间为：" + value;
            },
        },

    })
</script>
</html>

在这里插入图片描述

五，vue中class样式的动态绑定

5.1，字符串写法
  • 使用场景
    • 样式的类型不确定
  • 手动触发样式改变
  • 注意
    字符串使用的是vue实例data中的已有属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<style>
    .yangshi{
        font-size: 50px;
    }
    .yanse{
        color: aquamarine;
    }
</style>
<body>
    <div id="app">
        <div :class="myclass">你好vue</div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                myclass:'yangshi yanse',
            }
            
           
        },
    })
</script>
</html>

在这里插入图片描述

5.1，对象写法
  • 使用场景
    • 样式个数、类名确定，通过Boolean动态展示与否
  • 对象写在内联样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<style>
    .yangshi{
        font-size: 50px;
    }
    .yanse{
        color: aquamarine;
    }
</style>
<body>
    <div id="app">
        <div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                isyangshi:true,
                isyanse:true,
            }
            
           
        },
    })
</script>
</html>

在这里插入图片描述

5.1，数组写法
  • 使用场景
    • 需要绑定的样式个数不确定，类名也不确定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
<style>
    .yangshi{
        font-size: 50px;
    }
    .yanse{
        color: aquamarine;
    }
</style>
<body>
    <div id="app">
        <div :class="myclassObject">你好</div>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                myclassObject:['yangshi','yanse']
            }
            
           
        },
    })
</script>
</html>

在这里插入图片描述

六，完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .yangshi{
        font-size: 50px;
    }
    .yanse{
        color: aquamarine;
    }
</style>
<body>
    <div id="app">
        {{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") | againChange}}
        <div :class="myclass">你好</div>
        <div :class="{yangshi:isyangshi,yanse:isyanse}">你好</div>
        <div :class="myclassObject">你好</div>
        <div v-html="showHtml"></div>
        <h1 v-if="isIf">isIf是真的,显示了,false的情况下此节点删除</h1>

        <h1 v-else>我是isIf为false时显示</h1>

        <h1 v-show="isShow">isShow是真的,显示了，false的情况下此节点display为none</h1>

        <button @click="fun1">点击1</button>
        <button @dblclick="fun2">点击2</button>


        <div>
            <img v-bind:src="img1url" width="300px" height="100px" alt="">
        </div>

        <div>
            <form action="">
                <!-- 双向数据绑定是表单元素进行绑定 -->
                <input type="text" name="personNmae" v-model="person.name">
                <input type="text" name="age" v-model="person.age">


                <select name="love" v-model="person.love">
                    <option value="eat">吃</option>
                    <option value="drick">喝</option>
                </select>


                <input type="radio" v-model="person.sex" name="sex" value="1">男
                <input type="radio" v-model="person.sex" name="sex" value="2">女
                

                <div>
                    <select v-model="shabi1" name="" id="">
                        <option v-for="(item, index) in shabi" >{{item}}</option>
                    </select>
                </div>
                <div v-for="(attr,key) in person">
                    {{key}}-{{attr}}
                </div>

                <div>
                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="(stu,index) in studentArray">
                            <td>{{index+1}}</td>
                            <td>{{stu.name}}</td>
                            <td>{{stu.age}}</td>
                            <td><button type="button" @click="fun3($event,stu.name)">修改</button></td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>

        <div>
            <div @click="fun4">
                外层div
                <div @click.stop="fun4">里层div</div>
            </div>
        </div>

        <div>
            <a href="http://www.baidu.com" @click.prevent="fun5">百度</a>
        </div>

        <div>
            <div @click.once="fun6">一次事件</div>
        </div>

        <div>
            <!-- 13表示是输入enter，起的keycode值可以查询 -->
            <input type="text" @keyup.13="change">
        </div>
    </div>

    
    
</body>
<script src="../js/vue2.7.js"></script>
<script>
    // 创建一个Vue实例
    var app = new Vue({
        el:"#app", // 绑定一个元素
        data(){
            return {
                name:'小豪老放屁！！',
                isIf:true,
                isShow:true,
                img1url:'../img/banner1.jpg',
                person:{
                    name:'王导',
                    age:18,
                    love:'eat',
                    sex:1,
                },
                showHtml:'<h1>王导</h1>',
                shabi:["小豪","王导","光头"],
                shabi1:"小豪",
                studentArray:[
                    {name:"光头",age:"18"},
                    {name:"王导",age:"20"}
                ],
                times: 1690944730436,
                myclass:'yangshi yanse',
                isyangshi:true,
                isyanse:true,
                myclassObject:['yangshi','yanse']
            }
            
           
        },
        methods:{
            // 声明了一个叫fun1的方法
            fun1(){
                // 怎么在方法中使用data对象的变量,需要使用this
                console.log("button1被点击了",this.name);
                this.isShow=false
                if(this.isIf){
                    this.isIf=false
                }else{
                    this.isIf=true
                }
            },
            fun2(){
                console.log("button2被双击了");
            },
            fun3(event,name){
                console.log("事件对象",event);
                console.log(name);
            },
            fun4(event){
                console.log("111");
                // elent.stopPropagation(); // 使用原生js阻止冒泡
            },
            fun5(event){
                alert("111");
                // elent.preventDefault(); // 使用原生js阻止默认行为
            },
            fun6(){
                console.log("sss");
            },
            change(event){
                console.log(event.key,event.keyCode);
            }
        },
         // 2. 定义过滤器
        filters: {
            //3.定义一个处理函数，参数value为要处理数据,format为传入参数
            conversion: function (value, format) {
            //这个转换方法就不介绍了，看看就行，过滤器用法为主
            var date = new Date(value);
            function addZero(date) {
                if (date < 10) {
                return "0" + date;
                }
                return date;
            }
            let getTime = {
                yyyy: date.getFullYear(),
                yy: date.getFullYear() % 100,
                MM: addZero(date.getMonth() + 1),
                M: date.getMonth() + 1,
                dd: addZero(date.getDate()),
                d: date.getDate(),
                HH: addZero(date.getHours()),
                H: date.getHours(),
                hh: addZero(date.getHours() % 12),
                h: date.getHours() % 12,
                mm: addZero(date.getMinutes()),
                m: date.getMinutes(),
                ss: addZero(date.getSeconds()),
                s: date.getSeconds(),
                w: (function () {
                let a = ["日", "一", "二", "三", "四", "五", "六"];
                return a[date.getDay()];
                })(),
            };
            for (let i in getTime) {
                format = format.replace(i, getTime[i]);
            }
            return format;
            },
            //4.再定义一个过滤器，给数据前加上"时间为："这几个字
            againChange: function (value) {
            return "时间为：" + value;
            },
        },

    })
</script>
</html>

在这里插入图片描述

最后

送大家一句话：穷且益坚，不坠青云之志
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3980.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery中把时间戳转换为日期的方法(封装好了直接用)

2024-04-13 23:04:29

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

基于html css javascript jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作

2024-04-13 23:04:22

jQuery中Ajax的$.get()、$.post()、$.ajax()函数

2024-04-13 23:04:14

【Echart地图】jQuery html5基于echarts.js中国地图点击弹出下级城市地图（附完整源码下载）

2024-04-13 23:04:10

JQuery介绍，包括load(),get(),post()以及赋值等方法

2024-04-13 23:04:54

vue3使用echars图表报错：“Initialize failed:invalid dom“

2024-04-13 23:04:52

【无标题】

2024-04-13 23:04:51

前后端分离，前端使用echarts可视化，后端使用servlet访问数据库

2024-04-13 23:04:33

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！