Vue开篇-vue指令（第一天）-阿里云开发者社区

1.什么是Vue?

Vue. js 是一套构建用户界面的框架﹐它不仅易于上手，还可以与其它第三方库整合(Swiner、IScroll、...).

2.框架和库的区别?

框架:是一套完整的解决方案;对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目.

库（插件):提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库,例如:

从jQuery 切换到 Zepto，无缝切换
从IScroll切换到ScrollMagic，只需要将用到IScroll的代码替换成ScrollMagic代码即可

3.为什么要学习框架?

提升开发效率:在企业中，时间就是效率，效率就是金钱;

前端提高开发效率的发展历程:

原生JS -〉jQuery之类的类库 -〉前端模板引擎-〉Vue / React / Angular

(二）使用Vue

2.Vue框架使用步骤

2.1下载Vue框架

2.2导入Vue框架

2.3创建Vue实例对象

2.4指定Vue实例对象控制的区域

2.5指定Vue实例对象控制区域的数据

//1.导入vue.js
<script src="js/vue.js"></script>
<div id="app">
        <p></p>
</div>
<script>
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 2.创建一个Vue的实例对象
    let vue = new Vue({
        // 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域
        el: '#app',
        // 4.告诉Vue的实例对象, 被控制区域的数据是什么
        data: {
            name: "咿呀"
        }
    });
</script>

MVVM模式

MVVM设计模式
在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据,处理数据业务逻辑)
V : View 视图(展示数据，与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人，V是美国人，VM就是翻译）
MVVM设计模式最大的特点就是支持数据的双向传递——数据可以从M->VM->V，也可以从 V -〉VM->M。

Vue的数据为单向传递

Vue的数据交给Vue实例对象，Vue实例对象将数据交给Vue控制区域即“视图”部分

M->VM->V(Vue默认情况下数据为单向传递)

Vue 数据双向传递

2.数据双向绑定

默认情况下Vue只支持数据单向传递 M -> VM -> V

但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力,但是只能在<input>、<textarea>及<select>元素上可以用 v-model 指令创建双向数据绑定

<!--这里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
    <input type="text" v-model="msg">
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "yiiya",
            msg: "华中师范大学"
        }
    });
</script>

【注意点】:v-model会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源

chorme安装Vue调试工具

1.Vue调试工具安装

如果你能打开谷歌插件商店, 直接在线安装即可

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

由于国内无法打开谷歌国外插件商店, 所以可以离线安装

https://www.chromefor.com/vue-js-devtools_v5-3-0/

2.安装步骤:

2.1下载离线安装包

2.2打开谷歌插件界面

2.3直接将插件拖入

2.4报错程序包无效: "CRX_HEADER_INVALID"

可以将安装包修改为rar后缀, 解压之后再安装

2.5重启浏览器

Vue指令

1.什么是指令?

指令就是Vue内部提供的一些自定义属性,

这些属性中封装好了Vue内部实现的一些功能

只要使用这些指令就可以使用Vue中实现的这些功能

2.Vue数据绑定的特点

只要数据发生变化, 界面就会跟着变化

vue-once指令:

让界面不要跟着数据变化, 只渲染一次

vue-cloak指令

1.Vue数据绑定过程

1.1会先将未绑定数据的界面展示给用户
1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
1.3最后再将绑定数据之后的HTML渲染到界面上

正是在最终的HTML被生成渲染之前会先显示模板内容

所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容

2.如何解决这个问题？

利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面

等到生成HTML渲染之后再重新显示

3.v-cloak指令作用:

数据渲染之后自动显示元素

4.v-text指令

1.什么是v-text指令

v-text就相当于过去学习的innerText

5.v-html指令

2.什么是v-html指令

v-html就相当于过去学习的innerHTML

6.v-if指令

1.什么是v-if指令
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
2.v-if特点:
如果条件不满足根本就不会创建这个元素(重点)
3.v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式
4.v-else指令
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容
5.v-else注意点
v-else不能单独出现
v-if和v-else中间不能出现其它内容
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个
7.v-else-if注意点
和v-else一样

7.v-show指令

1.什么是v-show指令

v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示

2.v-if和v-show区别

v-if: 只要取值为false就不会创建元素

v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none

3.v-if和v-show应用场景

由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素

由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏,

不会反复创建和删除, 只是修改display的值

所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if

9.v-for指令

1.什么是v-for指令

相当于JS中的for in循环, 可以根据数据多次渲染元素

2.v-for特点

可以遍历数组, 字符, 数字, 对象

//数组遍历：
<li v-for="(value, index) in list">{{index}}-&#45;&#45;{{value}}</li>
//对象遍历
<li v-for="(value, key) in obj">{{key}}---{{value}}</li>

10.v-bind指令

1.什么是v-bind指令

在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html，但是如果想给"元素的属性"绑定数据, 就必须使用v-bind
所以v-bind的作用是专门用于给"元素的属性"绑定数据的

2.v-bind格式

v-bind:属性名称="绑定的数据"
:属性名称="绑定的数据"

3.v-bind特点

赋值的数据可以是任意一个合法的JS表达式
例如: :属性名称="age + 1"

注意点: 如果要给元素的属性绑定数据, 那么是不能够使用插值语法

<input type="text" value="{{name}}">//报错

注意点: 虽然通过v-model可以将数据绑定到input标签的value属性上, 但是v-model是有局限性的, v-model只能用于input/textarea/select

但是在企业开发中我们还可能需要给其它标签的属性绑定数据

<!--这里就是MVVM中的View-->
<div id="app">
<!--    <p>{{name}}</p>-->
<!--    <p v-text="name"></p>-->
<!--    <p v-html="name"></p>-->
注意点: 虽然通过v-model可以将数据绑定到input标签的value属性上, 但是v-model是有局限性的, v-model只能用于input/textarea/select，但是在企业开发中我们还可能需要给其它标签的属性绑定数据
     <input type="text" v-model="name">
     <input type="text" v-bind:value="name">
    <input type="text" :value="name">
    <input type="text" :value="age + 1">
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "咿呀",
            age: 18
        }
    });
</script>

11 v-bind指令绑定类名

1.如何通过v-bind给style属性绑定数据

1.1将数据放到对象中

:style="{color:'red','font-size':'50px'}"

1.2将数据放到Model对象中

obj: {
    color: 'red',
    'font-size': '80px',
}

2.注意点

2.1 如果属性名称包含-, 那么必须用引号括起来

2.2 如果需要绑定Model中的多个对象, 可以放到一个数组中赋值

2.3 和绑定类名一样, 默认情况下v-bind回去Model中查找, 找不到所以没有效果

2.4 我们只需要将样式代码放到对象中赋值给style即可,但是取值必须用引号括起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
    <script src="vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            background-color: #77ff44;
        }
        .active{
            background-color: #4D7AA0;
        }
        .size{
            font-style: italic;
        }
    </style>
</head>
<body>
<div id="app">
    <p v-bind:class="obj1">{{name}}</p>
    <p v-bind:class="['a','size']">{{name}}</p>
    <p :class="obj1">{{name}}</p>
    <p :class="['a','size']">{{name}}</p>
    <p :class="age>18?['b','size']:''">{{name}}</p>
    <p :style="{color:'red'}">{{name}}</p>
    <p :style="{color:'red','font-size':'32px'}">{{name}}</p>
    <p :style="obj2">{{name}}</p>
    <p :style="{color:'red','font-size':'32px'}">{{name}}</p>
    <p :style="[obj3,obj2]">{{name}}</p>
    <input type="text" v-model="age">
    <input type="text" :value="age">
</div>
    <script>
        let vue=new Vue(
            {
                el:"#app",
                data:{
                    name:"shanjialan",
                    age:20,
                    obj1:{
                        'active':true,
                        'size':true,
                    },
                    obj2:{
                        'color':'blue',
                        'font-size':'54px',
                        'background-color':'yellow'
                    },
                    obj3:{
                        'border':'solid 5px black'
                    }
                }
            }
        )
    </script>
</body>
</html>

运行截图.png

12. v-on指令

1. 什么是v-on指令?

v-on指令专门用于给元素绑定监听事件

2. v-on指令格式

v-on:事件名称="回调函数名称"

@事件名称="回调函数名称"

3. v-on注意点:

v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数

<button onclick="alert('单佳兰')">我是按钮</button>

1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on
2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称

<button v-on:click="myFn">我是按钮</button>
<script>
 // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        methods: {
            myFn(){
                alert('单佳兰');
            }
        }
    });
</script>

常用指令-v-on修饰符

1.v-on修饰符

在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等

那么在Vue中如何处理以上内容呢, 我们可以通过v-on修饰符来处理

2.常见修饰符

.once - 只触发一次回调。

.prevent - 调用 event.preventDefault()。

.stop - 调用event.stopPropagation()。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.capture - 添加事件侦听器时使用 capture 模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script src="vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0px;
        }
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--如果想让事件监听的回调函数只执行一次, 那么就可以使用.once修饰符-->
<!--    <button v-on:click.once ="myFn">我是按钮</button>-->
<!--    //.prevent阻止默认行为-->
    <a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#zh/en/%E5%8D%81%E4%B8%80%E6%9C%88" v-on:click.prevent="myFn">百度</a>
    <p v-on:click="myFn">华中师范大学信息管理学院</p>
    <p @:click="myFn">华中师范大学信息管理学院</p>
    <div class="grandfather" v-on:click="myFn1">
        <div class="father" v-on:click="myFn2">
            <div class="son" v-on:click="myFn3"></div>
        </div>
    </div>
