Vue.js进阶（二）

最新推荐文章于 2022-12-05 22:12:34 发布
最新推荐文章于 2022-12-05 22:12:34 发布
阅读量254 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joyechen1/article/details/127821876
版权

VUE

一、组件 Component

1. 局部组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //定义vue使用的组件
            components: {
                //组件的名字
                'Navbar': {
                    //组件的内容
                    template: '<ul><li>首页</li><li>学员管理</li></ul>'
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

2. 全局组件

定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

使用
在这里插入图片描述
测试
在这里插入图片描述

二、实例生命周期

1. created 页面渲染之前执行

2. mounted页面渲染之后执行

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        hello
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            created(){
                //在页面渲染之前执行
                debugger
                console.log('created~~~~~~')
            },
            mounted(){
                //在页面渲染之后执行
                debugger
                console.log('mounted~~~~~~')
            }
        })
    </script>
</body>

</html>

三、路由

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>

    </div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        
        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>student list</div>' }
        const Teacher = { template: '<div>teacher list</div>' }
        // 2. 定义路由
        // 每个路由应该映射一个组件。
        const routes = [
            { path: '/', redirect: '/welcome' }, //设置默认指向的路径
            { path: '/welcome', component: Welcome },
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
        ]
        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })
        // 4. 创建和挂载根实例。
        // 从而让整个应用都有路由功能
        const app = new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>

测试
在这里插入图片描述

四、axios

axios是独立的项目，不是vue里面的一部分，使用axios经常和vue一起使用，实现ajax操作
① 先在data中定义变量
② 再在methods中定义方法
③ 最后调用方法

第一步：创建html页面，引入js文件，包含两个js文件：vue和axios
第二步：创建json文件，数据创建
第三步：使用axios发送ajax请求，请求文件，得到数据，在页面显示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--把userList数组里面数据显示-->
        <div v-for="user in userList">
            {{user.name}}
            {{user.age}}
        </div>

    </div> 
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {    //在data定义变量和初始值
                //定义变量：空数组
                userList:[]
            },
            created(){ //页面渲染之前执行，调用定义的方法
                this.getUserList()
            },
            methods:{  //编写具体的方法
                getUserList(){
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    //axios.get('http://localhost:8081/admin/ucenter/member')
                    axios.get("data.json")
                    .then(Response =>{
                        //console.log(Response)
                        this.userList = Response.data.data.items
                        console.log(this.userList)
                    })  //请求成功执行then方法
                    .catch(error=>{
                    
                    }) //请求失败执行catch方法
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

测试在这里插入图片描述
在这里插入图片描述

五、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

第一步：引入css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

第二步：引入js

<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

第三步：编写html

<div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>

六、node.js

1. 介绍

  • 之前学过java,运行java需要安装jdk环境
  • node.js是JavaScript的运行环境，用于执行JavaScript代码环境
    不需要浏览器，直接使用node.js运行JavaScript代码

七、npm

  • 在后端开发中，使用maven构建项目，管理jar依赖，联网下载依赖
  • npm类似于maven,用在前端中，管理前端js依赖，
    联网下载js依赖

1. npm项目初始化操作

命令 npm init -y
项目初始化之后，生成文件package.json，类似于后端pom.xml文件

2. npm下载js依赖

命令 npm install 依赖名称

3. 根据package.json文件下载依赖

命令 npm install

4.其它命令

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

八、babel

babel是转码器，把es6代码转换成es5代码
因为写的代码es6代码，但是es6代码浏览器兼容性很差,如果使用es5代码浏览器兼容性很好，编写es6代码，把es6代码转换es5运行

九、模块化

(1) 开发后端接口时侯，开发controller service mapper,controller注入service,service注入mapper
在后端中，类与类之间的调用称为后端模块化操作
(2) 前端模块化，在前端中，js与js之间调用称为前端模块化操作
(3) ES6使用 export 和 import 来导出、导入模块。

1. ES6实现模块化

注意：如果使用es6写法实现模块化操作，在node.js环境中不能直接运行的，需要使用babel把es6代码转换es5代码，才可以在node.js进行运行

1.1 导出模块
在这里插入图片描述

1.2 导入模块
在这里插入图片描述

2. ES6模块化的另一种写法

1.1 导出模块
在这里插入图片描述

1.2 导入模块
在这里插入图片描述

3. ES5实现模块化

导出模块
创建 common-js模块化/四则运算.js

// 定义成员：
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
    return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
    return parseInt(a) / parseInt(b)
}

// 导出成员：
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}
//简写
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

创建 common-js模块化/引入模块.js

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)
const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
console.log(result1, result2)

十、webpack

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

