1. 技术文章
  2. vue指令

vue指令

由 蓝咒 提交于 2020-02-13 17:48:17

目录

一、Vue简介

什么是数据

1、数据驱动视图

Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一个Vue的实例，而这个实例又作用于页面上的某个HTML元素。

其核心在于通过数据驱动界面的更新和展示而非JS中通过操作DOM来改变页面的显示。

img

img

上图的DOM Listeners和Data Bindings是数据驱动中实现数据双向绑定的关键，实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters; 这也是Vue.js事件驱动的原理所在。

对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦有变化，Model中的数据也会发生改变；

对于Model而言，当我们操纵Model中的数据时，Data Bindings工具会帮助我们更改View中的DOM元素。

img

此外，页面组件化也是Vue.js的核心，它提供了一种抽象，让我们可以用独立可服用的小组件来构建大型应用。

img

所以，我们搭建的任何一个界面你可以把其抽象成为一个组件树，充分的去复用它。

2、MVVM架构

img

Model是每个页面的单独数据，View是每个页面中的HTML结构，VM是调度者；相比于MVC主要做了如下图示的调整：

img

优缺点

优点：数据驱动，调度均匀；

缺点：不适合大型项目的架构设计。

3、快速体验

核心是vm，他是一个Vue实例对象。

`<!DOCTYPE html>``<html lang=``"en"``>``<head>``    ``<meta charset=``"UTF-8"``>``    ``<title></title>``</head>``<body>``   ``<div id=``"app"``>``       ``<p>{{message}}</p>``       ``<p>{{msg}}</p>``   ``</div>` `<script src=``"js/vue.js"``></script>``<script>``    ``// 1. 创建Vue的实例``    ``const` `vm = ``new` `Vue({``        ``el: ``'#app'``,``        ``data: {  ``// vue中的model -> 数据``           ``message: ``'hello world!'``,``           ``msg:``'我要上班'``        ``}``    ``});``</script>``</body>``</html>`

　　

　　

在上面代码中，我们通过new Vue()构建了一个Vue的实例。

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如：挂载元素（el）和数据（data），我们可以操纵数据改变视图。

el表示Vue要操作哪一个元素下面的区域，比如：#app则表示操作id为app的元素下面的区域；

data表示Vue实例的数据对象，data的属性能够响应数据的变化；每个 Vue 实例都会代理其 data 对象里所有的属性。

二、Vue指令

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

2.0 属性指令事件指令简写

1）v-bind: 可以简写为 :
2）v-on: 可以简写为 @

2.1 v-once 指令 只渲染一次

执行一次性地插值，当数据改变时，插值处的内容不会更新。

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

参考：

2.2 v-if，v-else-if,v-else 条件指令

条件指令，原理喝python中一样，if,else if, else，逻辑只走一个

v-if

v-else-if

v-else

上代码：

<div id="app">
        <div>
            <p v-show="isShow">show控制显隐</p>
            <p v-if="isShow">if控制显隐</p>
        </div>

        <div>
            <p v-if="0">你是第1个p</p>
            <p v-else-if="0">你是第2个p</p>
            <p v-else>你是第3个p</p>
        </div>
</div>
    
    
new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })


前端展示结果：你是第3个p

2.3 v-show和v-if的隐藏指令区别

1）语法：v-show="bool值" | v-if="bool值"

2）两者的区别：

v-show：
    1.在隐藏标签时，采用display:none渲染标签，标签通过css隐藏。在前端检查还是能看见
    2.简单的CSS切换，更高的初始渲染消耗
    3.如果频繁使用，推荐使用
v-if：
    1.在隐藏标签时，不会渲染在页面上。通过注释的方式，前端检查看不见。
    2.更高的切换消耗
    3.如果需要安全度，推荐使用

v-show 也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

2.4 v-cloak 斗篷指令

​ 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

案例代码：

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
    // 如果没有斗篷指令隐藏属性，代码加载到这里num对应的值还没有加载出来，而当下面的num加载出来的时候，屏幕就会出现闪一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>
<!-- 避免页面闪烁-->

2.5 v-bind 属性指令

动态地绑定标签中的一个或多个属性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"

:class="{ red: isRed }" 或 :class="[classA, classB]" ...

:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...

绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"

语法结构：v-bind:argument="expression"

<!-- a是变量，值就是类名 | b就是类名，不是变量 | c是变量，值为布尔，决定b类是否起作用 -->
<p v-bind:class="[a, {b: c}]"></p>

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

语法糖为冒号（：）

2.6 v-on 事件指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：

  1. .stop - 调用 event.stopPropagation()；停止冒泡。
  2. .prevent - 调用 event.preventDefault(); 停止监听原生事件。
  3. .capture - 添加事件侦听器时使用 capture 模式。
  4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  5. .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  6. .once - 触发一次。

2.7 v-model 表单指令

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

  • text 和 textarea 元素使用 value 属性和 input 事件；
  • checkbox 和 radio 使用 checked 属性和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

2.8 v-for 循环指令

基于数据渲染一个列表，类似于JS中的遍历。其数据类型是可迭代类型。和python中for循环一样

* 1）语法：v-for="ele in obj"  obj是被遍历的对象，ele是遍历得到的每一次结果
* 2）遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
*      字符串：v-for="v in str"  |  v-for="(v, i) in str"
*      数组：v-for="v in arr"  |  v-for="(v, i) in arr"
*      对象：v-for="v in obj"  |  v-for="(v, k) in obj"  |  v-for="(v, k, i) in obj"
* 注：v-for遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用

上代码：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

遍历字符串：

第一个参数：e 代表值

第二个参数：i 代表索引

<p>
     <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
</p>



new Vue({
        el: '#app',
        data: {
            d1: 5,
            d2: 'abc',
            d3: [1, 3, 5],
            d4: {
                name: "Bob",
                age: 17.5,
                gender: "男"
            }
        }
})

遍历数组：

第一个参数：e 代表值

第二个参数：i 代表索引

        <p>
            <i v-for="e in d3">【{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
        </p>

new Vue({
        el: '#app',
        data: {
            d1: 5,
            d2: 'abc',
            d3: [1, 3, 5],
            d4: {
                name: "Bob",
                age: 17.5,
                gender: "男"
            }
        }
})

遍历字典对象：

第个参数：e 代表值

第二个参数：k 代表key

第三个参数：i 代表索引

        <p>
            <i v-for="e in d4">【{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
        </p>

2.9 v-text 文本指令

v-text：向标签中注入文本，且会替换掉元素之前的内容。；

类似innerText。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2.10 v-html 指令

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<div v-html="html"></div>

　参考：数据绑定语法 - 插值

通过v-html会把文本解析成html文本，有样式的话，会直接出来样式。　

类似JavaScript中的innerHTML。

使用手法：

> <!-- 方法处理器 -->
>
> <button v-on:click="doThis"></button>
>
> <!-- 内联语句 -->
>
> <button v-on:click="doThat('hello', $event)"></button>
>
> <!-- 缩写 -->
>
> <button @click="doThis"></button>
>
> <!-- 停止冒泡 -->
>
> <button @click.stop="doThis"></button>
>
> <!-- 阻止默认行为 -->
>
> <button @click.prevent="doThis"></button>
>
> <!-- 阻止默认行为，没有表达式 -->
>
> <form @submit.prevent></form>
>
> <!--  串联修饰符 -->
>
> <button @click.stop.prevent="doThis"></button>
>
> <!-- 键修饰符，键别名 -->
>
> <input @keyup.enter="onEnter">
>
> <!-- 键修饰符，键代码 -->
>
> <input @keyup.13="onEnter">
>
> <!-- the click event will be triggered at most once -->
>
> <button v-on:click.once="doThis"></button>


 语法糖为（@）

2.11 样式绑定

两种方式绑定属性：

  1. 通过class绑定
  2. 通过style绑定

总结：

通过对象绑定时，是样式value

通过数组绑定时，是样式key

为什么会这样？数据返回的是一个对象，针对数组内的每个值通过key获取真正的value，并绑定到class上。

凡是希望外界控制的，都要做成属性，灵活改变，组件也就活了。

通过:atrr进行绑定的属性，后面不是字符串了，而是JavaScript表达式了<div :class="oneClass">样式类可以是字符串

标签
vue
前端组件
bind
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!