okouk
okouk

Vue学习笔记


vue的学习有一阵子了，打算在这新的一年花一点时间去沉淀一下。本篇文章主要是围绕vue2.0官方文档进行简化和总结，如果读者是零基础，请阅读官方文档~

(2022/1/3… 持续更新

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

Vue2.0学习笔记

  • Vue的介绍
  • Vue2.0
    • 指令篇
      • 内容渲染
      • 条件渲染
        • 用key管理可复用的元素
      • 循环渲染
        • 维护状态
      • 属性绑定 v-bind:
      • 事件绑定 v-on:
        • 事件修饰符
        • 按键修饰符
      • 双向绑定指令 v-model
        • 双向绑定修饰符
    • 计算属性与侦听器
      • 计算属性
      • 侦听器
    • Vue的生命周期
    • Vue构造的组成结构
  • vue-cli
    • vue-cli 使用
    • vue 项目的运行流程
      • 解析main.js文件
  • Vue 组件
    • Vue组件组成部分
    • vue组件的使用方法
      • 全局组件
    • 自定义属性props
  • vue-cli
    • vue-cli 使用
    • vue 项目的运行流程
      • 解析main.js文件
  • Vue 组件
    • Vue组件组成部分
    • vue组件的使用方法
      • 全局注册组件
    • 自定义属性props
      • props 验证
    • 组件样式冲突
      • 样式穿透
  • Vue生命周期
  • 组件之间的传值
    • 父向子——自定义属性
    • 子向父——自定义事件
    • 兄弟之间传值——EventBus
  • ref引用
    • nextTick与ref之间的小陷阱
  • 操作数组的几个函数
  • Vue 动态组件
    • keep-alive
    • 组件的name名词
    • include属性
  • Vue 插槽
    • 插槽的介绍
    • 插槽的名称(具名插槽)
    • V-slot 插槽指令
    • slot的默认值 --- 后备内容
    • 插槽运用
    • 作用域插槽
  • 自定义指令
    • 自定义指令的钩子函数
      • 钩子函数的参数
    • 私有自定义指令
    • 全局自定义指令
  • 全局导入外部库
  • 前端路由
    • 路由的概念和原理
    • 手动模拟前端路由
  • vue-router 的基本使用
    • vue-router 安装配置步骤
    • vue router组件
    • 前端页面写法
    • 路由重定向
    • 嵌套(子)路由
      • 子路由规则写法
      • 默认子路由
    • 动态路由规则
    • 路由规则props传参
    • 路径参数和url查询参数
    • 路由导航
    • 导航守卫
    • 全局前置守卫

Vue的介绍

Vue主要采用了MVVM的设计模式，是原来的MVC设计模式的一个升级。以前传统的MVC,是将后端数据手动渲染到前端页面,将业务逻辑和前端渲染彻底分开。
MVVM本质上就是MVC 的改进版，指的是(Model,View,ViewModel),三者相互协调。

  • MVVM的工作原理Vue学习笔记_第1张图片

当数据源发生变化的时候，ViewMode就会监听到，负责自动渲染到视图层。

当表单数据发生变化时，也会被监听到，并且自动同步到Model的数据源之中。

Vue2.0

Vue有很多模板语法和指令

指令篇

内容渲染

  • 内容渲染
    • v-text
    • 插值表达式
    • v-html

1. v-text
v-text 作为属性可以覆盖原来标签的内容

<div id='app'>
        <p v-text='message'>原来的内容p>

    div>
    <script type='text/javascript'>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello! Vue!'
            }
        });
    script>

在这里插入图片描述

2. 插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

    <div id='app'>
        <p>{{message}}p>
    div>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

比如此处’Hello! Vue!’
在这里插入图片描述
用js代码修改为
Vue学习笔记_第2张图片
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}span>

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

  • 未使用
    <div id='app' >
        <p>{{message}}p>
    div>  
    <script type='text/javascript'>
        var app = new Vue({
            el: '#app',
            data: {
                message: '
你们好
'
            }
        });
    script>

在这里插入图片描述

  • 使用v-html
<div id='app'>
        <p v-html='message'>p>
    div>
    <script type='text/javascript'>
        var app = new Vue({
            el: '#app',
            data: {
                message: '
你们好
'
            }
        });
    script>

在这里插入图片描述

要注意绝不要对用户提供的内容使用插值，防止xss攻击。

条件渲染

v-if 指令用于条件性地渲染一块内容。
也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!h1>
<h1 v-else>Oh no h1>

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

<div v-if="type === 'A'">
  A
div>
<div v-else-if="type === 'B'">
  B
div>
<div v-else-if="type === 'C'">
  C
div>
<div v-else>
  Not A/B/C
div>
用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。比如切换的时候会复用原有的input输入内容。

Vue学习笔记_第3张图片

  • 增加Key
    但有时候没有对应的需求，可以告诉vue，让两个元素独立，不进行复用。只需添加一个具有唯一值的key attribute即可：
<template v-if="loginType === 'username'">
  <label>Usernamelabel>
  <input placeholder="Enter your username" key="username-input">
template>
<template v-else>
  <label>Emaillabel>
  
  <input placeholder="Enter your email address" key="email-input">
template>

循环渲染

  • 语法1 item in items
    可以用v-for来循环一个list，v-for 指令需要用item in items 形式的特殊语法，期中items是数据源，item是迭代器别名。
<ul id="example-1">  <li v-for="item in items" :key="item.message">    {{ item.message }}  li>ul>

var example1 = new Vue({  el: '#example-1',  data: {    items: [      { message: 'Foo' },      { message: 'Bar' }    ]  }})
  • 结果
    Vue学习笔记_第4张图片
  • 语法2 (item,index) in items
    在v-for中，还能支持另外一种写法，表示当前的索引
<ul id="example-2">  <li v-for="(item, index) in items">    {{ parentMessage }} - {{ index }} - {{ item.message }}  li>ul>
  • 语法3 在v-for里访问对象 value in object
    我们可以在v-for里，去遍历一个对象的所有property
<ul id="v-for-object" class="demo">  <li v-for="value in object">    {{ value }}  li>ul><script>new Vue({  el: '#v-for-object',  data: {    object: {      title: 'How to do lists in Vue',      author: 'Jane Doe',      publishedAt: '2016-04-10'    }  }})script>
  • 语法4 (value,key)w in obj
  • 语法5 (value, key, index) in obj
维护状态

因为vue的更新渲染策略，是采用就地更新的策略，而不是重新渲染，因此对于循环渲染，需要给vue一个提示key，以便它能跟踪每个节点，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

key 最好是能唯一表示每一条数据的数字 如id

属性绑定 v-bind:

插值表达式不能直接应用到属性中，如。

 <div id='app'>        <p title="{{message}}">标题p>    div>    <script type='text/javascript'>        var app = new Vue({            el: '#app',            data: {                message: '这是一个标题'            }        });    script>

Vue学习笔记_第5张图片
为了解决这个问题，可以使用 v-bind:属性名。

<div id='app'>		<p v-bind:title="message">标题p>	div>	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				message: '这是一个标题'			}		});	script>

Vue学习笔记_第6张图片

  • 小技巧
    v-bind: 可以用 :简写
    Vue学习笔记_第7张图片

事件绑定 v-on:

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

<body>	<div id='app'>		<p>{{counter}}p>		<button v-on:click="counter+=1">+1button>	div>	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				counter: 0,			}		});	script>body>

Vue学习笔记_第8张图片
注意: 上面的代码在v-on:click里执行了一个js代码，也就是说在双引号里的代码是js代码，所以我们也能调用方法

在Vue构造实例里，增加methods,并且用v-on:绑定这个事件

	<div id='app'>		<p>{{counter}}p>		<button v-on:click="show">+1button>	div>	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				counter: 0,			},			methods: {				show: function () {					alert('123');				}			},		});	script>

有时候我们需要在内联语句处理器中访问原始的 DOM 事件event，只需要传参即可~

Vue学习笔记_第9张图片

事件修饰符

对于某些事件，我们需要进行一些限制，如：阻止冒泡，限制原有行为。

我们通常用js来操作原生的dom事件
如下：防止表单提交自动刷新页面

	<div id='app'>		<button v-on:click="counter+=1">+1button>		<form v-on:submit="sb">			<input v-model="counter">input>			<input type="submit">input>		form>	div>	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				counter: 0,			},			methods: {				show: function (e) {					console.log(e);				},				sb: function (event) {					event.preventDefault();					alert("submit successful!");				}			},		});	script>

Vue学习笔记_第10张图片
我们能通过一些事件修饰符来代替原来的操作

	<div id='app'>		<button v-on:click="counter+=1">+1button>		<form v-on:submit.prevent='sb'>			<input v-model="counter">input>			<input type="submit" v-on:click.prevent='sb'>input>		form>	div>	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				counter: 0,			},			methods: {				show: function (e) {					console.log(e);				},				sb: function () {					alert("submit successful!");				}			},		});	script>

为了解决这个问题，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><div v-on:click.self="doThat">...div>
按键修饰符

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

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

如下列代码，按esc可以清空文本，按enter可以提交

<div id='app'>		<button v-on:click="counter+=1">+1button>		<form v-on:keyup.enter='sb'>			<input v-model="counter" v-on:keyup.esc='counter=0'>input>			<input type="submit" v-on:click.prevent='sb'>input>		form>	div>	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				counter: 0,			},			methods: {				show: function (e) {					console.log(e);				},				sb: function () {					alert("submit successful2!");				}			},		});	script>
  • 简写的小技巧
  1. ES6语法方法简写
	<script type='text/javascript'>		var app = new Vue({			el: '#app',			data: {				counter: 0,			},			methods: {				show: function () {					alert('123');				},				//在es6的语法中，方法可以省去function				show2() {					alert('666')				}			},		});	script>
  1. v-on: 可以简写为@

双向绑定指令 v-model

Vue.js 可以用 v-model 指令在表单 、