后端所需Vue知识快速学习

最新推荐文章于 2024-04-07 16:54:08 发布

jakiechaipush

最新推荐文章于 2024-04-07 16:54:08 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_43456605/article/details/127724492

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

一.简介
- 1.1 Vue概述
- 1.2 Vue的安装与配置
二. 基本语法
三. vue-cli开发

一.简介

1.1 Vue概述

Vue，读音是/vju:/，是一套用于构建用户界面的渐进式框架，自底层向上应用，Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，可以做复杂的单页应用。简单的说，vue是一套前端的开发框架，vue是目前三大主流的框架之一，其他两个框架是:React、Angular。

Vue官网学习链接

1.2 Vue的安装与配置

见我这篇博客

二. 基本语法

2.1 绑定事件

见我这篇博客

2.2 Vue组件

组件是Vue可复用的Vue实例，相当于一组我们可以重复使用的模版，通常一个应用会以一棵嵌套的组件树的形式来组织。

在这里插入图片描述

有了组件化思想，我们可以在之后的开发中充分应用它。所以我们要尽可能将一个大的页面拆分为一个个小的，可复用的组件，这样可以让我们的代码更加方便的组织和管理，大大提高程序的可扩展性。

2.3 Vue组件使用

  <div id="root">
<!-- v-for标签用来便利数据，并通过v-bind与我们已经创建的模版绑定 -->
	 <jakiechai v-for="item in items" v-bind:item="item"></jakiechai>
  </div>
  <script type="text/javascript">
	Vue.config.productionTip = false;
	Vue.component("jakiechai",{   //创建一个组件
		props:["item"],      //用来接受参数
		template:"<li>{{item}}<li>" //创建模版语句
	})
	const vm=new Vue({  //创建Vue的实例
		el:"#root",
		data: {
			items:["java","python","机器学习","深度学习"]
		},
	})
  </script>

在这里插入图片描述
代码解释：

2.4 Axios异步通信

概念简介

在jquery中我们实现异步通信使用的工具就是常用的ajax，而Axios是一个开源的可以在浏览器端和NodeJs使用的异步通信框架，她的主要作用是实现Ajax异步通信，它的特性如下：

从浏览器中创建XMLHTTpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨语言请求伪造）

在使用之前我们需要知道vue的生命周期，Vue生命周期如下图：
在这里插入图片描述

Vue生命周期的八个阶段：
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
Vue创建前：在beforeCreated阶段，vue实例的挂载元素el还没有载入
Vue创建后： Vue在created阶段,vue实例的数据对象data有了,el还没有载入
Vue载入前：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
Vue载入后：在mounted阶段，vue实例挂载完，data.message成功渲染。
Vue更新前/后：当data变化时，会触发beforeUpdate和updated方法。
Vue销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
（每个阶段在上面都对应着一个钩子函数）

实例操作

创建json文件（data.json）

{
    "name":"陈奕迅",
    "englishname":"eason",
    "works": ["十年","好久不见","无条件","浮夸"]
}

在html中引入axios的包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

主题代码

  <div id="root" >
	<div>{{info.name}}</div>
	<div>{{info.englishname}}</div>
	<div>{{info.works}}</div>
  </div>
  <script type="text/javascript">
	Vue.config.productionTip = false;
	const vm=new Vue({  //创建Vue的实例
		el:"#root",
		mounted() {  //钩子函数
			axios.get("data.json").then(
				response=>{  //响应体
					console.log(this)
					this.info=response.data
				}
			)  //获取我们刚刚的data.json
		},
		data(){
			return{
				info:{
					name:null,
					englishname:null,
					works:null
				}		
			}
		}
	})
  </script>

在这里插入图片描述

代码解释

axios官网地址

2.5 Vue计算属性

计算属性可以理解为，在原来vue实例提供的data中的属性值的基础上，对这些属性进行加工和处理形成的新的属性就是计算属性

<div id="root" >
	<div>{{fullname}}</div>
  </div>
  <script type="text/javascript">
	Vue.config.productionTip = false;
	const vm=new Vue({  //创建Vue的实例
		el:"#root",
		data:{
			firstname:"jakie",
			lastname:"chai"
		},
		computed:{
			fullname:{  //计算属性fullname
				get(){
					return this.firstname+""+this.lastname  //计算属性fullname
				},
				set(value){

				}
			}
		}
	})
  </script>

在这里插入图片描述

代码解析

注意：这里又个问题就是Vue给我们提供了一个缓存机制，如果我们要在页面中多次引用fullname这个计算属性的时候，只会在初次调用的时候调用get方法，后面再要使用的时候就会从缓存中拿，当fullname发生更新时，会重新调用get方法将fullname重新拉入缓存

2.6 自定义事件插槽

插槽：我们可以简单的理解为就是插座的插口，插座给我们预留了各种各样的插口，当我们需要电源时直接将插头插入即可。而vue的插槽的原理就是给我们的组件预留恨过槽，当我们需要某个组件时直接将我们需要的组件嵌入到插槽中即可。

 <div id="root" >
	<myslot>
		<to-title slot="to-title" :title="mytitle"></to-title>  <!--:是v-bind的简写，都是用于绑定事件的-->
		<list slot="list" v-for="item in itemlsit" :item="item"></list>
	</myslot>
</div>
  </div>
  <script type="text/javascript">
	Vue.config.productionTip = false;
	Vue.component("myslot",{   //定义一个组件
		props:["title"],
		template:'<div>\
			<slot name="to-title"></slot>\
			<ul>\
				<slot name="list"></slot>\
			</ul>\
			</div>'
			//slot就是我们的插槽标签
	})
	Vue.component("to-title",{   //我们要装入插槽的第一个组件
		props:["title"],
		template:"<div>{{title}}</div>"
	})
	Vue.component("list",{   //我们要装入插槽的第二个组件
		props:["item"],
		template:"<li>{{item}}</li>"
	})
	const vm=new Vue({  //创建Vue的实例
		el:"#root",
		data:{
			itemlsit:['java','python','机器学习','深度学习'],
			mytitle:"学习目录"
		}
	})
  </script>

在这里插入图片描述
代码解析：

2.7 自定义事件内容分发

在前面自定义的插槽案例中我们已经实现了组件展示vue实例data中的数据，但如果我要在组件中删除vue实例data中的数据的时候我们该怎么做？在此我们要清楚一点，组合和vue实例本来是没有什么关系的，前面我们只是通过v-bind将vue实例中data中的数据属性绑定到了组件中的属性“props”，而现在我们要删除的话，唯一的办法就是将我们要删除的数据的有关的信息（可以在vue实例中通过这个信息是哪一条数据，例如我们可以通过下标索引来知道是数组中的哪个数据）传递给vue实例中的方法，然后在vue实例中的方法中实现数据的删除，这样就间接达到了组件删除数据的效果。

  <div id="root" >
	<myslot>
		<to-title slot="to-title" :title="mytitle"></to-title>  <!--:是v-bind的简写，都是用于绑定事件的-->
		<list slot="list" v-for="(item,index) in itemlsit" :item="item" v-bind:index="index" v-on:remove="removeitems(index)"></list>
	</myslot>
</div>
  </div>
  <script type="text/javascript">
	Vue.config.productionTip = false;
	Vue.component("myslot",{   //定义一个组件
		props:["title"],
		template:'<div>\
			<slot name="to-title"></slot>\
			<ul>\
				<slot name="list"></slot>\
			</ul>\
			</div>'
			//slot就是我们的插槽标签
	})
	Vue.component("to-title",{   //我们要装入插槽的第一个组件
		props:["title"],
		template:"<div>{{title}}</div>"
	})
	Vue.component("list",{   //我们要装入插槽的第二个组件
		props:["item","index"],
		template:"<li>{{index}}:{{item}} <button @click='remove'>删除</button></li>",
		methods:{
			remove(index){
				this.$emit('remove',index) //使用this.$emit('自定义数据名',参数)的作用就是触发自定义函数
			}
		}
	})
	const vm=new Vue({  //创建Vue的实例
		el:"#root",
		data:{
			itemlsit:['java','python','机器学习','深度学习'],
			mytitle:"学习目录",
		},
		methods: {
			removeitems(index){
				this.itemlsit.splice(index,1);      //splice()方法是javascript中修改数组的万能方法，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素,这里是删除指定下标index的元素
			}
		},
	})
  </script>

删除成功效果图：
在这里插入图片描述
代码讲解：

三. vue-cli开发

3.1 简介

其实在实际开发vue过程中我们不会去使用上面那种直接在html文件中写vue代码，而是使用vue-cli。vue-cli是官方提供的一个脚手架工具，用于快速生成一个vue的项目模版；它给了我们预先定义好的目录结构以及基础代码，就好比我们创建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，可以帮助我们快速开发。

3.2 Node.js部署

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。在使用vue-cli的时候需要先安装node.js环境
node.js官网下载地址
node .js中文文档

在这里插入图片描述
本机上查看node.js版本和npm的版本

node -v
npm -v

在这里插入图片描述
安装淘宝加速镜像

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述

进入node环境
在这里插入图片描述

安装vue-cli

sudo cnpm install vue-cli -g

在这里插入图片描述

3.3 第一个vue-cli程序

在终端下进入文件夹并搭建vue程序

sudo vue init webpack myvue #myvue是项目名

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具（由于使用的是ES6语法，而很多浏览器只兼容到ES5，而webpack可以将我们的vue程序打包，并降级给ES5浏览器使用）

在这里插入图片描述
2. 创建程序

目前myvue文件的目录结构

3. 进入myvue文件夹并安装项目的依赖环境

sudo cnpm install

在这里插入图片描述
4. 运行程序

sudo cnpm run dev

在这里插入图片描述
访问http://localhost:8080

3.4 Webpack学习

