通知
  • 关于网站更多信息请加QQ群(1061691290)
  • jpress升级到4.x，显示有些问题，修复中
  • 网站还会持续更新

马士兵VUE框架

143人浏览 / 0人评论 / 页 | 作者：whisper  | 分类： javascript  | 

作者：whisper

链接：https://www.proprogrammar.com/article/1063

声明：请尊重原作者的劳动，如需转载请注明出处

第一季

一、Vue简介

作者：尤雨溪

 

https://cn.vuejs.org/v2/guide/

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

Vue是MVVM框架

实际上vue框架就是一个MVVM框架，它是渐进式框架，它是初创公司的首选框架，它是轻量级的，有很多根据Vue拓展的独立的功能或库

https://github.com/vuejs Github网站

关于数据驱动视图的问题

首选我们看原生的JavaScript的代码

<body>

    <h1>

        0

    </h1>

    <button>按我加1</button>

    <button id="btn">按我减1</button>

    <script>

       var elH1 = document.getElementsByTagName("h1")[0];

       var elBtn = document.getElementsByTagName("button")[0];

       var elBtn2 = document.getElementById("btn");

       var num = 0;

       elBtn.onclick = function() {

        num ++;

        //重新绘制视图

        elH1.innerHTML = num;

       }



       elBtn2.onclick = function() {

        num--;

        elH1.innerHTML = num;

       }

    </script>

</body>

关于Vue的数据驱动视图

<body>
    <div id="app">
        <h1>{{a}}</h1>
        <button @click="add">按我加1</button>
        <button @click="minus">按我减1</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            // 挂载点
            el:'#app',
            // 数据
            data:{
                a: 0
            },
            // 方法
            methods: {
                add() {
                    this.a++
                },
                minus() {
                    this.a--
                }
            },
        })
    </script>
</body>

二、Vue的基本使用

在Vue的起步中，区分开发环境和生产环境，两者的不同，开发环境可以清晰的看清源码，生产环境就是将源码进行压缩，占比大小更小，我们学习过程中使用生产环境

第二步

第三步将代码复制下来后，存入本地的js文件中

如何查看成功引入Vue文件？

创建一个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>
<body>
    <script src="js/vue.js"></script>
    <script>
        alert(Vue)
    </script>
</body>
</html>

如果此时浏览器弹出一个function对象，就表示引入成功了，否则如果报错了，就代表引入失败了

<body>
    <div id="app">
        {{a}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
            el: '#app',
            // 数据管理中心，所有的Vue的数据都在data对象中
            data:{
                a: 100
            },
            // 方法，对应的Vue事件方法清单
            methods:{

            }
        })
    </script>
</body>

2.1 vue的插值语法

插值语法是通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式

moustache（胡子）是双大括号学名，也叫（胡子语法）

内部也可以存放表达式

{{a >= 100 ? 20 : 10}}

注意，表达式支持简单，比如简单判断，比如三元表达式，不可以使用if等等复杂判断

{{if(a>200){a=100}else{a=300}}}

上面的写法是错误的，因为不支持使用复杂判断

我们需要注意的是，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥

<body>
    <div id="app">
        {{b}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
            el: '#app',
            // 数据管理中心，所有的Vue的数据都在data对象中
            data:{
                a: 100
            },
            // 方法，对应的Vue事件方法清单
            methods:{

            },
            content:{
                b: 200
            }
        })
    </script>
</body>

上面代码中content对象是我们自己随意创建的，所以是不支持在Vue中使用的

三、指令

指令的英文：directive，vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载

3.1 v-if

v-if的作用是通过一个布尔表达式进行对dom的上树和下树的渲染

基本使用：

<p v-if="false">我是第一行dom元素</p>
<p v-if="true">我是第二行dom元素</p>

我们工作中不是使用布尔值直接进行渲染，而是通过data带有布尔值的进行渲染

<body>
    <div id="app">
        <p v-if="boo">我是第一行dom元素</p>
        <p v-if="!boo">我是第二行dom元素</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                boo: false
            }
        })
    </script>
</body>

第二种情况是通过使用表达式进行逻辑判断

<body>
<div id="app">
    //当boo的值等于100的时候再显示
        <p v-if="boo == 100">我是第一行dom元素</p>
        <button @click="add">按我加1</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                boo: 95
            },
            methods:{
                add(){
                    this.boo++
                }
            }
        })
    </script>
</body>

v-if的显示根本原理一个是通过对值的隐式转换，一个就是通过对表达式的判断得出的布尔值得来的

我们将案例进行深入演变

