目录 一、Vue的基本语法二、Vue的绑定事件三、Vue的双向绑定四、Vue的组件讲解五、Vue的Axios异步通信六、Vue的计算属性七、Vue的插槽slot八、Vue的自定义事件的分发九、Vue的webpack十、Vue的路由十一、Vue的element-UI十二、Vue的路由嵌套十三、Vue的参数传递及重定向 一、Vue的基本语法本文是观看“【狂神说Java】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>Aoptions>
<options>Boptions>
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
插槽是什么？
插槽就是子组件中的提供给父组件使用的一个占位符，用
<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组件先构造出所要的大概结构，标签之间用/换行，所需要留出来的“坑”的地方用
基础的代码结构清晰后，就开始在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: ''
})
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: ''
})
Element-ui使用非常简单，将官方文档上的代码复制下来，然后通过文章上节的vue-router引入使用就可以了，最主要的还是main.js文件中element-ui的引入与使用，类似于router一样。
十二、Vue的路由嵌套
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，UL中各段动态路径也按某种结构对应嵌套的各层组件。
路由的嵌套和HTML的iframe意义一样，App引入了路由，但引入的路由里卖弄还要引入路由，就需要在index.js要嵌套路由的选项中加入children:[{路径以及组件名字}]
十三、Vue的参数传递及重定向
三个要素实现参数的传递，在要传递参数的地址/：id即可将链接中的值绑定起来，在写出组件的name 与前面的name 绑定一下，通过路由传递，再在需要展示值的界面通过{{$route.params.id}}将值展示出来。
还有一个方法即通过pros传递，即
重定向即在index.js中加一个path和redirect路由，然后页面中router-link一下就可以了。
选项中加入children:[{路径以及组件名字}]
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）