目录

先下载vue.js

在这里插入图片描述
将开发版本 和 生产版本都下载

在这里插入图片描述

入门全局配置

html 页面引入vue.js 之后，全局配置一下，将浏览器控制台的开发者版本的提示给关闭

如果我们不配置，代码是

    <script type="text/javascript" src="../js/vue.js"></script>

以上只是引入，在浏览器控制台会有

在这里插入图片描述

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    

    <script >
        Vue.config.productionTip = false



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

在这里插入图片描述
以上就会关闭

官网会找到全局的配置

在这里插入图片描述

浏览器控制台报错

在这里插入图片描述
我们直接在浏览器输入IP和端口号，页面展示的是

在这里插入图片描述
就是当前的根文件夹，

在这里插入图片描述
当我们要访问html页面的时候，需要自己有一个图标

指令语法

v-bind

单向绑定

如果HTML标签属性里面的东西是动态的，那么不能使用{{ }} 了，需要用指令标签，比如链接是动态的，那么我们的写法是

<body>
    <div id="root">

        <h1>{{name}}</h1>
        <a v-bind:href="url">hhhhh</a>
    </div>
    

    <script >
        Vue.config.productionTip = false

        new Vue({
            el: '#root',  //
            data:{
                name:'hhhh',
                url:'www.baidu.com'
            } 



        })

    </script>
</body>

这个指令就是将标签的属性的值动态的进行绑定，有简写方式，直接冒号

        <a :href="url">hhhhh</a>

在这里插入图片描述

v-model

双向绑定

这个指定 只能适用于 表单类元素

 <input type="text" v-model:value="name">

在这里插入图片描述

简写：

  <input type="text" v-model="name">

v-on

绑定事件

       <button v-on:click = 'show' >点击</button>

简写：
 <button @click = 'show' >点击</button>


<body>
    <div id="root">

        <h1>{{name}}</h1>
        <a v-bind:href="url">hhhhh</a>
        <a :href="url">hhhhh</a>
        <input type="text" v-model:value="name">
        <input type="text" v-model:value="name">
    
        <input type="text" v-model="name">
        <button v-on:click = 'show' >点击</button>
    </div>
    

    <script >
        Vue.config.productionTip = false

        new Vue({
            el: '#root',  //
            data:function(){
                return{
                    name:'hhhh',
                    url:'www.baidu.com'
                }
            },
            methods:{

                show(){
                    alert("ddd")
                },




            } 



        })

    </script>
</body>

我们点击的时候有可能传参，但是有一个默认的参数event，如果我们写了自己的参数，这个原来的event参数咋办，我们可以这样写：

 <button @click = 'show（$event, aa）' >点击</button>

在方法的对应的地方以一个参数接受就可以了

在这里插入图片描述

data的两种写法

第一种是
在这里插入图片描述
第二种
函数式写法，以后使用组件的使用，用这种函数式的写法
在这里插入图片描述
在这里插入图片描述

MVVM

在这里插入图片描述

事件修饰符

比如我们的a标签有一个href属性，现在我们给这个a标签一个点击属性，具体写法是

在这里插入图片描述
本来这个a标签是自己有一个本来的链接，又给了人家一个click的点击事件，现在我们想要的情况是点击之后，只是执行click的点击事件，不要执行href里面的了。
阻止默认的事件：

在这里插入图片描述

prevent修饰符

<a href="http://www.baidu.com" @click.prevent="show">a标签</a>

@click后面以点的形式弄出修饰符
prevent 这个修饰符是 不会执行href里面的地址

stop 修饰符

阻止事件的冒泡

就是div有一个点击事件，里面的a标签也有一个点击事件。点击了a标签一定也点击了div。所以两个事件都会触发。。

现在我们想点击了A标签，只是触发a标签上面的事件，div上面的事件不触发，也就是防止事件向上的冒泡，我们之前是在a事件方法里面写

在这里插入图片描述
现在我们使用了vue的click的点击事件，那么他有一个修饰符stop

   <button  @click.stop="show">a标签</button>

once修饰符

就是这个事件只能触发一次

   <button  @click.once="show">a标签</button>

capture 修饰符

使用事件的捕获模式


    <div  class="div1" @click="show(1)">
            div1
        <div class="div2"   @click="show(2)">
            div2
        </div>
    </div>

在这里插入图片描述
捕获阶段，冒泡阶段

我们点击div2，先输出div2的事件，现在我们想要在点击div2的时候，先执行div1的事件

只要加上那个属性就可以了
在这里插入图片描述

self 修饰符

    <div @click="show">
        <button  @click="show">self</button>
    </div>

以上的代码会发生事件冒泡，我们点击的是self这个按钮，他的事件是什么，我们打印看看

在这里插入图片描述
虽然外面的事件因为冒泡也会执行，但是这个
在这里插入图片描述
打印的是你点击什么打印什么

我们现在想要只有点击的东西和target一样的时候才可以触发事件，那么我们就可以

passive修饰符

在这里插入图片描述
也就是事件和同步的方法立即执行

首先画一个这个页面，滑轮滚动
在这里插入图片描述


        .list{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            overflow: auto;

        }
        li{
            height: 100px;
        }



    <ul class="list">
        <li>22</li>
        <li>22</li>
        <li>22</li>
        <li>22</li>
        <li>22</li>
        <li>22</li>
    </ul>

这个ul有一个滑动事件，并且我们还可以手动给一个事件，就是当他滑动的时候，执行这个事件

有两种滑动，一种是用鼠标按住滑轮进行滑动，一种是滑动鼠标上面的滑轮进行滑动
用scroll 绑定滑动事件，这个是手动进行滑动进行触发，只要到底了，事件就不会进行触发了
在这里插入图片描述
还有一个是wheel 事件，这个是用鼠标的滚轮进行滑动

在这里插入图片描述
这个是只要鼠标的滚轮进行滑动，就会触发事件，不管到不到底

当我们用wheel做事件，那么里面的方法如果处理的东西很多，那么滚轮我们看不见往下，但是事件方法是一直在执行的

如果加了这个passave修饰符，那么就会看到方法和滚动条一起执行了。

事件修饰符可以连写

有一个需求就是我们的a标签，自己有href ,也可以加事件，外面还有冒泡事件，写法是

在这里插入图片描述
点击了之后有3个事件，那么现在可以不仅要阻止冒泡，也要阻止href里面的事件发生，我们就可以连写，写法是

在这里插入图片描述
也就是事件的修饰符是可以连写的

# vue.js # html # javascript
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue