指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如我们在入门案例中的v-on，代表绑定事件。

插值表达式

花括号：

格式：{{表达式}}

说明：

  • 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
  • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
  • 可以直接获取Vue实例中定义的数据或函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>1 + 1 = {{1+1}} </h2>
    <!-- <h2> {{var a=1+1}} </h2>-->
    <h2>我叫{{name}}，今年{{add()}}岁</h2>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    //初始化一个vue实例
    const app =new Vue({
        el: "#app", //element的缩写，选择器
        data: { //定义数据模型
            name: "小张",
            age: 18
        },
        methods: {
            add(){
                return this.age;
            }
        }
    })

</script>
</html>

运行结果：
在这里插入图片描述
使用var a = 1 + 1的运行结果：
在这里插入图片描述

插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：
在这里插入图片描述

刷新页面：

在这里插入图片描述

v-text和v-html

使用v-text和v-html指令来替代{{}}，可以解决插值闪烁的问题，在之前的代码中添加：

<h2>我叫<span v-text="name">!!!</span>，今年<span v-text="add()">000</span>岁</h2>

之后我们在slow 3G的条件下运行，我们可以看到没有出现插值闪烁的现象，在对应位置显示了其它的信息（这时我们设置的默认数据，如果没有默认数据，会显示空白）。
在这里插入图片描述

两者比较：

  • v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
  • v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
<div id="app">
    <!--分别测试v-text、v-html-->
    <h2>我叫<span v-text="name">!!!</span>，今年<span v-text="add()">000</span>岁</h2>
    <h2>我叫<span v-html="name">!!!</span>，今年<span v-text="add()">000</span>岁</h2>
</div>

</body>

<script>

    //初始化一个vue实例
    const app =new Vue({
        el: "#app", //element的缩写，选择器
        data: { //定义数据模型
            //修改name的内容
            name: "<span style='color: red'>小张</span>",
            age: 18
        }
    })

</script>

运行结果：
在这里插入图片描述

v-model实现双向绑定

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

测试代码(checkbox)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="Python" />Python<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="C++" />C++<br/>
    <input type="checkbox" v-model="language" value="C#" />C#<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: "#app",
        data: {
            language: []
        }
    });
</script>
</html>
  • 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型
  • radio对应的值是input的value值
  • text 和textarea 默认对应的model是字符串
  • select单选对应字符串，多选对应也是数组

效果：

在这里插入图片描述

v-on绑定事件

基本用法：v-on指令用于给页面元素绑定事件

语法：v-on:事件名="js片段或函数名"，之前已经用过了，另外，事件绑定是可以简写的，例如v-on:click= ‘add’ 可以简写为 @click='add’

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--事件中直接写js片段-->
    <button @click="num++">增加一个</button><br/>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button @click="decrement">减少一个</button><br/>
    <h1>{{num}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            num: 100
        },
        methods: {
            decrement() {
                this.num--;
            }
        }
    });
</script>
</body>
</html>

效果：

在这里插入图片描述

事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

  • .stop ：阻止事件冒泡到父元素
  • .prevent：阻止默认事件发生*
  • .capture：使用事件捕获模式
  • .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
  • .once：只执行一次

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--右击事件，并阻止默认事件发生-->
    <button @contextmenu.prevent="num++">增加一个</button>
    <br/>
    <!--右击事件，不阻止默认事件发生-->
    <button @contextmenu="decrement()">减少一个</button>
    <br/>

    <h1>{{num}}</h1>

    <!-- 缩写语法 -->
    <input @keyup.enter="submit">

    <!-- Ctrl + Click -->
    <button @click.ctrl="clear">Clear</button>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            num: 100,
        },
        methods: {
            decrement() {
                this.num--;
            },
            submit(){
                console.log("你已经提交了")
            },
            clear(){
                this.num=0;
            }

        }

    });
</script>
</html>

右键“增加一个”，不会触发默认的浏览器右击事件；右键“减少一个”，会触发默认的浏览器右击事件

按键修饰符：

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

  • .enter (13)
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

运行测试：
在这里插入图片描述

组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl
  • .alt
  • .shift

例如：

<!-- Alt + C -->
<input @keyup.alt.67="submit()">

<!-- Ctrl + Click -->
<button @click.ctrl="clear">Clear</button>

在这里插入图片描述

v-for遍历数据

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

遍历数组：

语法：v-for="item in items"

  • items：要遍历的数组，需要在vue的data中定义好。
  • item：迭代得到的数组元素的别名

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：v-for="(item,index) in items"

  • index：迭代到的当前元素索引，从0开始。
    示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            users: [
                {name: '张三', gender: '女', age: 19},
                {name: '李四', gender: '男', age: 20},
                {name: '王五', gender: '女', age: 23},
                {name: '马六', gender: '女', age: 19},
                {name: '赵七', gender: '女', age: 22}
            ]
        },
    });
</script>
</html>

运行结果：

在这里插入图片描述