<body>
    <div id="app">
        <h2>{{boo}}</h2>
        <p v-if='boo >= 0 && boo <= 5'>我是5</p>
        <p v-if='boo >= 6 && boo <= 10'>我是10</p>
        <p v-if='boo >= 11 && boo <= 15'>我是15</p>
        <p v-if='boo >= 16 && boo <= 20'>我是20</p>
        <p v-if="boo > 20">我是大于20</p>
        <button @click="add">按我加1</button>
       
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                boo: 0
            },
            methods:{
                add(){
                    this.boo++
                }
            }
        })
    </script>
</body>

上面的代码是通过v-if一层一层进行判断的，实际上是可以通过v-else-if和v-else进行分支判断

<p v-if='boo >= 0 && boo <= 5'>我是5</p>
<p v-else-if='boo >= 6 && boo <= 10'>我是10</p>
<p v-else-if='boo >= 11 && boo <= 15'>我是15</p>
<p v-else-if='boo >= 16 && boo <= 20'>我是20</p>
<p v-else="boo > 20">我是大于20</p>

需要注意的是v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔

<p v-if='boo >= 0 && boo <= 5'>我是5</p>
<div></div>
<p v-else="boo > 20">我是大于20</p>

上面的代码写法是错误的，因为div不能再v-if和v-else之间进行拆分

正确的写法：

<p v-if='boo >= 0 && boo <= 5'>我是5</p>
<p v-else="boo > 20">我是大于20</p>

3.2 v-show

v-show和v-if的显示情况类似，但是原理不一样，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树

<body>
    <div id="app">
        <p v-show='boo >= 5'>我是5</p>
        <button @click="add">按我加1</button>
       
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                boo: 0
            },
            methods:{
                add(){
                    this.boo++
                }
            }
        })
    </script>
</body>

v-show和v-if的使用场景区分是如果页面切换的特别频繁使用v-show，如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if，因为主要区分是涉及到页面的加载性能

3.3 v-for

v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值

基本使用

<li v-for="item in arr">
    {{item}}
</li>
var vue = new Vue({
            el: "#app",
            data: {
                arr: [
                    '苹果',
                    '橘子',
                    '香蕉',
                    '草莓'
                ]
            }
})

item是arr数组的每一项枚举值

v-for还有index和key属性

<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>

item指的是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名

index指的是每一项被遍历的值的下标索引值

key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新

v-for还可以用来遍历对象

var vue = new Vue({
    el: "#app",
    data: {
        obj:{
            name: '小明',
            age: '17岁',
            height: '175cm',
            sex: '男',
            hobby: '打篮球'
        }
    }
})

<li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li>

和数组内容不同的是index此时代表的是对象的key

正确的表示方法

<li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>

上面的v-for一共有三个参数

item表示对象的内容，

key表示的是对象key键值名称

index表示的是当前obj的下标索引值

实际工作中我们使用v-for遍历JSON更多一点

var vue = new Vue({
    el: "#app",
    data: {
        arr: [
            {name:'小明',age: '17',sex:'男',height: '168'},
            {name:'小红',age: '18',sex:'女',height: '165'},
            {name:'小周',age: '19',sex:'男',height: '178'},
            {name:'小刚',age: '20',sex:'男',height: '167'}
        ]
    }
})
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>身高</th>
    </tr>
    <tr v-for="(item,index) in arr">
        <!-- JOSN中的姓名 -->
        <td>{{item.name}}</td>
        <!-- JOSN中的年龄 -->
        <td>{{item.age}}</td>
        <!-- JOSN中的性别 -->
        <td>{{item.sex}}</td>
        <!-- JOSN中的身高 -->
        <td>{{item.height}}</td>
    </tr>
</table>

v-for是可以进行嵌套的

<body>
    <div id="app">
        <table>
            <tr v-for="i in number" :key="i">
                <td v-for="j in i" :key="j">{{i}}X{{j}}={{i*j}}</td>
            </tr>
        </table>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                number:[1,2,3,4,5,6,7,8,9]
            }
        })
    </script>
</body>

使用 v-for需要注意的情况

  1. v-for遍历的出来的不是数据，而是元素
  2. 如果使用item和index的时候一定要使用括号包裹起来

(item,index) in arr

3.4 v-html和v-text

v-html和v-text都是渲染文本的指令，使用场景会有不同

现在我们学习的渲染方法

  • 双大括号插值：{{}}
  • v-text
  • v-html

双大括号和v-text渲染结果类似，都是会以文本类型进行渲染

<p>{{a}}</p>
<p v-text="a"></p>
var vue = new Vue({
    el: "#app",
    data: {
        a:'<h1>我是要插值的内容</h1>'
    }
})

区别：

  1. 双大括号在渲染结果之前，会有编译之前的文本显示，v-text是没有这种现象的
  2. 双大括号更灵活，中间是可以添加内容的，v-text是只能渲染data中的数据，中间不允许插入内容
