Vue基础

文章共2.2k个字 读完大约需要9分钟

Vue.js是基于ECMAScript5的渐进式框架。

简单介绍

  • Vue支持所有兼容ECMAScript5的浏览器。
  • 更新日志: GitHub
  • Vue Devtools插件可以更好的辅助我们进行Vue的调试和开发。

    • 安装

      1
      2
      3
      4
      5
      6
      7
      8
      9
      # 克隆到本地
      git clone https://github.com/vuejs/vue-devtools#vue-devtools;
      # 下载依赖
      cd vue-devtools/
      npm install
      # 编译
      npm run build
      # 进入/shells/chrome目录
      cd/shells/chrome
      • 找到manifest.json文件.
      • "persistent"对应的值改为true.
      • 将Chrome文件夹拖入google浏览器拓展程序.
      • 附件(编译目录)
        vue-devtools目录
  • 浏览源代码: Vue源代码

  • Vue与其他框架的对比: Vue与其他框架的对比

MVVM模式

MVC,MVP 和 MVVM 的图示.

使用

  • <script>标签引入
1
2
<!-- Vue会被注册成为一个全局变量 -->
<script src='... path ...'></script>
  • CDN
1
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  • NPM
1
2
# 最新稳定版
npm install vue
  • 脚手架工具vue-cli

hello world

  • hello world
1
2
3
<div id='app'>
{{msg}}
</div>
1
2
3
4
5
6
const vm = new Vue({
el:'#app',
data:{
msg: 'hello world'
}
});

指令和修饰符

指令

Vue指令

  • v-html: 输出内容(包括HTML)
  • v-text: 输出内容(纯文本)
  • v-pre: 不需要表达式,用来跳过这个元素和其子元素的编译过程。
  • v-once: 绑定渲染一次,之后改值可以成功,但不会重新渲染。
  • v-cloak: 解决页面大括号闪烁问题。
1
2
3
4
5
<style>
[v-cloak] {
display: none;
}
</style>
  • v-model: 数据双向绑定,主要应用在input,textarea,components,select上。
  • v-show: :控制样式转换
  • v-if: 控制元素是否存在, 常和v-else, v-else-if连用,有顺序关系。
  • v-for: 列表循环 key属性

修饰符

事件修饰符
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 阻止单击事件继续传播 -->
<a @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>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
按键修饰符
  • .enter
  • .tab
  • .delete // 捕获‘删除’和‘回退’
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
系统修饰键
  • .ctrl
  • .alt
  • .shift
  • .meta
  • .exact // 修饰符允许你控制由精确的系统修饰符组合触发的事件。
1
2
3
4
5
6
7
8
9
10
11
12
  
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->

<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->

<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->

<button @click.exact="onClick">A</button>
鼠标修饰符
  • .left
  • .right
  • .middel

一些细节

  • 可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

    1
    2
    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112
  • 你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符:

    1
    2
    <input @keyup.page-down="onPageDown">
    // 在上面的例子中,处理函数仅在 $event.key === 'PageDown' 时被调用。
  • 使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent只会阻止对元素自身的点击。

单页面防止闪烁

1
2
3
[v-cloak] {
display: none
}

阻值修改已有属性

  • Object.freeze()
1
2
3
4
5
6
7
8
9
10
11
12
let obj = {
name: 'Kizz',
age: 8
}

// 使用方式 锁定data的数据为obj且不可修改.
Object.freeze(obj);

const vm = new Vue({
el: '#app'
data: obj
});

Vue生命周期图和钩子函数

组件从被创建到被摧毁所经历的各种状态变化就是一个组件的生命周期,在状态转换时,都有对应的钩子函数,钩子函数会自动调用执行,我们只需提供对应的代码即可。

生命周期示意图

Vue2生命周期示意图;

钩子函数

  • beforeCreate(): 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created():在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见,常用发送AJAX请求。
  • beforeMount(): 在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
  • mounted: Vue实例挂载到页面中,此时可以进行相关的DOM操作。该钩子在服务器端渲染期间不被调用。

    • 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
    1
    2
    3
    4
    5
    6
    mounted: function () {
    this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
    })
    }
  • beforeUpdated(): 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的.

  • updated(): 组件DOM已经更新,所以可以执行依赖于DOM的操作,但是官方建议尽量避免在此间更改状态,如果要改变,最好使用计算属性watcher代替。updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated:
1
2
3
4
5
6
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
  • activated(): keep-alive 组件激活时调用。
  • deactivated(): keep-alive 组件停用时调用。
  • beforeDestroy(): 实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed(): Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  • errorCaptured: 2.50+新增当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
1
(err: Error, vm: Component, info: string) => ?boolean

计算属性VS方法vs侦听属性

  • 对于任何复杂逻辑,都应该使用计算属性。
  • 计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
  • 当需要在数据变化时执行异步或开销较大的操作时,最好选用watch

样式动态渲染

动态样式和静态样式可以同时存在,并且同时生效

对象

1
2
3
4
5
6
7
8
9
10
<!-- 1 -->
<div :class="{active: true}"></div> ==>解析为: <div class="active"></div>

<!-- 2 -->
<!-- 多用于v-for中取值动态渲染,比如投票百分比... -->
<div :style="{width: item.percentage, 'font-size': fontSize + 'px'}"></div>

<!-- 3 -->
<!-- 2.30之后可以为style绑定中的属性提供多个值,用数组包含 -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

数组

1
2
3
4
5
6
7
8
9
<!-- 1 -->
<div :class="[{active: true}, 'text']"></div> ==>解析为: <div class="active text"></div>

<!-- 2 -->
<!-- baseStyle, changeStyle都是data中定义的对象 -->
<div :style="[baseStyle, changeStyle]"></div>

<!-- 支持三元表达式 -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>

组件基础

  • 组件中的data为函数。

组件使用的四部曲

  • 注册组件
1
2
3
4
5
// 1. 创建.vue文件,一般在components文件夹内
// 2. Vue
Vue.component('my-component',{
// ...options...
});
  • 引入组件
1
import MyComponent from '...';
  • 注入实例
1
2
3
4
5
6
7
8
export default {
name: "MyComponent",
components: {
MyComponent1,
MyComponent2,
// ...
}
}
  • 页面展示
1
<MyComponent></MyComponent>

props父组件传递数据给子组件

通过事件像父级组件发送消息

axios

Promise based HTTP client for the browser and node.js

axios文档

推荐文章

-->