一兴一熠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js 进阶视频课程
04-24
视频教程从 vue 的入门开始，即 “响应式数据绑定、可组合的视图组件”，学习 MVVM 思想、指令、单项数据流，编写可复用可维护的组件，接着遵循渐进式开发方式、以脚手架工具搭建项目，用路由进行单页 WEB 应用开发...
Vue.js进阶知识点总结
10-18
给大家分享了关于Vue.js想成为高手的5个总要知识点，需要的朋友可以学习下。
babel在vue项目中使用(vue兼容)
qq_37493515的博客
07-10 9819
一、vue-cli创建bable 1、在用脚手架创建项目时，可以选择bable直接创建 一般请路况下是默认配置，直接使用就可以了 二、单独引入bable(直接修改package.json) 1、我们在创建vue项目时候，没有用脚手架生成bable 在dependencies引入 // 引入的插件 core-js， //core-js 是 babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。 //core-js 是在pa
vue 3.0 + Typescript + Element 搭建项目
weixin_44872023的博客
11-23 2821
vue 3.0 创建项目 创建项目 选择自行配置 配置 Babel：使用babel，便于将我们源代码进行转码（把es6=>es5） TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处 Progressive Web App(PWA)：使用渐进式网页应用（PWA） Router：使用vue-router Vuex：使用vuex状态管理器 CSS Pre-processors：使用CSS预处理器，比如：less，sass等 Li
Vue生命周期钩子介绍
awei0117的博客
12-05 1597
Vue生命周期钩子介绍
在html中引入vue+elementui及遇到的问题
qq_41687299的博客
07-19 2053
在html中引入vue+elementui及遇到的问题 在引入elementui控件时，比如DateTimePicker，出现如下图所示。并报Maximum call stack size exceeded
Vue代码执行与浏览器渲染顺序
huiaixing的博客
05-21 2277
如何理解Vue官网中说的“如果同一个watcher被多次触发，只会被推入到队列中一次“，本文通过两个简单的例子让大家搞懂。
Vue.js进阶学习 技巧开发 插件利用 效率开发 源码分析.pdf
07-29
Vue.js进阶学习 技巧开发 插件利用 效率开发 源码分析
Vue.js进阶学习教程.zip
05-11
Vue.js进阶学习 Vue.js进阶学习教程，以命令行的方式开发您的应用程序。 教程详细 课程介绍 命令行安装 各种项目模板 webpack模板工程 引入Bootstrap4 使用Ajax库-axios 自定义css样式 组件的结构 工程的结构 路由...
Vue3-生命周期函数
qq_39111074的博客
09-29 2651
生命周期函数：在某一时刻，会自动执行的函数 共8个： 1. 实例生成之前会自动执行的函数- - -beforeCreate() 2. 实例生成之后会自动执行的函数- - -created() 3. 组件内容被渲染到页面之前自动执行的函数- - -beforeMount() 4. 组件内容被渲染到页面之后自动执行的函数- - -mounted() 5. 数据发生变化时会立即自动执行的函数- - -beforeUpdate() 6. 数据发生变化后，页面重
html通过cdn引入element字体图标无法显示的解决办法
qq_35469137的博客
03-17 2914
问题：element通过cdn引入时，按官网引入线上css样式图标样式正常显示没问题，如果引入本地css则字体图标不显示 <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> --><!--线上css地址--> <!-- import Vue before Element --> <script src="../j
Vue中关于Babel的作用和用法解释
热门推荐
费瑟的博客
07-10 1万+
在webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的； 这时候就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的 语法之后，会把结果交给 webpack 去打包到 bundle.js 中 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的l...
vue 配置babel
txl910514的专栏
07-22 1万+
首先install babel cnpm install --save-dev babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-istanbul babel-polyfill babel-preset-stage-2 babel-register
vue ES6 模块化 和 babel的转码 简单使用
qq_39564710的博客
01-28 434
CommonJS模块规范 每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。 1:先创建一个文件module ,然后初始化项目，命令 ：npm init -y 2:在 module 文件中创建001.js 里面是模块化的写法，在里面定义方法，为别的页面js提供调用 内容如下，为ES6写法 // ES6模块化写法，然后被调用后，用label 把ES6转成ES5，因为node识别不了ES6的写法，只能识别ES5export default {.
VUE专题 渲染问题，方法在页面渲染前执行，导致不能在页面中实现效果 + Tabs标签监听
weixin_44131922的博客
04-18 817
我的环境是需要在监听方法中加入如下方法，如有需要加入到其他环境中 //监听某个值发生变化 改变后调用对用子页面的方法，且方法放到渲染之后执行 $nextTick this.$nextTick(()=>{ 放入要放在对应页面渲染后执行的方法 }) 强行刷新方法 This.$forceUpdate() // 渲染视图 this.$forceUpdate() 同步方式 this.$nextTick(async ()=>{ 放入要放在对应页面渲染后执行的方法 }) Tab中子页签的写法 &
vue 兼容IE报错解决方案
weixin_30802171的博客
12-29 477
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法（如箭头函数），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。 例如 Promise 、新的原生方法如 String.padStart (left-pad...
babel转码器
qq_46198929的博客
06-25 419
babel转码器
vue中引入element-ui的方法
qq_36507046的博客
08-03 2303
vue中引入element-ui的方法
vue.js学习计划表
最新发布
03-22
5. 深入学习Vue.js进阶特性：学习Vue.js的进阶特性，如路由管理、状态管理、动画效果等。可以通过阅读进阶教程或参考优秀的开源项目来学习。 6. 掌握Vue.js生态系统：了解Vue.js的周边生态系统，如Vue Router、Vuex...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值