<p>-----------{{a}}------------</p>
<p v-text="a">--------------------</p>

双大括号和v-text它俩的渲染方式和v-html有本质不同，v-html会识别模板

<p v-html='a'></p>

var vue = new Vue({
    el: "#app",
    data: {
        a:'<h1>我是要插值的内容</h1>'
    }
})

和v-text类似的是v-html也不允许在元素中间随意插值

<p v-html='a'>--------------</p>

3.5 v-cloak

v-cloak指令的作用是vue示例渲染后关联结束

双大括号插值语法在遇到网络延迟的时候会显示编译之前的文本

<body>
    <div id="app">
        {{a}}
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:'我是渲染的指令-v-cloak'
            }
        })
    </script>
</body>

我们可以使用v-cloak结合CSS解决双大括号渲染的难题

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-clock>
        {{a}}
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:'我是渲染的指令-v-cloak'
            }
        })
    </script>
</body>

[v-cloak]css选择器选择的是html结构中有v-cloak的属性，有这个属性的元素设置display为none，又由于v-cloak这个属性在vue的实例加载完之后关联结束，所以就需要了这个元素的隐藏状态，元素就会显示，这样造成的结果就是要么空白，要么显示编译后的文本

3.6 v-once

v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面的性能

<h2 v-once>{{a}}</h2>

案例：

<body>
    <div id="app" v-clock>
        <h2 v-once>{{a}}</h2>
        <button @click="add">按我加1</button>
        <button @click="minus">按我减1</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a: 100
            },
            // 事件方法
            methods:{
                add() {
                    //点击使a加1
                    this.a ++
                    console.log(this.a)
                },
                minus() {
               //点击使a减1
                    this.a --
                    console.log(this.a)
                }
            }
        })
    </script>
</body>

使用场景通常是没有动态的元素内容，比如一些文章，一些固定标题

3.7 v-pre

v-pre属性的作用是跳过该元素编译过程，直接显示元素内部的文本，特点就是跳过大量的没有指令的节点

<h2 v-pre>{{a}}</h2>

浏览器显示的就是没有编译之前的h2元素中的文本内容，v-pre属性的有点就是优化页面的加载性能

3.8 v-on

v-on的作用是给元素添加事件监听，可以简写为@

我们学习的JavaScript的元素的事件监听都可以再vue中使用

原生的JavaScript的事件监听

事件名称

方法

点击

onclick

双击

ondblclick

鼠标移上

onmouseenter

鼠标离开

onmouseleave

鼠标滑过

onmousemove

鼠标移除

onmouseout

失去焦点

onblur

聚焦

onfocus

键盘事件

onkeydown

上表的方法都是原生的JavaScript的事件方法，在vue中的使用是一律去除on，然后 添加v-on：或者@

比如单击

<button @click="add">点击加1</button>
<button v-on:click="minus">点击减1</button>

需要注意的是所有的方法都 必须写在vue的methods中，不允许在外部罗列方法名称

var vue = new Vue({
    el: "#app",
    data: {
        a: 100
    },
    methods:{
        add() {
            this.a++
        },
        minus() {
            this.a --
        }
    }
})

下面的代码是错误的，因为vue没有定义对应的方法名称

var vue = new Vue({
    el: "#app",
    data: {
        a: 100
    },
    add() {
       this.a++
   },
   minus() {
       this.a --
   }
})

原生的JavaScript的事件方法是不能和vue混用的

<button onclick="add">点击加1</button>

同名方法会有覆盖情况，后写方法会覆盖先写的方法

methods:{
    add() {
       this.a++
   },
   add() {
       this.a += 2
   },
    add() {
        this.a += 4
    }
}

上面代码中，最后实现的效果是加4，因为后写同名方法会覆盖先写的同名方法

方法中是可以传入参数的

<button @click="add(5)">点击加1</button>

methods:{
    add(num) {
        this.a+= num
    }
}

如果方法中没有传入值，默认输入会有该方法的事件参数

<button @click="add">点击加1</button>
//方法名称
methods:{
    add(event) {
        console.log(event)
    }
}

3.9 v-bind

v-bind属性的作用是将普通的w3c属性变为动态属性，让属性具有动态能力

使用动态属性之前

<img src="'images/'+url+'.jpg'" alt="">

上面的图片是加载不出来的，因为如果没有使用动态属性，会将编译之前的属性参数直接抛出

此时使用v-bind:

<img v-bind:src="'images/'+url+'.jpg'" alt="">

此时vue会编译带有v-bind的属性，然后返回编译后结果

可以将v-bind:简写为：

<img v-bind:src="'images/'+url+'.jpg'" alt="">
//等同于下面的代码
<img :src="'images/'+url+'.jpg'" alt="">

我们可以使用动态属性实现class类名的动态效果

//CSS样式
<style>
    p{
        width: 200px;
        height: 200px;
        background: blue;
    }
    .red{
        background:red;
    }
    .pink{
        background: pink;
    }
</style>
//结构代码
<div id="app" v-clock>
    <div>
        <p :class="{red:a >=5,pink: a>=10}">
            {{a}}
        </p>
    </div>
    <button @click="add">点击加1</button>
    <button @click="minus">点击减1</button>
</div>
<script src = "js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            a: 0
        },
        methods:{
            add(event) {
                this.a ++
            },
            minus(){
                this.a --
            }
        }
    })
</script>p :class="{red:a >=5,pink: a>=10}">
      {{a}}
</p>

需要注意的是动态的class必须要使用{}去包裹，值可以有多个，值的参数是一个布尔值

除了class属性可以实现动态外，style属性可有对应的功能

style属性和class属性有特殊性，如果需要使用动态传值，必须传入一个object对象

<p :style="{width:b+'px'}">
    {{a}}
</p>

3.10 v-model

v-model属性是使用在表单元素中的，作用是实现表单和数据的双向绑定

姓名：<input type="text" v-model="val">

我们说过vue是mvvm框架，vue的核心之一就是双向数据绑定

我们看下面的案例

<p>
    姓名：<input type="text" v-model="val">
    {{val}}
</p>

数据中心内容

var vue = new Vue({
    el: "#app",
    data: {
        val: '姓名是张三'
    }
})

此时如果用户在输入框中改变了内容

小练习：调查表单

<div id="app" v-clock>
    <h2>问卷调查</h2>
    <p>
        姓名：<input type="text" v-model="name">
    </p>
    <p>
        性别：
        <input type="radio" name="sex" value="男" v-model="sex">男
        <input type="radio" name="sex" value="女" v-model="sex">女
    </p>
    <p>
        爱好：
        <input type="checkbox" name="hobby" value="打篮球" v-model="hobby">打篮球
        <input type="checkbox" name="hobby" value="跳舞" v-model="hobby">跳舞
        <input type="checkbox" name="hobby" value="读书" v-model="hobby">读书
    </p>
    <p>
        籍贯：
        <select name="native" id="" v-model="native">
            <option value="河北">河北</option>
            <option value="河南">河南</option>
            <option value="山东">山东</option>
            <option value="山西">山西</option>
            <option value="湖南">湖南</option>
            <option value="湖北">湖北</option>
        </select>
    </p>
    <p>
        您填写的表单内容为：姓名：{{name}}，性别：{{sex}}，爱好：{{hobby}}，籍贯：{{native}}       
    </p>
    <button @click="submit">提交</button>
</div>

数据中心

var vue = new Vue({
    el: "#app",
    data: {
        name: '',
        sex: '男',
        hobby: [],
        native: '河北'
    },
    methods:{
        submit() {
            //汇总信息提交到后端
            let obj = {
                name: this.name,
                sex: this.sex,
                hobboy: this.hobby,
                native: this.native
            }
            console.log(obj)
        }
    }
})

四、小案例

4.1 选项卡

<div class="box" id="app">
<div class="header">
<!-- cur的显示状态是根据curState的状态进行显示的，如果curState和index相等了当前css属性cur就生效了 -->
 <!-- displayState事件的作用是将当前span的index传出去 -->
        <span :class="{cur: curState == index}" v-for="(item,index) in hTitle" @mouseenter="displayState(index)">{{item}}</span>
    </div>
    <div class="content" v-show="curState == 0">
        <p>首页首页首页首页首页首页首页首页首页</p>
        <p>首页首页首页首页首页首页首页首页首页</p>
        <p>首页首页首页首页首页首页首页首页首页</p>
        <p>首页首页首页首页首页首页首页首页首页</p>
        <p>首页首页首页首页首页首页首页首页首页</p>
        <p>首页首页首页首页首页首页首页首页首页</p>
    </div>
    <div class="content"  v-show="curState == 2">
        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>

   </div>
    <div class="content"  v-show="curState == 1">
        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
        <p>新闻新闻新闻新闻新闻新闻新闻新闻新闻</p>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hTitle:['首页','新闻','娱乐'],
            showContent: true,
           // 显示状态，curState和谁相等了，谁显示
            curState: 0 
        },
        methods: {
            displayState(index) {
                this.curState = index;
            }
        },
    })
</script>

4.2 调色板

