VUE2.0 学习（一）HTML单页面使用vue技术

一写代码就开心

发布于 2021-10-09 16:51:23

1.5K00

代码可运行

文章被收录于专栏：java和pythonjava和python

运行总次数：0

代码可运行

先下载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 绑定滑动事件，这个是手动进行滑动进行触发，只要到底了，事件就不会进行触发了