Vue介绍以及事件

最新推荐文章于 2024-04-24 09:32:44 发布

Rolise-hush

最新推荐文章于 2024-04-24 09:32:44 发布

阅读量671

点赞数

分类专栏： Vue 文章标签： vue.js vue 前端框架前端

本文链接：https://blog.csdn.net/HushPlot/article/details/127614513

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、脚本模式。类似jQuery，引入一个vue.js文件来开发页面。

2、脚手架模式。生产场景中使用。适合工程化项目开发。

一、Vue的介绍：

是Web开发的三大框架之一。

web前端发展过程：

HTML+CSS	实现静态页面
JS	动态页面，操作DOM
jQuery	利用JS语言的封装，简化DOM操作
Angular	WEB前端三大框架之一，目前占有率低。MVVM模式。
React	2013年WEB前端三大框架之一，目前极其活跃。
Vue	2014年WEB前端三大框架之一，目前国内占有率第一。

Vue的三个版本：

Vue1：已淘汰

Vue2：过渡期，逐步转向Vue3

Vue3：官方主推版本。

Vue的官方文档：Vue.js

Vue项目的开发方式：

1、脚本模式。类似jQuery，引入一个vue.js文件来开发页面。

2、脚手架模式。生产场景中使用。适合工程化项目开发。

Vue开发的特点：

传统DOM或jQuery的kweb开发模式，如果需要更新DOM内容，则：

    <div id="info">欢迎：<span id="name">张安</span></div>

    $('#info').text('欢迎：李四')
    $('#name').text('王五')

而Vue的写法：

 <div>欢迎：{{name}}</div>

        new Vue ({
            data: {
                name:'李四'
            }
        })

一个案例，写电影详情页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一个vue示例</title>
</head>
<body>
    <div id="app">
        <h2>{{moviename}}</h2>
        <p>{{movietype}}</p>
        <p>117分钟</p>
        <p>2022-10-10 08:00 上映</p> 
        <p>9.1分</p>
        <p>当前票房:{{(piaofang/100000000).toFixed(2)+"亿"}}</p>
        <button @click="next">换一部电影</button>
        <!-- <button id="btn">换一部电影</button> -->
    </div>
    <script src="./vue.js"></script>
    <script>
    // 本质就是创建Vue对象
    // Vue对象可以接管页面的某一个根元素
    // 基于Vue框架来操作该根元素内的所有子元素
    let vm = new Vue({
        el: '#app',   // 让vue接管id=app的div及其子元素
        data: {   // data用于定义vue对象中的属性
            moviename: '夏洛特烦恼',
            movietype: '喜剧/剧情',
            piaofang: 1473122200
        },
        methods: {  // 定义vue中含有的方法
            // methods中定义的方法，最终将被混入的vue对象中
            next(){
                // 修改moviename 与 movietype
                // this: vue对象本身
                this.moviename = '独行月球';
                this.movietype = '科幻/喜剧';
                this.piaofang = 1545454345;
            }
        }
    })
    btn.onclick = function(){
       vm.moviename = '独行月球'
       vm.movietype = '喜剧/科幻'
    }

    </script>
</body>
</html>

运行结果：

Vue中的插值语法

{ { JS表达式 } }

在JS表达式中可以直接访问Vue对象的属性，也可以进行数据的运算与方法的调用。

Vue在背后做了大量的工作，通过声明式语法使得数据与DOM建立关联后，所有的属性都为响应式的，当data中声明的属性有变化时，DOM将会自动更新，而不需要指定哪一个DOM元素需要更新。

二、Vue中的事件处理

如何为元素绑定事件

    <div id="app">
        <button v-on:click="clickMe()">点我换下一部电影</button>
        <button @click="clickMe">点我换下一部电影</button>
        <button @click="clickMw()">点我换下一部电影</button>
        <button @click="clickMe(10,20)">点我换下一部电影</button>
    </div>

v-bind：

v-bind：于vue绑定事件的相关指令，以为一旦用户点击了按钮，将会触发click事件，执行 clickMe() 方法，该方法需要在vue对象中声明：

        new Vue ({
            data:{},
            methods: {
                clickMe() {
                    alert('点我触发clickMe')
                }
            }
        })

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02_event.html  vue事件处理</title>
</head>
<body>
    <div id="app">
        <!-- Vue1就支持的事件绑定方式 -->
        <button v-on:click="clickMe()">你点我呀！v-on</button>
        <!-- 优化方式 -->
        <button @click="clickMe()">你点我呀！@ </button>
        <!-- 如果不需要传递参数，方法名可以不带小括号 -->
        <button @click="clickMe">你点我呀！方法可以不带小括号 </button>
        <!-- 如果需要传参，则需要保留小括号，并且传递参数 -->
        <button @click="add(10, 12)">点我计算结果</button>

    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',   // 让vue全权代理id=app的div的页面内容
            methods: {
                add(x, y){   // 求和方法
                    alert(`${x} + ${y} = ${x+y}`)
                },
                clickMe(){
                    alert('你点着我了！');
                }
            },
        })
    </script>
</body>
</html>

this

this的含义：

函数( ) 调用全局函数的过程中见到this：

非严格：window

严格：undefined

对象 . 方法( ) 调用对象的方法过程中见到this ：

对象本身

new 构造函数 ( ) 创建对象，执行构造函数时遇到了this：

箭头函数：通过作用域链原则就近寻找this