<div id="app" v-clock>
<p class="pickers" :style="{background:'rgb('+r+','+g+','+b+')'}"></p>
    <p>
        r:<input max="255" min="0" type="range" v-model="r"/><input max="255" min="0" v-model="r" type="number">
    </p>
    <p>
        g:<input  max="255" min="0" type="range" v-model="g"/><input max="255" min="0" v-model="g" type="number">
    </p>
    <p>
        b:<input  max="255" min="0" type="range" v-model="b"/><input max="255" min="0" v-model="b" type="number">
    </p>
</div>
<script src = "js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            r: 100,
            g: 200,
            b: 123
        },
        methods:{
           
        }
    })
</script>

4.3 微博发布框

<div id="app">
    <textarea v-model='content' cols="30" rows="10" placeholder="请发表你今天的心情。。。。"></textarea>
    <!-- warn生效机制：当内容的数量大于100的时候，渲染文字为红色 -->
    <p :class="{warn: content.length > 100}">{{content.length}}/100</p>
    <p>
        <!-- disabled生效机制：当内容的数量大于100的时候，不能点击 -->
        <button :disabled="content.length > 100">发布</button>
        <!-- disabled生效机制：当内容的小于等于0的时候，不能点击 -->
        <button @click="clear" :disabled="content.length <= 0">清空</button>
    </p>
</div>
<script src='js/vue.js'></script>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            content:""
        },
        methods:{
            // 清空textarea文本输入框的内容
            clear() {
                this.content = ''
            }
        }
    })
</script>

第二季

一、修饰符

修饰符是vue功能的拓展，是对vue事件或者系统操作等等进行功能的补充

1.1 事件修饰符

看下面的案例

<div class="outer" @click="outer">
    <div class="center" @click="center">
        <div class="inner" @click="inner"></div>
    </div>
</div>

此时如果点击了inner，其实就相当于点击了center和outer，此时如果都绑定了事件监听，就势必都会被触发

我们现在想阻止这种事件冒泡，通过两种方法

1 stop修饰符（常用）

<div class="outer" @click="outer">
    <div class="center" @click="center">
        <div class="inner" @click.stop="inner"></div>
    </div>
</div>

通过上面的案例，我们了解了.stop修饰符的作用就是阻止事件的一个冒泡

其作用类似原生JavaScript的event.stopPropagation()方法

inner(event) {
    event.stopPropagation();
    console.log("内层")
}

2 self修饰符

.self修饰符的作用是只有点击元素本身的时候才能触发事件，不接受冒泡上来的事件，同时也不能阻止事件的冒泡

<div class="outer" @click.self="outer">
    <div class="center" @click.self="center">
        <div class="inner" @click.self="inner"></div>
    </div>
</div>

.self修饰实际是不能阻止事件向上冒泡的

<div class="outer" @click="outer">
    <div class="center" @click.self="center">
        <div class="inner" @click.self="inner"></div>
    </div>
</div>
<div class="outer" @click="outer">
    <div class="center" @click.self="center">
        <div class="inner" @click.self="inner"></div>
    </div>
</div>

3 prevent修饰符

如果一个超级链接，既有链接，又有事件，此时点击超级链接后会发生什么？

<a href="http://www.baidu.com" @click.prevent="alertDialog">点击跳转到百度</a>

答案是先会执行事件的内容，然后会执行a默认的跳转事件

此时我们不需要a标签跳转到百度，执行完事件监听后就停止，通过.prevent修饰符阻止

<a href="http://www.baidu.com" @click.prevent="alertDialog">点击跳转到百度</a>

和stop修饰符一样，prevent也有原生的事件方法

event.preventDefault();

4 capture修饰符

capture修饰符是对事件捕获的监听，vue的事件监听，默认都是获取冒泡阶段的，所以使用capture去监听捕获阶段的事件

<div class="outer" @click.capture="outer">
    <div class="center" @click.capture="center">
        <div class="inner" @click="inner"></div>
    </div>
</div>

5 once修饰符

once修饰符的作用就是使事件只触发一次

<button @click.once="add">按我加1</button>
methods:{
    add(event) {
        this.a++
        console.log(this.a)
    }
}

1.2 按键修饰符

我们之前在JavaScript的课程中接触过onkeydown和onokeyup，这两个是键盘的事件监听，在vue中有对应的事件修饰符

基本使用方法

<input type="text" @keyup.space='add'>

.space是vue封装的对keyCode别名，和下面的代码表示内容相同

<input type="text" @keyup.32='add'>

常用的keyCode别名

keyCode值

别名

键盘按键

13

.enter

回车

32

.space

空格

37

.left

键盘左键

38

.up

键盘上键

39

.right

键盘右键

40

.down

键盘下键

9

.tab

键盘tab

46或者8

.delete

delete或者backspace

1.3 系统修饰符

系统修饰符指的是通过一些指定的按键配合鼠标点击或者键盘事件进行事件监听

