VUE教程（持续更新中）

Posted 2022-11-03 师兄白泽

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE教程（持续更新中）相关的知识，希望对你有一定的参考价值。

VUE教程

1. VUE简介

https://cn.vuejs.org/index.html

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

1-1. 技术发展的过程：

我们在技术的发展过程中，从服务端渲染的模式逐渐转换为前后端分离，前端逐渐工程化的发展不仅减少了后端的工作量，而且也使得一大批前端框架出现。因此，我们作为前端开发者，就要了解并学习如同Angular、vue、react一样的很多前端渐进式框架。因此你可以跟着白泽的文档继续学习，也可以点击上边的链接，去往vue的官方教程，相信我，每一种方式都会使你获益匪浅。

技术发展路径：

服务端渲染 —> 前后端分离—>单页应用—>Vue框架

服务端渲染
- 后端渲染前端页面
前后端分离
- 前后端分离，整个页面渲染数据
单页应用
- 前后端分离的基础上，部分页面渲染页面内容
VUE框架
- 运行包含vue的js，使用框架渲染部分页面内容

2. 使用VUE框架

2-1. 构建你的第一个VUE程序

安装VUE
1. 方法1（npm）：
```
npm install vue
```
2. 方法2（直接下载）：
  
  开发版本： https://cn.vuejs.org/js/vue.js
  
  生产版本： https://cn.vuejs.org/js/vue.min.js

在你的页面引入VUE

CDN

<!--开发环境-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!--生产环境-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!--如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：-->
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

引入你下载的文件
```
<script src="../vue.js"></script>
```

构建你的第一个VUE程序

<body>
    <!-- 模板--》 vue --》渲染真实DOM -->
    <div id="app">
        message白泽
    </div>
    <script src="../vue.js"></script>
    <script>
        var app = new Vue(
            // 创建的vue控制哪个内容
            el:"#app",
            // 页面中要显示的动态数据
            data:
                message:'hello'
            
        )
    </script>
</body>

你将在页面中看到如下的内容：

此时你只需要在console控制台输入如下内容，便可以改变页面显示效果：

app.message = "你好帅"

显示效果如下：

我们把以上这种可动态修改的数据成为响应式数据，即当数据发生改变时，页面将会重新进行渲染

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        
        ul
            margin: 20px 40px;
            width: 400px;
            border: 1px solid #f40;
            padding: 20px 20px;
            border-radius: 10px;
        
        li
            background: #f40;
            color: white;
            padding: 20px 12px;
            margin: 20px 0px;
            border-radius: 5px;
        
        .title
            text-align: center;
        
        button
            cursor: pointer;
            background-color: #f40;
            border: none;
            color: white;
        
    </style>
</head>
<body> 
    <div id="app">
        <ul>
            <li class="title">信息登记</li>
            <li v-for="(item,i) in person">
                姓名：item.name
                性别：item.sex
                手机号：item.phone
                点赞人数:item.like?item.like:'无'
                <button @click="changeStock(item,item.like+1)">赞</button>
                <button @click="changeStock(item,item.like-1)">踩</button>
                <button @click="remove(i)">删除</button>
            </li>
        </ul>
        <p>总like人数total</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        var app = new Vue(
            el:"#app",
            // 数据
            data:
                person:[
                    name:"张三",
                    sex:"男",
                    phone:"17283728172",
                    like:10
                ,
                    name:"李四",
                    sex:"男",
                    phone:"18293828192",
                    like:9
                ,
                    name:"Lisa",
                    sex:"女",
                    phone:"48278838382",
                    like:7
                ]
            ,
            // 计算属性
            computed:
                total()
                    // 返回计算总like人数（可以使用循环person去加）
                    // reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加
                    return this.person.reduce((a,b) => a + b.like , 0);
                
            ,
            // 方法
            methods:
                changeStock(person,newStock)
                    if(newStock < 0)
                        newStock = 0;
                    
                    person.like = newStock;
                ,
                remove(index)
                    // 从索引为idnex的位置删除1个元素
                    this.person.splice(index,1);
                
            
        )
    </script>
</body>
</html>

示例效果如下：

> 现阶段，你并不需要知道如上代码的实现原理，只需要知道，有了VUE以后，曾经需要循环和绑定的一些数据和事件，都会变得简单起来。而新的框架出现的意义正是让大家更方便的去创造和产出内容。

2-2.VUE核心原理

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

简单来说，VUE的核心原理为虚拟DOM树。过程如下

创建实例
注入
首次渲染
1. 编译生成虚拟DOM树
2. 挂载
已挂载

在数据变动时，VUE将会重新进行渲染

重新生成虚拟DOM树
对比新旧两个DOM树的差异
将差异应用到真实DOM
完成渲染

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE的一些核心概念</title>
    <!-- VUE会生成部分页面或者生成全部的页面（即，部分挂载或者全部挂载） -->
    <style>
        *
            margin: 0;
            padding: 0;
        
    </style>
</head>
<body>
    <div id="app">
        
    </div>
    <script src="../vue.js"></script>
    <script>
        var app = new Vue(
            el:"#app",
            data:
                author:"zhang",
                title:"this is a title"
            ,
            // 这是一段恶心的代码 This is a disgusting piece of code(所有的代码最后都会渲染成为render，然后将虚拟节点树渲染 成为 真实的节点树)
            render(h)
                console.log("render");
                return h("div",[
                    h("h1",`first vue`),
                    h("p",`this is a $this.author`)
                ])
            ,
            // This is also a disgusting piece of code
            template:`
            <div id="app">
                <h1>title</h1>
                <p>author</p>
            </div>
            `
        )
    </script>
</body>
</html>

2-3. VUE组件

这部分内容学习完成后，我们就可以开始构建一些简单的应用了，在后续的章节中，我会从项目入手，带大家逐渐熟悉VUE的其他新的特性，现在，让我们先来了解VUE的组件。

创建组件

<div id="app"></div>
    <script src="../vue.js"></script>
    <script>
        //自定义一个组件
        var myButton = 
            data()
                return
                    count:0,
                ;
            ,
            template:`<button>当前点击了count次</button>`
        
        var app = new Vue(
            data:

            
        )
        //这是另一种挂载目标元素的方法
        app.$mount("#app")
    </script>

组件需要注意以下几点：

无el
data必须是一个函数，该函数返回的对象为数据
由于没有el配置，组件的虚拟DOM树必须在template或者render中

注册组件

全局注册

全局注册后，整个页面都可以使用这个组件

Vue.component("组件名称","组件配置对象");
Vue.component("Button1",myButton);
Vue.component("Button2",
    data()
        return
            count:0,
        ;
    ,
    template:`<button>当前点击了count次</button>`
);

以下是一个小的DEMO

<body>
    <div id="app"></div>
    <script src="../vue.js"></script>
    <script>
        // 定义一个组件
        var myButton = 
            data()
                return
                    count:0,
                ;
            ,
            template:`<button @click="count++">当前点击了count次</button>`
        
        // 注册组件
        // Vue.component("组件名称","组件配置对象");
        Vue.component("Button",myButton);
        // 使用注册的组件
        var app = new Vue(
            data:
            ,
            template:`
            <div>
                <Button></Button>
                <Button></Button>
                <Button></Button>
                <Button></Button>
            </div>
            `
        )
        app.$mount("#app")
    </script>
</body>

局部注册