webpack是一个先打javascript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序所需的每个模块，然后将所有这些模块打包成一个或多个bundle。Webpack是当下最热们的前端资源模块化管理和打包工具，它可以轻松将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJs、AMD、ES6、Json、Coffeescript、LESS等。伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到wbeapp模式，它们运行在现代浏览器里，使用HTML、CSS3、ES6等新技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求；webapp通常是一个SPA（单页面应用），每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大的挑战。前端开发和其他开发工作的主要区别就是，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

安装Webpack

sudo cnpm install webpack -g
sudo cnpm install webpack-cli -g

在这里插入图片描述

测试Webpack是否安装成功

webpack -v

在这里插入图片描述
3. webpack项目实例

创建文件夹webpack_pro
创建一个modules的目录，用于放置JS模块等静态资源
在modules文件夹下面创建两个文件
hello.js

//暴露一个方法(意味着这个方法向外提供了借口，其他文件通过导入借口可以直接使用这个函数)，这个是ES6的语法
exports.sayHi=function(){
    document.write("<h1>我的Vue程序</h1>")
}

main.js

var hello=require("./hello") //获得前面暴露的接口
hello.sayHi();

在这里插入图片描述

创建webpack的核心配置文件webpack.config.js，内容如下

modules.exports={
    entry: './modules/main.js',  //入口文件，指定webpack项目用哪个文件作为项目的入口
    output: {  //输出，指定webpack把处理完成的文件夹放在指定的路径
        filename:'./js/bundle.js'  
    }
}

打包

webpack

在这里插入图片描述
此时目录下也出现了指定的输出文件

创建index.html页面，导入bundle.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack</title>
    </head>
    <body>
        <script src="dist/js/bundle.js"></script>
    </body>
</html>

在这里插入图片描述

上面介绍的丢失前端的模块化开发，实现我们的热部署

3.5 Vue-router

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让单构建页面应用变得易如反掌。（所谓单构建页面，就是只需要要单独的页面，然后页面所有的东西都通过Vue的组件来进行开发）

安装Vue-router

一定要进入当前项目目录（这里我用的vue项目是前面第一个myvue项目），然后再安装vue-router

sudo cnpm install vue-router@3.5.2

在这里插入图片描述

创建自己的组件

这里创建了两个组件分别时main 和content

<template>
    <h1>内容页</h1>
</template>
<script>
    export default{
        name:"Content"
    }
</script>
——————————————————————————————————————————
<template>
    <h1>主页</h1>
</template>
<script>
    export default{
        name:"main"
    }
</script>

在这里插入图片描述
3. 创建router文件夹，在index.js中进行路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'  //导入组件
import main from '../components/main'

//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
    routes: [{  //路由路径
            path: '/Content',
            name:'Conten组件',
            //跳转的组件
            component:Content
    },
    {  //路由路径
        path: '/main',
        name:'主页组件',
        //跳转的组件
        component: main
}
]
})

在这里插入图片描述
4. 配置主组件App.vue

<template>
  <div id="app">
     <router-link to="/main">首页</router-link>
     <router-link to="/Content">内容页</router-link>
     <router-view></router-view>
  </div> <!--这里就是vue实例绑定的容器-->
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述
5. 配置核心配置main.js

6. 运行vue程序并在指定的端口打开

npm run dev

在这里插入图片描述

3.6 Vue+ElementUI开发

ElementUI官网

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，提供了丰富的 PC 端组件，简化了常用组件的封装，大大降低了开发难度。（类似于BootStrap）

创建工程

sudo vue init webpack ElementUi_vue

在这里插入图片描述
2. 安装vue-router

sudo cnpm install vue-router@3.5.2

在这里插入图片描述
3. 安装Element—UI

sudo cnpm i element-ui -s

在这里插入图片描述
4. 安装项目依赖

sudo cnpm install

在这里插入图片描述
5. 安装SASS加速器

sudo cnpm install sass-loader node-sass --save-dev

启动测试

sudo cnpm run dev

在这里插入图片描述

vue+elementUi实例操作

创建组件Header.vue

<template>
    <el-row>
      <el-col :span="24">
        <div class="head-wrap">Hello Wold</div>
      </el-col>
    </el-row>
  </template>
  <style scoped>
    .head-wrap{
  
    }
  </style>
</script>

修改App.vue

<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <Header></Header>
      </el-header>

      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '@/components/Header'
export default {
  name: 'app',
  components: {
    'Header': Header
  }
}
</script>

<style>
  .header {
    background-color: #409EFF;
    color: #fff;
    line-height: 60px;
  }
</style>

修改main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/index.js'

import App from './App'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

运行结果

jakiechaipush

关注

2
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
后端所需Vue知识快速学习

Vue，读音是/vju:/，是一套用于构建用户界面的渐进式框架，自底层向上应用，Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，可以做复杂的单页应用。简单的说，vue是一套前端的开发框架，vue是目前三大主流的框架之一，其他两个框架是:React、Angular。Vue官网学习链接插槽：我们可以简单的理解为就是插座的插口，插座给我们预留了各种各样的插口，当我们需要电源时直接将插头插入即可。
复制链接

扫一扫