new Vue（）里，data中声明的属性，methods中声明的办法最终都会成为vue的成员。属于vue对象的一部分，所以在方法中可以通过this来访问data中声明的属性以及methods中声明的办法。

        methods : {
            xxx( ){}，
            next() {
                this.moviename = ''  //修改属性
                this.xxx()          //调用方法
            }
        }

三、Vue中元素属性的动态绑定

需求：


        <img src="./img/1.jpg" alt="">
        <a href="https://www.baidu.com">我叫百度</a>
        <button>下一张</button>

Vue框架动态修改属性的设计：

        <img v-bind:src="url">
        <img :src="url">
        <img :src="./img/${num}.jpg">

       new Vue ({
           data : {
            num:1,
            url: './img/1.jpg'
           }
        })

案例：动态修改图片地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03_vbind.html 属性绑定</title>
</head>
<body>
    <div id="app">
        <!-- vue1的指令 v-bind动态绑定属性值 -->
        <!-- <img v-bind:src="url" alt="" width="600"> -->
        <!-- vue2  直接使用:即可动态绑定属性 -->
        <img :src="`./img/${num}.jpg`" alt="" width="600">
        <br>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <br> <br>
        <button @click="num==1 ? num=4 : num--">上一页</button>
        <button @click="num==4 ? num=1 : num++">下一页</button>
    </div>
    <script src="./vue.js"></script>
    <script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        }
    })
    </script>
</body>
</html>

结论：一旦为标签的属性添加了 :（v-bind:），那么 vue 在解析该标签时，将会把该属性当做是动态属性，此时属性值双引号内的代码将被理解为 js 代码片段，这些 js 代码片段执行后的结果将会给属性赋值。

动态修改Class类名：

        <ul>
            <li :class="now==0?`active`:''">首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>

            new Vue({
                data: {
                    now:1, //表示当前选中项的下标
                }
            })

案例：写一个导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>04_nav.html 导航，动态class</title>
    <style>
    .nav {
        list-style: none;
        display: flex;
        border-bottom: 1px solid black;
    }
    .nav li {
        width: 100px; 
        height: 60px;
        text-align: center;
        line-height: 60px;
    }
    .nav li.active {
        background-color: #f03d37;
        color: #fff;
    }
    .show {display: block;}
    .hide {display: none;}
    </style>
</head>
<body>
    <div id="app">
        <ul class="nav">
            <li @mouseover="now=0" :class="now==0?'active':''">首页</li>
            <li @mouseover="now=1" :class="now==1?'active':''">电影</li>
            <li @mouseover="now=2" :class="now==2?'active':''">演员</li>
            <li @mouseover="now=3" :class="{active:now==3}">演出</li>
            <li @mouseover="now=4" :class="now==4?'active':''">榜单</li>
        </ul>
        <div :class="now==0?'show':'hide'">首页内容</div>
        <div :class="now==1?'show':'hide'">电影内容</div>
        <div :class="now==2?'show':'hide'">演员内容</div>
        <div :class="now==3?'show':'hide'">演出内容</div>
        <div :class="now==4?'show':'hide'">榜单内容</div>

        <!-- v-show指令用于控制当前元素是否显示
             双引号内应写javascript代码段，返回true或false
             返回true则显示， 返回false则隐藏 -->
        <div v-show="now==0">首页内容</div>
        <div v-show="now==1">电影内容</div>
        <div v-show="now==2">演员内容</div>
        <div v-show="now==3">演出内容</div>
        <div v-show="now==4">榜单内容</div>


    </div>    
    <script src="./vue.js"></script>
    <script>
    new Vue({
        el: '#app',
        data: {
            now: 4    // 表示当前选中项是哪一项
        }
    })
    </script>
</body>
</html>

运行结果：

在data中声明一个变量，vue可以通过该变量的值来动态设置标签 class 属性是否包含某一个类名：

            <li :class="now==0?`active`:''">首页</li>
            <!-- 通过对象的方式，来控制li标签的class属性是否包含某个类名
                 如果now==0 返回true，意味着class="active" -->
            <li :class="{active:now==0}">首页</li>

控制元素显示与隐藏：

        <div v-show="boolean类型表达式"></div>

当 vue 在解析 html 时遇到 v-show 指令（ Vue 指令），就会将指令属性的属性值当做 js 代码段来解析，如果 boolean类型表达式返回true，则显示当前元素，若返回false，则使当前元素隐藏。（底层： display:block display:none ）。

动态修改标签的Style

        <button @onclick="n++">点我字体变大</button>
        <p :style="`font-size:${n}px;`"> 你好，世界 </p>
        <p :style="{ 'font-size': n+'px' }" >你好，世界2 </p>
        <p :style="{ fontSize:n+'px'}" > 你好，世界3 </p>

            data:{
                n:20
            }

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05_style.html  动态修改style</title>
</head>
<body>
    <div id="app">
        <button @click="n++">点我字体变大</button>
        <p :style="`font-size:${n}px;`">你好，世界</p>
        <p :style="{ 'font-size':n+'px' }">你好，世界2</p>
        <p :style="{ fontSize:n+'px' }">你好，世界3</p>
    </div>
    <script src="./vue.js"></script>
    <script>
    new Vue({
        el: '#app',
        data: {
            n:20
        }
    })
    </script>
</body>
</html>

运行结果：略。

可以以字符串的方式对style进行动态赋值。

也可以以对象的方式对style属性进行动态赋值：