jeff_gyy
jeff_gyy

vue指令

目录

  • 一、Vue简介
    • 1、数据驱动视图
    • 2、MVVM架构
    • 3、快速体验
  • 二、Vue指令
    • 2.0 属性指令事件指令简写
    • 2.1 v-once 指令 只渲染一次
    • 2.2 v-if，v-else-if,v-else 条件指令
    • 2.3 v-show和v-if的隐藏指令区别
    • 2.4 v-cloak 斗篷指令
    • 2.5 v-bind 属性指令
    • 2.6 v-on 事件指令
    • 2.7 v-model 表单指令
    • 2.8 v-for 循环指令
    • 2.9 v-text 文本指令
    • 2.10 v-html 指令
    • 2.11 样式绑定
    • 2.12 key 绑定
  • 三、补充内容
    • splice增删改万能方法
    • 1、 数组的7个方法
    • 2、数组和对象的遍历
    • 3、改变数组或对象内容的方法
    • 4、vue中的属性
    • 5、前台数据库
  • 四、鼠标事件
  • 五、键盘事件
  • 六、JS对象补充
  • 七、computed和methods和watch

一、Vue简介

什么是数据

1、数据驱动视图

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

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

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

vue指令_第1张图片

vue指令_第2张图片

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

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

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

vue指令_第3张图片

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

vue指令_第4张图片

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

2、MVVM架构

vue指令_第5张图片

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

vue指令_第6张图片

优缺点

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

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

3、快速体验

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

```````    ````    ````````   ``
``       ``
{{message}}
``       ``
{{msg}}
``   ``
` ````````

　　

　　

在上面代码中，我们通过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 指令 只渲染一次

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

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


This will never change: {{msg}}



  
comment

  
{{msg}}







    
  
  • {{i}}
    •

参考：

  • 数据绑定语法- 插值
  • 组件 - 对低开销的静态组件使用 v-once

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

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

v-if

v-else-if

v-else

上代码：


        

            
show控制显隐

            
if控制显隐

        


        

            
你是第1个p

            
你是第2个p

            
你是第3个p

        



    
    
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;
}



  {{ message }}

案例代码：




    {{ msg }}
    // 如果没有斗篷指令隐藏属性，代码加载到这里num对应的值还没有加载出来，而当下面的num加载出来的时候，屏幕就会出现闪一下

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"

vue指令_第7张图片

因为 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 指令在表单 、