</div>
<script>
    let vue=new Vue({
        el:'#app',
        data:{
            name:'Shanjialan',
            age:19
        },
        methods:{
            myFn(){
                console.log("单佳兰加油嘻嘻11111");
            },
            myFn1(){
                console.log("单佳兰加油嘻嘻22222");
            },
            myFn2(){
                console.log("单佳兰加油嘻嘻33333");
            },
            myFn3(){
                console.log("单佳兰加油嘻嘻44444");
            },
        }
    });
</script>
</body>
</html>

点击son的运行截图.png

阻止事件冒泡
    <div class="grandfather" v-on:click.stop="myFn1">
        <div class="father" v-on:click.stop="myFn2">
            <div class="son" v-on:click.stop="myFn3"></div>
        </div>
    </div>

点击son的运行截图.png

事件捕获

<div class="grandfather" v-on:click.capture="myFn1">
        <div class="father" v-on:click.capture="myFn2">
            <div class="son" v-on:click.capture="myFn3"></div>
        </div>
    </div>

v-on注意点

<div id="app">
 <p @click="myFn4('shanjialan',19,$event)">点击试试看</p>
</div>
<script>
    let vue=new Vue({
        el:'#app',
        data:{
            name:'Shanjialan',
            age:19
        },
        methods:{
               myFn4(name,age,event){
                console.log(name,age,event);
                console.log(this.name);
            }
        }
    });
</script>

image.png

1.v-on注意点

1.1绑定回调函数名称的时候, 后面可以写()也可以不写
v-on:click="myFn"
v-on:click="myFn()"
1.2可以给绑定的回调函数传递参数
v-on:click="myFn('shanjialan', 19)"
1.3如果在绑定的函数中需要用到data中的数据必须加上this

按键修饰符

1.什么是按键修饰符
我们可以通过按键修饰符监听特定按键触发的事件
例如: 可以监听当前事件是否是回车触发的, 可以监听当前事件是否是ESC触发的等

<input @keyup.Q="myFn">按键修饰符</input>
    <input @keyup.enter="myFn">按键修饰符</input>
    <input @keyup.f2="myFn">按键修饰符</input>

2.按键修饰符分类
2.1系统预定义修饰符
2.2自定义修饰符

Vue.config.keyCodes.f2=113;

13. vue自定义指令

1.自定义全局指令

在Vue中除了可以使用Vue内置的一些指令以外, 我们还可以自定义指令

2.自定义全局指令语法

vue.directive('自定义指令名称', {

生命周期名称: function (el) {

指令业务逻辑代码

}

});

3.指令生命周期方法

自定义指令时一定要明确指令的业务逻辑代码更适合在哪个阶段执行

例如: 指令业务逻辑代码中没有用到元素事件, 那么可以在bind阶段执行

例如: 指令业务逻辑代码中用到了元素事件, 那么就需要在inserted阶段执行

4.自定义指令注意点

使用时需要加上v-, 而在自定义时不需要加上v-

<input type="text" v-focus>
    <p v-color>我的世界</p>

Vue.directive("color", {
        // 这里的el就是被绑定指令的那个元素
        bind: function (el) {
            el.style.color = "red";
        }
    });
    Vue.directive("focus", {
        // 这里的el就是被绑定指令的那个元素
        inserted: function (el) {
            el.focus();
        }
    });

directive方法接收两个参数

第一个参数: 指令的名称

第二个参数: 对象

注意点: 在自定义指令的时候, 在指定指令名称的时候, 不需要写v-

注意点: 指令可以在不同的生命周期阶段执行

bind: 指令被绑定到元素上的时候执行

inserted: 绑定指令的元素被添加到父元素上的时候执行

自定义指令传参

1.自定义指令参数
在使用官方指令的时候我们可以给指令传参
例如: v-model="name"
在我们自定义的指令中我们也可以传递传递
2.获取自定义指令传递的参数
在执行自定义指令对应的方法的时候, 除了会传递el给我们, 还会传递一个对象给我们
这个对象中就保存了指令传递过来的参数

<p v-color="currentColor">我的世界</p>

//参数放在obj参数的value中
    Vue.directive("color",{
        bind:function (el,obj){
            el.style.color = obj.value;
        }
    })

自定义vue局部指令

1.自定义全局指令的特点
在任何一个Vue实例控制的区域中都可以使用
2.自定义局部指令的特点
只能在自定义的那个Vue实例中使用
3.如何自定义一个局部指令
给创建Vue实例时传递的对象添加

directives: {
    // key: 指令名称
    // value: 对象
    'color': {
        bind: function (el, obj) {
            el.style.color = obj.value;
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Directives</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app1">
    <p v-color="'red'">单佳兰</p>
</div>
<div id="app2">
    <p v-color="green">单佳兰</p>
</div>
<script>
    let vue1=new Vue(
        {
            el:"#app1",
            data:{},
            method:{},
            directives:{
                "color": {
                    bind: function (el, obj) {
                        el.style.color = obj.value;
                    }
                }
            }
        }
    )
</script>
</body>
</html>