Vue的快速入门通俗易懂(学习笔记)

吉屋安

已于 2022-05-22 14:35:37 修改

阅读量1.6k

点赞数 4

分类专栏：笔记文章标签： vue.js 学习 javascript

于 2022-05-22 14:33:04 首次发布

本文链接：https://blog.csdn.net/qq_52774158/article/details/124910282

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文是观看“【狂神说Java】Vue最新快速上手教程通俗易懂 ”所记录的笔记，读者结合视频阅读更佳，文章包含了个人对相关知识点的粗略理解，借此进行分享，文中代码结构理解有误的地方，还请大家指出。本文章将不断更新，直至视频学完

一、Vue的基本语法

1.判断语句（if）

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

2.循环语句（for）

<div v-for="((item,index) in item) ">
{{item}}--{{index}}
</div>

二、Vue的绑定事件

Vue使用v-on进行事件的绑定，注意：方法只能写在methods中。然后结构：v-on:什么事件=“方法名”

三、Vue的双向绑定

使用v-model方法进行绑定data中的值，当界面中的值改变时，随之也改变底下的值

<div id="app"> 
    <select v-model="message">
    <options>A</options>
    <options>B</options>
    </select>
    {{message}}//当选择的值随之改变的时候，这里也会显示相应的值，简称双向绑定。
</div>
---数据绑定部分---
var vm = new Vue({
	el:"app"
	data:{
		message:""
	}
})

四、Vue的组件讲解

<div id="app"> 
    <biaoqian v-for="value in message" v-bind:mess="value"></biaoqian>
</div>
---数据绑定部分---
Vue.component(biaoqian,{ //此处的biaoqian是名称用来在div中引用
	props：['mess'],
	template:<li>{{mess}}</li>
})
var vm = new Vue({
	el:"app"
	data:{
		message:["1","2","3"]
	}
})

首先通过for循环将data中的值拿出来给value，然后再通过绑定将value的值给mess，组件通过props获取mess然后在template中引用。

五、Vue的Axios异步通信

什么是Axios
Axios是一个开源的可以用在浏览器端和Node]s的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：
从浏览器中创建XMLHttpRequests
从node,js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

为什么使用Axios
由于Vue.js是一个视图层框架并且作者（尤雨溪）严格准守SoC(关注度分离原则)，所以vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery,因为它操作Dom太频繁！

下面展示使用Axios在json文件中获取数据

<div id="app"> 
    <div> {{info.name}}</div>
    <div> {{info.address.street}}</div>
</div>
---数据绑定部分---
var vm = new Vue({
	el:"app"
	data(){
		return{//请求的返回参数合适，必须和json字符串一样
		info:{
			name:nu11,
			address:{
				street:null,
				city:null,
				country:null}
			}
		}
	},
	mounted(){
	axios.get('../data.json').then(response=>(this.info=response.data));	
	}
});

使用mounted钩子函数将data.josn中的数据拿过来。get里面写出json文件的位置，然后将response到的数据给data函数中的info，这里需要注意的是请求的返回参数合适，必须和json字符串一样。然后在div界面用info引用就可以显示json的数据了。

{
"name":"狂神说Java",
"ur1":"https://blog.kuangstudy.com",
"page":1,
"isNonProfit":true,
"address":{
	"street":"含光门"，
	"city":"陕西西安"，
	"country":"中国"
	}
"links":[
    {
	"name":"bilibili",
	"url":"https://space.bilibili.com/95256449"
	},
	{
	"name":"狂伸说java",
	"ur1":"https://blog.kuangstudy.com"
    }]
}

六、Vue的计算属性

什么是计算属性
计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！当一个页面方法调用多了之后容易出现卡顿，此时就可以使用计算属性，即computed定义函数，使其从内存中调用。

总结
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

七、Vue的插槽slot

插槽是什么？
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。以下举例子帮助理解。

<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items"v-for="item in todoItems":item="item"></todo-items>
</todo>
</div>
---組件部分---
Vue.component("todo",{
	template:'<div>\
		<slot name="todo-title"></slot>
			<u1>
		<slot name="todo-items"></slot>
			</u1>
			   </div>'
});

Vue.component("todo-title",{
	props:['title'],
	template:'<div>{{title]]</div>'
}
);
Vue.component("todo-items",{
	props:['item'],
	template:'<li>{item}}</li>'
});
---数据绑定部分---
var vm = new Vue({
	el:"#app",
	data:{
		title:"秦老师系列课程"，
	todoItems:['狂神说Java','狂神说前端'，'狂神说Lnux']
}
})

首先有三个组件，todo容器组件、todo-title组件、todo-list组件，用这三个组件实现插槽的例子，todo组件先构造出所要的大概结构，标签之间用/换行，所需要留出来的“坑”的地方用<slot></slot>占位，定定义name的属，方便后面插槽的使用，然后开始定义todo-title组件以及todo-list组件。props用于接收绑定来的值。template则是组件样式的结构。

基础的代码结构清晰后，就开始在div中绑定组件以及相应的数据，用slot属性指向todo组件中的slot标签的name，从而对应的将todo-title与todo-list组件插入tido组件相应的位置。然后在对应的组件中绑定data中对应的值，绑定之后组件中的props接收到值后传递给template中。然后对应的将值显示在插槽位置处。

八、Vue的自定义事件的分发

组件内也可以使用方法method来声明方法，然后再组件中通过v-bind进行绑定，但只能操作到本组件内的方法，无法操作Vue实例部分的方法。此时就产生了问题，如何能让组件中的按钮通过点击来操作到Vue实例中的方法。

