使用vue2开发之基础篇（使用，指令，生命周期，事件处理）

最新推荐文章于 2024-03-08 19:18:48 发布

KinHKin(五年前端)

最新推荐文章于 2024-03-08 19:18:48 发布

阅读量362

点赞数 4

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42974827/article/details/126379068

版权

vue 专栏收录该内容

11 篇文章 11 订阅

订阅专栏

简介

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

使用

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
        {{ message }}
</div>

var app = new Vue({
        el: '#app',
        data: {
                message: 'Hello Vue!'
        }
})

输出：

Hello Vue!

指令

1.绑定元素 attribute

<div id="app-2">
        <span v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
</div>

2.条件和渲染

v-if 和v-show的区别：

v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

性能比较：

v-if:有更高的切换消耗；
v-show: 有更高的初始渲染消耗

场景：

v-if:适合运营条件不大可能改变的场景下；
v-show:适合频繁切换；

<div id="app-3">
        <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
        el: '#app-3',
        data: {
                seen: true
        }
})

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
        <ol>
                <li v-for="todo in todos">
                        {{ todo.text }}
                </li>
        </ol>
</div>

var app4 = new Vue({
        el: '#app-4',
        data: {
                todos: [
                        { text: '学习 JavaScript' },
                        { text: '学习 Vue' },
                        { text: '整个牛项目' }
                ]
        }
})

3.处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
        el: '#app-5',
        data: {
                message: 'Hello Vue.js!'
        },
        methods: {
                reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('')
                }
        }
})

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
</div>

var app6 = new Vue({
        el: '#app-6',
        data: {
                message: 'Hello Vue!'
        }
})

缩写

v-bind 缩写

<a v-bind:href="url">...</a>


<a :href="url">...</a>


<a :[key]="url"> ... </a>

v-on 缩写

<a v-on:click="doSomething">...</a>


<a @click="doSomething">...</a>


<a @[event]="doSomething"> ... </a>

4，自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
                // 聚焦元素
                el.focus()
        }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
        focus: {
        // 指令的定义
        inserted: function (el) {
                        el.focus()
                }
        }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

这是一个使用了这些 property 的自定义钩子样例：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {
        bind: function (el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
        'name: ' + s(binding.name) + '<br>' +
        'value: ' + s(binding.value) + '<br>' +
        'expression: ' + s(binding.expression) + '<br>' +
        'argument: ' + s(binding.arg) + '<br>' +
        'modifiers: ' + s(binding.modifiers) + '<br>' +
        'vnode keys: ' + Object.keys(vnode).join(', ')
        }
})

new Vue({
        el: '#hook-arguments-example',
        data: {
                message: 'hello!'
        }
})

动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：

<div id="baseexample">
<p>Scroll down the page</p>
<p v-pin="200">Stick me 200px from the top of the page</p>
</div>

Vue.directive('pin', {
        bind: function (el, binding, vnode) {
                el.style.position = 'fixed'
                el.style.top = binding.value + 'px'
        }
})

new Vue({
        el: '#baseexample'
})

这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。

<div id="dynamicexample">
<h3>Scroll down inside this section ↓</h3>
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

结果：

Scroll down inside this section ↓

I am pinned onto the page at 200px to the left.

这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。

生命周期

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

事件处理的方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

实例：

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

事件修饰符

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

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

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。