遍历对象：

v-for除了可以迭代数组，也可以迭代对象。语法基本类似：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1个参数时，得到的是对象的属性值
  • 2个参数时，第一个是属性值，第二个是属性名
  • 3个参数时，第三个是索引，从0开始

示例：

<body>
<div id="app">
    <ul>
        <li v-for="(user,index) in users">
            {{index+1}} - {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
    <ul>
        <li v-for="(value, key, index) in user">
            {{index + 1}}. {{key}} - {{value}}
        </li>
    </ul>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            users: [
                {name: '张三', gender: '女', age: 19},
                {name: '李四', gender: '男', age: 20},
                {name: '王五', gender: '女', age: 23},
                {name: '马六', gender: '女', age: 19},
                {name: '赵七', gender: '女', age: 22}
            ],
            user:{name: '张三', gender: '女', age: 19}
        },
    });
</script>

效果：
在这里插入图片描述

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例代码：

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>
  • 这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
  • 这里我们绑定的key是数组的索引，应该是唯一的

v-if和v-show

v-if，条件判断。当得到结果为true时，所在的元素才会被渲染。 语法：v-if="布尔表达式"
v-show 也是用于根据条件展示元素的选项指令，用法大致一样。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="show = !show">按钮</button>
    <br>
    <h1 v-if="show">
        看到我啦？！
    </h1>
    <h1 v-show="show">
        看到我啦？！show
    </h1>
</div>
</body>

<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            show: true,
     	    users: [
                {name: '张三', gender: '女', age: 19},
                {name: '李四', gender: '男', age: 20},
                {name: '王五', gender: '女', age: 23},
                {name: '马六', gender: '女', age: 19},
                {name: '赵七', gender: '女', age: 22}
            ]
        }
    });
</script>

</html>

效果：

在这里插入图片描述

不同点：（一般使用v-if）

v-if 的元素始终会被渲染并保留在 DOM 中
v-show 只是简单地切换元素的 CSS 属性 display，block为显示，none为隐藏.

与v-for结合:

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

修改v-for中的案例，添加v-if：

<ul>
    <li v-for="(user, index) in users" v-if="user.gender == '女'">
        {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
    </li>
</ul>

测试：只显示女性用户信息
在这里插入图片描述

v-else

我们可以使用 v-else 指令来表示 v-if 的“else 块”：

<div id="app">
    <h1 v-if="Math.random() > 0.5">
        使用了 if
    </h1>
    <h1 v-else>
        使用了 else
    </h1>
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="random=Math.random()">点我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">
        if
    </h1>
    <h1 v-else-if="random > 0.5">
        if 0.5
    </h1>
    <h1 v-else-if="random > 0.25">
        if 0.25
    </h1>
    <h1 v-else>
        else
    </h1>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    });
</script>
</html>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

演示：

在这里插入图片描述

v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--可以是数据模型，可以是具有返回值的js代码块或者函数-->
    <div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            title: "title",
        }
    });
</script>
</html>

效果：
在这里插入图片描述

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定class样式：

语法：v-bind:class可以简写为:class

数组语法： (不会使用)

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })
</script>

渲染后的效果：（具有active和hasError的样式）

在这里插入图片描述

对象语法： 传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

测试代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--可以是数据模型，可以是具有返回值的js代码块或者函数-->
    <div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div>

    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>

    <div v-bind:class="{ active: isActive }"></div>

    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>

</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            title: "title",
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
            isActive: true,
            hasError: false
        }
    });
</script>
</html>

运行结果：
在这里插入图片描述

绑定style样式：

数组语法： 数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

数据：

data: {
    baseStyles: {'background-color': 'red'},
    overridingStyles: {border: '1px solid black'}
}

渲染后的结果：

<div style="background-color: red; border: 1px solid black;"></div>

对象语法： v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

数据：

data: {
  activeColor: 'red',
  fontSize: 30
}

效果：

<div style="color: red; font-size: 30px;"></div>

计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：

data:{
    birthday:1529032123201 // 毫秒值
}

我们在页面渲染，希望得到yyyy-MM-dd的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
</h1>

虽然能得到结果，但是非常麻烦，在Vue中提供了计算属性，来替代复杂的表达式：

计算属性(computed)：本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--注意：使用birth时并没有加括号-->
        <h1>您的生日是：{{birth}} </h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            birthday: 999999999999 // 毫秒值
        },
        computed: {// 计算属性本质是一个方法，但是必须返回结果
            birth() {
                const d = new Date(this.birthday);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
            }
        }
    });

</script>
</html>

效果：

在这里插入图片描述

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。

watch监听

watch可以让我们监控一个值的变化。从而做出相应的反应。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: "#app",
        data: {
            message: ""
        },
        watch: {
            message(newVal, oldVal) {
                console.log(newVal, oldVal);
            }
        }
    });
</script>
</html>

效果：随着我们在输入框改变数据，后台会做出相应的响应
在这里插入图片描述

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

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue