Vue前端框架快速入门学习笔记

心想着虽然自己不搞前端，但是一般的前端代码自己总得看得懂吧，那国内目前比较火的前端框架，那肯定是vue了，就花一天时间来学习一下吧，就当入个门，至少以后看到代码至少懂一些基础的东西。

一、环境安装

坑还是比较多的，安装了很久，各种问题，参考这个博客，少走弯路：https://blog.csdn.net/qq_41340666/article/details/124168806
目录参考：

二、快速上手

1. 定义属性

首先通过new Vue()来创建Vue实例，然后构造函数接收一个对象，对象中有一些属性:

el:是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
data:数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
name:这里我们指定了一个name属性
页面中的h2元素中，我们通过{{name)}的方式，来渲染刚刚定义的name属性。

2. Vue生命周期（钩子）

每个Vue实例在被创建时都要经过一系列的初始化过程︰

创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数)。

每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

1、生命周期:

在这里插入图片描述

2、渲染数据：钩子函数

例如: created代表在vue实例创建后;
我们可以在Vue中定义一个created函数，代表这个时期的构造函数;




    
    Title


    
        

        
        
           {{name}} xxx非常美丽！

            {{num}} 位其着迷！
        
    





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
28
29
30
31
32
33
34
35
36
37
38

模拟实际渲染数据：this 我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this




    
    Title


    
        

        
        
           {{name}} xxx非常美丽！

            {{num}} 位其着迷！
        
    





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
28
29
30
31
32
33
34
35
36
37
38

总结: this就是当前的Vue实例，在Vue对象内部，必须使用this才能访问到Vue中定义的data内属性、方法等。

3. 指令

什么是指令?
指令(Directives)是带有 v-前缀的特殊属性。

例如我们在入门案例中的v-model，代表双向绑定。

1、插值表达式

（1）花括号

格式：{{表达式}}

说明;

该表达式支持JS语法，可以调用js内置函数（必须有返回值)
表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，如: var a = 1+1;
可以直接获取Vue实例中定义的数据或函数

示例
HTML：

i{name ) )

JS:

var app =new vue({
	el:"#app",
	data:{
		name:"Jack""
	}
})
1
2
3
4
5
6

2、差值闪烁

使用0方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的

加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例:发现刷新页面有延迟

3、使用v-text和v-html

使用v-text和v-html指令来替代{{}}说明:

v-text∶将数据输出到元素内部，如果输出的数据有代码，会作为普通文本输出

v-html:将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

4、v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。

接下来学习的v-model是双向绑定，视图(view)和模型(Model)之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。

目前v-model的可使用元素有:input、select、textarea、checkbox、radio、components（Vue中的自定义组件）

5、v-on

（1）基本用法

v-on指令用于给页面元素绑定事件。

语法:v-on:事件名="js片段或函数名"

简写语法:例如v-on:click='add'可以简写为@click='add'

（2）点击事件（包含关系（冒泡））

（3）点击事件（设置不自动包含关系（停止冒泡））

（4）事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()）是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是:方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js 为v-on提供了事件修饰符。

之前提过，修饰符是由点开头的指令后缀来表示的

stop ︰阻止事件冒泡
prevent :阻止默认事件发生
capture :使用事件捕获模式
self∶只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
once:只执行一次

(5) 阻止默认事件发生阻止a标签跳转

6、v-for

遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。

（1）遍历数组

语法：v-for="item in items ""

items:要遍历的数组，需要在vue的data中定义好。
item:迭代得到的数组元素的别名

（2）遍历数组：多个参数（数组角标）

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法:v-for=" (item, index) in items "

items:要迭代的数组
item:迭代得到的数组元素别名
index:迭代到的当前元素索引，从0开始

7、key

当Vue.js用v-for 正在更新已渲染过的元素列表时，它默认用"就地复用"策略。

如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
你

需要为每项提供一个唯一 key属性。理想的key值是每项都有的且唯一的id。

提升加载数据的速度

8、v-if和v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：v-if”布尔表达式”

9、v-if与v-for结合以及v-else

（1）v-if

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

（2）v-else

（3）v-if和v-show的区别（面试常问）

10、v-bind

（1）创建新的HTML页面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div id="app">



    div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el:"#app",//elemnet,vue 作用的标签
        data:{

        }
    });
script>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

（2）编写CSS样式和HTML

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        div #box{
            width:100px;
            height: 100px;
            color: darkgray;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    style>
head>
<body>
    <div id="app">
        <button>红色button>
        <button>蓝色button>
        <div id="box" class="red">
            我是盒子
            我是盒子
        div>
    div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el:"#app",//elemnet,vue 作用的标签
        data:{

        }
    });
script>
body>
html>

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
28
29
30
31
32
33
34
35
36
37
38
39
40

（3）添加点击切换图片的事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        div #box{
            width:100px;
            height: 100px;
            color: darkgray;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    style>
head>
<body>
    <div id="app">
        <button @click="color='red'">红色button>
        <button @click="color='blue'">蓝色button>
        <div id="box" class="{{color}}">
            我是盒子
            我是盒子
        div>
    div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el:"#app",//elemnet,vue 作用的标签
        data:{
            color:"red",
        }
    });
script>
body>
html>

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
28
29
30
31
32
33
34
35
36
37
38
39
40

11、计算属性

在插值表达式中使用js表达式是非常方便的,而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便

12、单表输入绑定

form表单输入值获取

<template>
  <div class="hello">
    <input type="text" v-model="username">
    <p>{{username}}p>
    <button @click="clickGetUserName">获取用户名button>
  div>
template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      username:""
    }
  },
  methods:{
    clickGetUserName(){
      console.log(this.username);
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

13、watch

（1）监控

watch可以让我们监控一个值的变化,从而做出相应的反应。

（2）浅监控

（3）深监控，监控对象

4. 组件化

在大型应用开发的时候，页面可以划分成很多部分。

往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独白开发，这无骚增加了我们开发的成本。

所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件,避免重复开发。

1、定义安全组件

我们通过Vue的component方法来定义一个全局组件。

2、组件的复用

定义好的组件，可以任意复用多次：

3、局部注册

一旦局部注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

4、组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：