<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items"v-for="(item,index )in todoItems":item="item" v-bind:index="index"
            v-on：remove=“removeitems”></todo-items>
</todo>
</div>
---組件部分---
Vue.component("todo",{
	template:'<div>\
		<slot name="todo-title"></slot>
			<u1>
		<slot name="todo-items"></slot>
			</u1>
			   </div>'
});

Vue.component("todo-title",{
	props:['title'],
	template:'<div>{{title]]</div>'
}
);
Vue.component("todo-items",{
	props:['item','index'],
	template:'<li>{item}}<button v-on：click = “remove”>删除</button></li>'
	methods:{
	remove:function(index){
	this.$emit('remove'，index)
}
}
});
---数据绑定部分---
var vm = new Vue({
	el:"#app",
	data:{
		title:"秦老师系列课程"，
	todoItems:['狂神说Java','狂神说前端'，'狂神说Lnux']
}
	methods:{
	removeitems:function(index){
	this.todoItems.splice(index,2);
}
}
})

首先，前端、Vue实例和组件这三样东西，我们要的是组件中的方法来控制Vue实例的方法，就需要前端（下面统一将div处代码成为前端）的代码作为媒介。
第一步，我们先将前端代码处和Vue实例中的方法绑定起来，通过前面的学习，我们知道前端与Vue实例部分方法进行绑定使用v-on 绑定Vue实例部分的删除函数removeitems，此时就需要自定义一个删除事件，类似于之前学的click，但此处的自定义的事件名是自己命名的，即v-on：remove=“removeitems”。此时前端与Vue实例方法就绑定成功了。
第二步，将前端与组件进行绑定，同样组件需要获得被删除元素的下标，即index。则通过v-for遍历出来。然后通过v-bind绑定index将其传递给组件todo-items。
第三步，此时已经完成了方法的绑定与参数的传递，Vue为我们提供了使用this.$emit(自定义事件名’，参数)来通过组件中的方法来调用Vue实例中的方法。remove即为实例中的方法，index则为参数，如果不讲参数传递过来的话，就会标识参数未定义，很好理解。
总的流程非常的绕。我理解为组件中的方法要想连接到实例中的方法，就需要通过emit，而emit需要事件名和参数，则通过前端这个媒介传递给组件。

九、Vue的webpack

简单来说，就是把vue的代码从es6打包成es5给浏览器运行。

十、Vue的路由

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的涟接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

安装Vue-router
安装完成后在main.js文件中导入，然后在引用一下就可以实用了。

import VueRouter from 'vue-router'
Vue.use(VueRouter)

组件介绍
首先两个页面，分别是App页面和content页面，在content页面中将组件通过export引出去，然后在App页面中通过import将content组件给引入进来。

<template>

</template>
//template  是页面编辑的地方
<script>
export default {
  name: 'content'
}
// 一般组件导出就是在这里，然后在其他页面中import组件
</script>
 //scoped意义是指当前的渲染只在本页面生效。
<style scoped>
 

</style>

实现路由跳转

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: 'content',
      // 跳转的组件
      component: content
    },
    {
      // 路由的路径
      path: '/main',
      // 路由的名字
      name: 'main',
      // 跳转的组件
      component: main
    }
  ]
})

main.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

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

main.vue文件

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: 'main'
}
</script>

<style scoped>

</style>

App.vue文件

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页面</router-link>
    <router-view></router-view>
  </div>
</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>

content.vue文件

<template>
<h1>内容页</h1>
</template>

<script>
export default {
  name: 'content'
}
</script>

<style scoped>

</style>

vue-router实现跳转的思路，准备好三个页面App、content、main三个Vue界面。main.js文件用来配置，类似于Java中的程序入口。然后配置一个index.js文件，专门拿来放页面的路由。
首先在组件的template标签中写入内容，然后在index.js中配置两个组件的路由，在vue-router中import出路由，然后new出实例。在实例中进行相关的配置，index.js页面配置好后，在main.js中注册一下index.js路由，main.js将会自动扫描文件中的所有路由，最后再在App组件中用（类似于HTML中的）标签和(组件显示内)标签。然后就可以使用路由跳转了。

十一、Vue的element-UI

安装element-ui
npm i element-ui -S

Elemennt-UI文档
https://element.eleme.cn/#/zh-CN

main.js文件配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(router)
Vue.use(Element)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h =>h(App),
  components: { App },
  template: '<App/>'
})

Element-ui使用非常简单，将官方文档上的代码复制下来，然后通过文章上节的vue-router引入使用就可以了，最主要的还是main.js文件中element-ui的引入与使用，类似于router一样。

十二、Vue的路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，UL中各段动态路径也按某种结构对应嵌套的各层组件。
路由的嵌套和HTML的iframe意义一样，App引入了路由，但引入的路由里卖弄还要引入路由，就需要在index.js要嵌套路由的选项中加入children:[{路径以及组件名字}]

十三、Vue的参数传递及重定向

三个要素实现参数的传递，在要传递参数的<router-link v-bind：to="{name:'路由组件的名字'，params:{id:1}}">添加要传递的值，然后再在index.js中路由地址中绑定一下id的值，即地址/：id即可将链接中的值绑定起来，在写出组件的name 与前面的name 绑定一下，通过路由传递，再在需要展示值的界面通过{{$route.params.id}}将值展示出来。
还有一个方法即通过pros传递，即<router-link v-bind：to="{name:'路由组件的名字'，params:{id:1},props:true}">,然后在显示参数的页面中的export 中通过props：[:id]接收，然后在div中通过{{id}}显示数据。
重定向即在index.js中加一个path和redirect路由，然后页面中router-link一下就可以了。
选项中加入children:[{路径以及组件名字}]