比如.ctrl系统修饰符的使用

<button  @click.ctrl='add'>按我加1 </button>

此时按住键盘ctrl键然后鼠标点击才能实现add加1

常用的系统修饰符

修饰符名称

对应的键盘键名称

.ctrl

ctrl

.alt

alt

.shfit

shift

.meta

如果是windows系统代表的是键盘的徽标键，如果是IOS系统，单表的是common键

此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件

1.4 exact修饰符

exact修饰符的作用是辅助其他修饰符进行精确匹配的

<button  @click.ctrl.exact='add'>按我加1 </button>

方法就是在对应的修饰符的后面进行连续打点

1.5 鼠标按键修饰符

鼠标按键修饰符修饰的是鼠标的左、滚轮、右键

如果我们需要点击某个事件，但是我们可以需要使用鼠标右键

<button  @click.right='add'>按我加1 </button>

此时我们发现右键点击按钮的时候确实可以实现点击，但是也会出现右键的默认弹窗

此时我们可以结合prevent修饰符实现右键的事件监听

<button  @click.right.prevent='add'>按我加1 </button>

需要注意的是，prevent修饰符必须在.right修饰符的后面，否则会失效

还有鼠标滚轮键按下

<button  @click.middle='add'>按我加1 </button>

1.6 表单修饰符

表单修饰符一共有三个，分别是.lazy，.number，.trim

表单修饰符都是用来修饰v-model属性的

.lazy修饰符是将Input输入框的数据绑定v-model从实时监听的状态变为change状态

<div id="app">
    <input type="text" v-model.lazy='a'>
    <p>{{a}}</p>
</div>

当鼠标的光标失去焦点之后

.number修饰符的作用是将内容转化为数字类型

<input type="text" v-model.number='a' @input='add'>

需要注意的是.number修饰符会将非数字内容进行过滤，得到的是纯数字类型，是可以进行计算的非NaN数字

如果没有使用number修饰符，得到的输入框的数字都是string类型

.trim修饰符的作用是过滤用户输入的收尾空格

比如我们没有设置trim之前

此时我们给v-model修饰trim

<input type="text" v-model.trim='a' @input='add'>

得到的是纯没有收尾空白的内容

二、vue-cli

vue-cli是vue的脚手架工具，帮我们快速生成了vue的起步项目，内置一些必备的比如打包工具，比如配置文件等等

地址：https://cli.vuejs.org/zh/

如何安装cli？

第一步

npm install -g @vue/cli

如何查看是否安装成功

vue --version

我们使用vue create命令创建自己的项目

vue create my-project

安装成功后会有成功的提示语

在你的安装目录中有相应的文件夹

为了方便后期的开发，如果使用vsCode 的同学，老师推荐安装一些常用vue插件

ue 2 Snippets、Vue Theme、Vue VS Code Extension Pack、Vue VSCode Snippets、Vuter

我们使用的是vsCode的终端面板

此时在浏览器中打开

2.1 cli目录结构

  • node_modules项目的依赖中心
  • public：静态资源文件夹，和assets不同的是public不会被webpack进行打包，使用路径的时候要使用绝对路径
  • src：项目的核心区域，所有的开发文件的核心内容区域，包括组件，静态资源等等
  • asstet：静态资源文件夹，和public不同的是assets文件夹会被webpack打包，所以要使用相对路径
  • components：Vue功能组件的存放位置，内部存放的是公用的组件
  • views：公共文件，主要以各个独立页面为主
  • APP.vue：整个vue的根组件，所有的vue组件都是从这个组件中拓展的，App根组件最后通过编译后将内容渲染到.html文件中
  • main.js：vue的入口文件，vue文件初始化位置
  • .gitignore：GitHub相关配置文件，作用是git再提交代码的时候指定相关忽略格式文件
  • babel.config.js：babel的配置文件
  • package.json：配置（记录了）项目的相关模块，项目相关配置信息等等
  • package-lock.json：作用是记录的当前项目安装的相关依赖版本，并且记住了当前所有依赖的关联关系，如果下次vue进行编译的时候会按照这个文件进行编译
  • README.md：文件的作用是项目相关的使用方法，和使用说明

2.2 cli文件的编译过程

我们知道vue-cli的起步命令是npm run serve，那么这个命令干了一些什么，为什么可以执行相关的编译程序？

首先我们要知道npm run 执行一个命令或者是一个文件内容

我们看package.json文件中

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
 },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    ....
  },
  "eslintConfig": {
    ...
  },
  "browserslist": [
    ...
  ]
}

我们知道scripts是npm执行目录，也就是在scripts这个对象中的key就是npm run的命令值

vue-cli提供了三个命令

  • serve：这个是我们开发使用的命令，执行编译和热更新（ctrl+s的时候浏览器会实时更新）
  • build：工作中如果我们本地调试完后需要部署代码前，进行打包的命令
  • lint：命令的作用是检验文件代码的合格性（对eslint的校验）

我们以npm run serve为例

第一步命令会找到node_modules文件夹中.bin文件夹内部的vue-cli-service文件

然后我们根据路径查找到了相关文件

核心代码路径

severice.js文件是整个编译过程的核心文件

2.3 vue-cli的起步文件

1 main.js文件

import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'

// 这行命令的作用是给生产环境配置的提示消息，如果为true或者默认不配置，会有相关提示语
Vue.config.productionTip = false

new Vue({
  // 渲染节点
  render: h => h(App),
  // 挂载函数，内部#app是vue的根节点
}).$mount('#app')

2 public>index.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></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

noscript标签的作用是当script标签加载不出来或者抛出错误的时候替换内容，目的是在浏览器中提供友好提示

<div id="app"></div>是整个vue项目的根标签，vue需要挂载的标签

3 App.vue文件

App.vue文件是整个项目的根组件，项目中所有的页面切换页面显示都是在这个组件基础上渲染的

我们将整个App.vue文件清空后发现

<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  components: {
   
  }
}
</script>

<style>

上面的结构是.vue文件的基础结构

  • <template>元素的作用是搭建vue文件的结构
  • <script>元素的作用是对当前文件逻辑进行交互
  • <style>元素的作用是对当前文件的样式进行修饰

我们之前开发中.js文件只有逻辑.css文件只有样式.html文件只有结构，但是.vue的组建就是将视图和逻辑进行了一个整合

三、组件

所有的vue组件都是以.vue格式结尾的文件

我们看到的vue-cli中的App.vue文件就是整个vue的根组件

<template>
  <div>

  </div>
</template>

<script>

export default {
  data(){
   
  }
}
</script>

<style>

一个vue文件就是一个类

需要注意的地方是data必须是一个函数

最外层必须有默认暴露

<script>

export default {
  data(){
    return {
     
    }
  }
}
</script>

我们后面写的所有的vue的对象清单都必须在export default里面去罗列

在我们之前写data时候是一个对象

var app = new Vue{
  data: {
    name:'小明'
 }
}

我们发现data是一个对象

如果在我们组件中data必须是一个函数，是因为防止数据之间冲突

<script>

export default {
  data(){
    return {
      a: '小明'
    }
 }
}
</script>

data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的

为什么vue的data必须是一个函数

我们从JavaScript的面向对象开始

<script>
    var config = {
        data:{
            name: '小明'
        }
    }
    var People = function(config) {
        this.data = config.data
    }

    var xiaoming = new People(config)
    var xiaohong = new People(config)
    xiaohong.data.name = '小红'
    console.log(xiaoming.data.name)
    console.log(xiaohong.data.name)
</script>

此时浏览器会输出两个小红

我们知道复杂数据类型指的都是同一个地址，所以，当xiaohong.data.name修改的时候，xiaoming.data.name也就随之修改了

解决办法就是config对象返回一个data函数，这个函数return一个对象

var config = {
        data(){
            return {
                name: '小明'
            }
        }
    }
    var People = function(config) {
        this.data = config.data()
    }

此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因

如何使用自定义组件？

第一步创建自己的组件

比如在components文件夹中创建一个Mashibing.vue文件

App.vue文件

<template>
  <div>
    <Mashibing></Mashibing>
  </div>
</template>

<script>
// 引入组件
import Mashibing from './components/Mashibing.vue'

export default {
  // 注册组件
 components:{
    Mashibing
 },
  data(){
   
  }
}
</script>

总结使用组件三步走

  1. 创建vue文件
  2. 在要渲染的地方引入该组件
  3. 注册该组件

<Mashibing></Mashibing>组件内容

<template>
  <div>
    <h1>马士兵教育{{a}}</h1>
    <button @click="add">按我加1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 100
    }
  },
  methods:{
    add() {
      this.a ++
    }
  }
}
</script>
<style>
 
</style>

组件是可以复用的，并且数据是隔离的

在给App.vue多添加几个Mashibing.vue文件

<template>
  <div>
    <Mashibing></Mashibing>
    <Mashibing></Mashibing>
    <Mashibing></Mashibing>
  </div>
</template>

四、父子组件传值

4.1 父组件传值给子组件

我们使用组件一定是依托在某一个父组件的身上，比如我们上面写的Mashibing.vue文件就是依托在App.vue文件中，此时我们如果要使用App.vue文件中的值怎么办

