vue入门秘籍

最新推荐文章于 2024-05-07 00:15:15 发布

爱忽悠的唐唐

最新推荐文章于 2024-05-07 00:15:15 发布

阅读量252

点赞数

分类专栏：前端 vue 文章标签： vue 前端 elementui 入门教程

本文链接：https://blog.csdn.net/weixin_37221852/article/details/115839664

版权

vue 同时被 2 个专栏收录

25 篇文章 3 订阅

订阅专栏

前端

24 篇文章 0 订阅

订阅专栏

学习目标

会搭建前端开发环境
会创建Vue实例，知道Vue的常见属性
会使用Vue的生命周期的钩子函数
会使用vue常见指令
会使用vue计算属性和watch监控
了解vue-cli使用
会编写vue组件
掌握组件间通信
了解vue-router使用
了解vuex使用
实战

1.认识Vue

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

2.Node和NPM

前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架。

2.1.下载Node.js

windows下载：node-v12.22.1-x64.msi
mac下载：node-v12.22.1.pkg
完成以后，在控制台输入：

node -v

看到版本信息：

2.2.NPM

Node自带了NPM了，在控制台输入npm -v查看：

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间

npm install nrm -g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

通过nrm use taobao来指定要使用的镜像源：

3.安装vscode

地址：https://code.visualstudio.com/Download
插件安装

1、安装eslint插件

2、代码保存时，自动按照eslint规则格式化代码。配置方式：
打开setting.json文件，加入如下配置：

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

setting.json文件打开方式如下图：

4.vue基础

4.1 简易安装vue

先简单引入vue.js文件，cdn地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js 。体验vue的一些特性

4.2 MVVM

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

如果我们想要把js对象中的某个变量的值渲染在页面上，用传统的js方式，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。
而在Vue.js中，方便了很多。

数据驱动视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue入门</title>
</head>
<body>
    <div id="app">
        <h2>{{name}},hello</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el:"#app", // el即element，该vue实例要渲染的页面元素
            data:{ // 渲染页面需要的数据
                name: "唐"
            }
        });
    </script>
</body>
</html>

通过new Vue()创建一个实例vm，属性el提供一个在页面上存在的DOM 元素(如 id=‘app’)，表明这个实例是关联指定的DOM节点。
在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“唐”就会被渲染到页面中，替换{{ name }}显示效果为：“唐”。

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue入门</title>
</head>
<body>
    <div id="app">
        <input v-model="name">
        <p>姓名:{{ name }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el:"#app", // el即element，该vue实例要渲染的页面元素
            data:{ // 渲染页面需要的数据
                name: "唐"
            }
        });
    </script>
</body>
</html>

4.3 选项/参数

methods

比如，我们定义一个数据num1，当用户点击按钮的时候，num1的值加1。这种情况，我们可以利用methods来实现。

computed

computed适合对多个变量进行处理后返回一个结果值，只要多个变量中的某一个值发生了变化，我们监控的这个值也就会发生变化。比如我们有两个数，需要展示的是两个数字之和。

watch

watch选项用于检测指定的数据发生改变

filters

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue入门</title>
</head>

<body>
    <div id="app">
        <p>金额： {{ num1 | priceFilter }}</p>
        <p>num1: {{ num1 }}</p>
        <button @click="plus">➕1 </button>
        <p>num2: {{ num2 }}</p>
        <p>总数: {{ sum }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
                num1: 10,
                num2: 11,

            },
            filters: {
                priceFilter(value) {
                    return "¥" + value
                }
            },
            //观察
            watch: {
                num1(newVal, oldVal) {
                    console.log(`num1有变化了，最新值：${newVal}`);
                    console.log(`num1老值，${oldVal}`)
                }
            },
            //计算属性
            computed: {
                sum() {
                    return this.num1 + this.num2
                }
            },
            //方法
            methods: {
                plus() {
                    return this.num1++;
                }
            },
        });
    </script>
</body>

</html>

4.4 常用指令

v-show

v-if/v-else

v-show和v-if区别

如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue入门</title>
</head>

<body>
    <div id="app">
        <p v-show="show1">我是true</p>
        <p v-show="show2">我是false</p>
        <p v-if="showMessage">我是if</p>
        <p v-else>我是else</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
                show1: true,
                show2: false,
                showMessage: false
            }
        });
    </script>
</body>

</html>

v-for

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue入门</title>
</head>

<body>
    <div id="app">
        <div v-for="item in list" :key="item.id">
            {{item && item.name}}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
                list: [{
                        id: 1,
                        name: 't1'
                    },
                    {
                        id: 2,
                        name: 't2'
                    },
                    {
                        id: 3,
                        name: 't3'
                    },
                ]
            }
        });
    </script>
</body>

</html>

4.5 生命周期

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue入门</title>
</head>

<body>
    <div id="app">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el: "#app", // el即element，该vue实例要渲染的页面元素
            data: { // 渲染页面需要的数据
            },
            beforeCreate: function () {
                console.group('------beforeCreate创建前状态------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
                console.log("%c%s", "color:red", "message: " + this.message)
            },
            created: function () {
                console.group('------created创建完毕状态------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            beforeMount: function () {
                console.group('------beforeMount挂载前状态------');
                console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
            },
            mounted: function () {
                console.group('------mounted 挂载结束状态------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message)
            }
        });
    </script>
</body>

</html>

5、vue进阶

5.1 vue-cli 使用

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦，vue官方提供了一个快速搭建vue项目的脚手架，使用它能快速的构建一个web工程模板。
官网： https://cli.vuejs.org/zh/

安装命令：

npm install -g @vue/cli

创建项目：

vue create my-project

运行项目

npm run serve

5.2 vue组件化及其通信

什么是组件？

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。
方便重复使用,提高开发效率。

组件通信

常见使用场景可以分为三类：

父子通信：一般通过props 和 $emit 实现
- 什么是props? 例如el-button，我们使用它时，传递了不同的type，而el-button组件就会根据不同的type属性值，渲染不一样的按钮。

  - 什么是$emit

如el-select下拉框组件，当选中值发生变化时，它会执行 this.$emit(‘change’,‘目前选中值’)。
我们在页面中引用el-select 的地方使用事件监听 @change，接收子组件传来的change事件并进行处理。

兄弟通信：

Bus 或者 Vuex

跨级通信：

Bus；Vuex；provide / inject API、 $a t t r s /$ listeners

5.3 vue-router使用

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。地址：https://router.vuejs.org/zh/

5.4 vuex使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
https://vuex.vuejs.org/zh/

5.5 Axios使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官网：https://www.kancloud.cn/yunye/axios/234845

5.6 UI框架

iview: http://v1.iviewui.com/
element-ui: https://element.eleme.cn/#/zh-CN

5.7 项目目录

与vue-cli2工程目录的区别
- vue-cli3移除了配置文件目录：config 和 build 文件夹，增加了vue.config.js文件
- vue-cli3移除了static 静态文件夹
- vue-cli3新增了public文件夹，将index.html移动到了 public 中。

6.vue项目实战

带领大家熟悉系统管理-字典配置页面开发的全流程。

6.1 创建页面

在views目录下新建system文件夹，在system下新建 dict.vue文件，并进行页面ui布局开发。

6.2 配置路由

在router配置文件中加入所需页面的路由映射地址。

在router文件下的module中加入system.js文件，所有系统管理下的路由都放在这个文件下管理。

在router 中的index文件中引入该模块。

运行项目

如果路由是history模式，可通过 http://localhost:[port]/system/dict 访问到定义的页面。
如果路由是hash模式，可通过 http://localhost:[port]/#/system/dict 访问到定义的页面。
备注：port是本地服务端口，运行时可以在控制台看到。

6.3 http请求

在api文件下新建该模块的请求文件：如

在dict.vue 的 created 或者 mounted(如果需要操作dom) 生命周期中进行数据请求，请求列表数据。

6.4 路由跳转

比如点击新增/编辑按钮的时候，希望跳到新增编辑页面。

例如新增/编辑配置的路由地址为：

在页面上点击不同按钮时，可以触发router事件，跳转至编辑新增页面

https://router.vuejs.org/zh/guide/essentials/navigation.html

在新增编辑页面可以获取上个页面传来的参数.

6.5 打包发布

在package.json文件中定义：

运行命令：

生产环境

npm run build:prod

测试环境

npm run build:test

开发环境

npm run dev

定义环境变量：
在这里插入图片描述

如何访问环境变量：
process.env.VUE_APP_BMS_URL
在这里插入图片描述

爱忽悠的唐唐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门秘籍

学习目标会搭建前端开发环境会创建Vue实例，知道Vue的常见属性会使用Vue的生命周期的钩子函数会使用vue常见指令会使用vue计算属性和watch监控了解vue-cli使用会编写vue组件掌握组件间通信了解vue-router使用了解vuex使用实战1.认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整
复制链接

扫一扫