vue提供了一个props的入口，也是父子组件之间唯一的传值方式，父组件通过v-bind自定义属性传入值，子组件通过props接受对应的参数

父组件

<template>
  <div>
    <Mashibing :msb-value="a"></Mashibing>
  </div>
</template>

公共v-bind自定义属性传值，注意由于vue的属性对大小写不敏感，所以如果需要写驼峰命名，需要使用-隔开

比如msb-value代表的就是msbValue

data(){
  return {
    a: 100
  }
}

子组件

<script>
export default {
  // 罗列父组件传进的属性值
 props:['msbValue'],
  data() {
    return {
      a: 100
    }
  },
  methods:{
    add() {
      this.a ++
    }
  }
}
</script>
<template>
  <div>
    <h1>马士兵教育，我接收到的父组件的值是：{{msbValue}}</h1>
  </div>
</template>

子组件通过props罗列父组件的传值，接收的参数可以有多个，props可是数组，也可以是对象

父组件

<div>
    <Mashibing :msb-value="a" :value-b="b" :value-c="c"></Mashibing>
  </div>

子组件接受，数组方式

<template>
  <div>
    <h1>马士兵教育，我接收到的父组件的值是：{{msbValue}}  {{valueB}}
    {{valueC}}</h1>
  </div>
</template>
<script>
export default {
  // 罗列父组件传进的属性值
  props:['msbValue','valueB','valueC'],
  data() {
    return {
      a: 100
    }
  },
  methods:{
    add() {
      this.a ++
    }
  }
}
</script>

可以使用对象去接收参数

props:{
  msbValue: Number,
  valueB: Number,
  valueC: Number
}

如果props是一个对象，那么这个对象的key是自定义传入参数属性，value是希望传入的参数类型

比如我们限制的是数字类型

但是我们传入的是一个字符串，此时，控制台后报错，提示你希望传入number类型

如果props是对象的话，参数可以配置

比如配置参数必填项

props:{
  msbValue: {
    type: Number,
    required: true
 },
  valueB: Number,
  valueC: Number
},

如果props的值也是一个对象，type代表的是类型，required是一个布尔值，如果为ture代表的是设置必填项，如果不填，则会抛出错误

比如default代表的是默认的不传入的值的参数

msbValue: {
  type: Number,
  default: 500
}

如果props的default值是Object或者Array，需要使用函数return

msbValue: {
  type: Object,
  default: ()=>{
    return {a:100}
 }
}

validator是数据的校验

msbValue: {
  type: Number,
  // 数据的校验
  validator: function(value) {
    return value > 101
 }
}

4.2 子组件修改父组件的参数

需要注意的是子组件不可以直接修改父组件的值，只能传出一个自定义事件，父组件通过调用这个自定义事件后，然后在外部修改值

子组件代码

<template>
  <div>
    <h1>马士兵教育，我接收到的父组件的值是：{{msbValue}}  {{valueB}}
    {{valueC}}</h1>
    <button @click="add">按我加1</button>
  </div>
</template>
<script>
export default {
  // 罗列父组件传进的属性值
  props:{
  msbValue: Number,
    valueB: Number,
    valueC: Number
  },
  data() {
   return {
     
   }
  },
  methods:{
    add() {
      this.$emit("add")
    }
  }
}
</script>
<style>
 
</style>

$emit方法是vue封装的，用来想父组件返回对应的自定义事件，父组件通过在子组件身上设置对应的自定义事件后设置事件名称

父组件代码

<template>
  <div>
    <Mashibing @add="sumNum" :msb-value='a' :value-b="b" :value-c="c"></Mashibing>
  </div>
</template>

<script>
// 引入组件
import Mashibing from './components/Mashibing.vue'

export default {
  // 注册组件
  components:{
    Mashibing
  },
  data(){
    return {
      a: 100,
      b: 200,
      c: 300
    }
  },
  methods: {
      sumNum(){
        this.a++
      }
  }
}
</script>

<style>

</style>

@add自定义事件是子组件通过$emit传出来的自定义事件，父组件通过这个事件设置事件方法sunNum，然后修改自己的值，从而时间子组件修改父组件的值

这么做的目的就是为了让数据可观察性更强，可维护性更高，有一个更清晰的清单

亲爱的读者：有时间可以点赞评论一下

你并不漂亮，可我第一眼看就喜欢
点赞(0) 打赏

作者其它文章

利用notepad++快速通过建表语句生成java实体类变量
利用notepad++快速通过建表语句生成java实体类变量
23考研复试-计算机网络知识点总结
23考研复试-计算机网络知识点总结
连续24次考不起，即将迎来第25次高考！独家记录梁实心路历程
连续24次考不起，即将迎来第25次高考！独家记录梁实心路历程

全部评论

还没有评论！