毕业设计03——前端vue知识总结

参考尚硅谷的教程，从 码云 上下载前端vue模板。

bilibili尚硅谷视频
Vue.js中文官网

通过命令下载前端vue代码

git clone https://gitee.com/renrenio/renren-fast-vue.git

数据绑定

vue对象格式

// 创建一个Vue对象，传入一个json对象
new Vue({
     
	el: "#id",
	data: {
     
		data01: 'abc'
	},
	methods: {
     
		
	},
	computed: {
      // 计算属性
		data01: {
     
			get(){
     }, // 为当前属性赋值，需要读取当前属性时回调
			set(value){
     } // 监视当前属性的值，当前属性值发生修改时回调
		},
		data02 () {
     } // 这个相当于get(){}，计算属性
	}
})

常用属性

输入框与data双向绑定

v-model

条件渲染

实现对标签的 显示 和 隐藏
v-if
v-else
上：直接移除；下：样式隐藏
v-show

循环遍历

v-for
数组的 变异方法，会触发视图的更新
如数组的splice方法，可以实现增、删、改操作，同时会触发视图的更新

搜索、排序

根据 输入框的输入 和 原数组 来获取到展示的数组

事件处理

1、绑定监听

@事件名=方法($event)

2、事件修饰符

事件存在冒泡（向底层传递）现象，阻止这种传递
@事件名.stop=方法

阻止事件的默认行为
@事件名.prevent=方法

3、按键修饰符

@keyup.13=方法
@keyup.enter=方法

表单数据自动收集

表单类型：
text
radio
checkbox
select - option
textArea

原理：通过v-model双向绑定

Vue的生命周期

三个大阶段：
1、初始化显示
2、更新显示
3、死亡

每个阶段，都有一些生命周期方法，这些方法会在适合的时机被调用，如初始化前后，销毁前后等等。

1、初始化更新（一次）
beforeCreate()
created()
beforeMount()
mounted() 初始化显示之后立即调用

2、更新显示（多次）
beforeUpdate()
updated()

3、死亡（一次）
beforeDestory() 销毁vue对象前调用
destoryed()

// 声明周期方法 使用实例
new Vue(){
     
	el: "#id",
	mounted() {
     }, // 声明周期方法
	beforeDestory(){
     } // 声明周期方法
}

过渡、动画

对于某一个元素，在 显示、隐藏 时的效果【显示：enter；隐藏：leave】

原理：
1、操作 css 的 transition、animation
在需要显示、隐藏的标签外部 套上个 transition 标签，并添加对应的css样式实现

过滤器

对数据进行 格式化 的技术

根据 输入、过滤器 来获取过滤器处理过后的数据

<p>{
    {date | filterName()}}p>

// 定义过滤器
Vue.filter('filterName', function(value){
     })

唯一标识ref

为某个元素 指定一个唯一标识，通过vue对象的$refs属性访问这个对象

<TodoHeader ref="header" >TodoHeader>
<script>
	this.$refs.header // 这就找到 被标识的对象 了
script>

防止闪现

通过 v-cloak，配合 [v-cloak] 属性选择器，设置其样式为 display:none 。

自定义指令

1、全局指令

定义在vue对象外部

// el：使用指令的元素标签
// binding：一个对象，包含指令相关信息：指令名、指令绑定的属性 和 值
Vue.directive('指令名', function(el, binding){
     
	el.textContent = binding.value.toUpperCase()
})

2、局部指令

定义在vue对象内部
那么只有该Vue对象管理的标签才能够使用该指令

new Vue({
     
	el: "#id",
	data: {
     
		data01: "aaa"
	},
	directives: {
     
		'指令名': function(el, binding){
     
			
		}
	}
})

使用

<p v-upper-text="data01">p>

插件

1、定义插件

2、声明使用插件

---

Vue组件化编码

vue-cli 是 vue 官方提供的脚手架工具

模板

npm install -g vue-cli
vue init webpack vue_demo // 选择我自己处理依赖
cd vue_demo
npm install
npm run dev 或 npm start
访问：http://localhost:8080/

基于vue-cli脚手架编写项目

项目结构

build
config
	index.js
node_modules
src
	assets
	components // 存放 其他组件 的目录
	App.vue // 根组件
	main.js // 入口文件
static
.babelrc
.eslintignore
.eslintrc.js
index.html
package.json

组件：
局部功能界面，以及相关的资源

编写代码

src目录下

<template>
	<div>div>
template>

<script>
	export default {
      
		
	}
script>

<style>
style>

在 components 目录下的一个组件 HelloWorld.vue

<template>
	<div class="msg">{
    {msg}}div>
template>

<script>
	export default {
       // 配置对象（与Vue一样）
		data() {
       // 必须写函数
			return {
      
				msg: "hello world";
			}
		}
	}
script>

<style>
	.msg{
      }
style>

App.vue根组件

<template>
	<div>
		
		<HelloWorld/>
	div>
template>

<script>
	// 1、引入组件
	import HelloWorld from './components/HelloWorld.vue'
	export default {
      
		// 2、映射组件标签
		components: {
      
			HelloWorld
		}
	}
script>

<style>
style>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
     
	el: '#app',
	components: {
     
		App
	},
	templates: ''
})

项目打包、发布

打包：
npm run build

发布：
npm install -g server
serve dist
访问：http://localhost:5000

发布到tomcat上
1、修改配置：webpack.prod.conf.js
output:{
publicPath:’/xxx/’ // 添加 打包文件夹的名称（项目名称）
}
2、重新打包：npm run build
3、拷贝xxx到tomcat的webaaps目录下
4、访问：http://localhost:8080/xxx

eslint

代码规范的检查工具

在 eslintrc.js 中，关闭相关规范的提示 或 进行其他的配置
在 .eslintignore 中，设置忽略检查的文件

修改上述文件，需要重新启动项目：npm run dev

---

组件化编码

1、组件拆分
2、静态组件
3、动态组件
1）动态显示初始化数据：准备数据以显示
2）交互显示数据：对数据进行操作

组件间通信

方式1：props【父 >> 子】

通过标签属性，将数据发送给某个组件

<HelloWorld :comment="comment" />

组件接收属性

export default {
     
	// 这个属性接收其他组件传来的数据，并成为当前组件的属性
	// 以下展示了 三种 接收方式
	props: ['comment', 'addComment'],
	props: {
     
		commnet: Object,
		addComment: Function
	},
	props: {
     
		addComment: {
     
		}
	}
}

通过组件间的通信：父组件可以将自己的 属性、方法 发送给子组件，子组件可以接收并使用这些属性、方法，并且可以进一步发送给自己的子组件。

一些规范：
数据存放在哪里呢？看是某个组件需要 还是 某些组件需要。

哪个组件中存放数据，那么对这些数据的修改（方法）也应该编写在该组件中，如果有子组件要用到这些方法，可以通过 组件间通信 发送给子组件。【数据所在组件 定义方法，其他组件可以 调用方法】

计算属性computed：难就难在你想不到用计算属性

方式2：vue自定义事件

可以实现 子组件 向 父组件 传递数据
可以实现 父组件 向 子组件 传递方法（其实也不是传递，是 子组件 通过触发事件得以调用 父组件 中的方法）

每个Vue实例都实现了 事件接口，即：
使用 $on(eventName) 绑定监听事件【谁调用该方法，就是给谁绑定的监听】
使用 $emit(eventName, data) 触发事件

干两件事：

1、绑定事件监听【父组件】

1）在父组件中，为其中的子组件标签添加 对 clickItem 事件的监听

<mlItem @clickItem="handlerClickItem">mlItem>

2）编写事件触发后，需要执行的回调方法，获取到子组件传递来的数据 并 保存

handlerClickItem( data ){
     
	console.log("list组件监听到item组件：", data )
	this.data = data
}

2、触发事件【子组件】

1）子组件中产生一个事件，如click事件

<div @click="handlerClick" >div>

2）在该click事件的处理函数，仅会接收到一个参数，即当前事件对象

handlerClickUser( event ){
     
    console.log("我被点击了", event );
    // 向 父组件 提醒 被点击事件
    var {
     data1, data2} = this.data
    this.$emit('clickItem', {
     data1, data2})
}

3）在该处理函数内部，我们通过$emit(eventName, data)向父组件发送一个事件，这里的事件名clickItem 就是父组件监听的事件，并且可以携带一些需要传递给父组件的数据

this.$emit('clickItem', {
     data1, data2})

方式3：消息发布与订阅（PubSubJS库）

消息订阅 — 绑定事件监听
消息发布 — 触发事件

好处：两个组件之间，可以没有任何关系

步骤：
1、下载 pubsub-js 库
npm install --save pubsub-js

2、引入 pubsub-js 库
import PubSub from ‘pubsub-js’

3、消息订阅

mounted(){
     
	// msg：xxx的名字；data：传递过来的数据
	PubSub.subscribe('xxx', function(msg, data){
     
		
	})
}

4、消息发布

PubSub.publish('xxx', data)

方式4：slot

用于 父组件 向 子组件 传递 标签数据

子组件 放置slot【通过slot标签】

<slot name="slot1">slot>
<slot name="slot2">slot>

父组件 传递 标签数据 填充 子组件的slot【通过slot属性】

<input slot="slot1">input>
<span slot="slot2">span>

---

几个实例

1、评论发布

2、任务清单

四个鼠标事件：

onmouseenter：鼠标进入组件范围内
onmouseleave：鼠标离开组件范围内
onmouseover：鼠标进入组件范围 并 直接指在当前组件上
onmouseout：鼠标未进入组件范围 或 鼠标在当前组件的子组件上（即鼠标移到了当前组件内部的一个组件上，而不是直接在当前组件上）

所以我们常用前两种鼠标事件（嗯，确信）

缓存数据

LocalStorage，以文件（文本）、key-value 的形式进行存储

问：
1、存的是什么数据？任务清单的数组
2、什么时候存？数组中的数据发生修改时，就要存【深度监视】
3、什么时候读？打开

针对当前案例，我们要存储的是一个数组，在文件中，作为某个key的value进行存储，当我们读取时，读到的是 一个json字符串 或 null，我们需要将其转换成 一个数组。当我们保存时，将数组转成json字符串。
同时，我们需要对该数组进行【深度监视】，即数组内部元素的数据修改，我们也能够监视得到。

export default {
     
	data () {
     
		return {
     
			// 从 localStorage 中获取数组
			todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
		}
	},
	watch: {
      // 监视
		todos: {
     
			deep: true, // 深度监视
			handler: function(newValue){
     
				// 将 todos 最新的 json 数据，保存到 localStorage 中
				window.localStorage.setItem('todos_key',JSON.stringify(value))
			}
		}
	}
}

将缓存功能（存储、读取）封装成一个模块
问：这个模块可以向外暴露 对象 或 方法？那到底是暴露什么呢？
答：一个方法对应一个功能，一个对象对应多个功能。看你需要暴露的功能是几个。

3、ajax搜索

---

Vue-ajax

常用的2个ajax库
1、vue-resource
2、axios

vue-resource

vue插件，非官方库，vue1.x使用广泛

下载
npm install vue-resource --save

使用
1、引入并声明使用插件
这是一个插件，需要引入、声明使用

// 在main.js中
// 引入插件
import VueResource from 'vue-resource'
// 声明使用插件，内部会给vm对象和组件添加一个属性：$http（含get、post方法）
Vue.use(VueResource)

2、发送ajax请求

mounted(){
     
	const url = ''
	this.$http.get(url).then(
		response => {
      // 成功
			const result = response.data
		},
		reponse => {
      alert('请求失败') }
	)
}

axios

通用的ajax请求库，官方推荐，vue2.x使用广泛

下载

npm install axios --save

使用

1、引入
在App.vue中引入
import axios from ‘axios’

2、使用

mounted(){
     
	axios.get(url).then(
		response => {
     } // 成功
	).catch(
		error => {
     } // 失败
	)
}

---

vue UI组件库

常用两种
1、Mint UI：基于vue的 移动端 UI组件库
2、Element：基于vue的 PC端 UI组件库

vue-router

路由：
是一个映射关系：key - value
key：path
value：前：组件；后：处理请求的回调函数

点击 路由连接 ，通过路由器中配置的所有路由，找到 当前组件

下载

npm install vue-router --save 

基本路由

1、创建路由组件

学习了路由之后，就有了个新的概念叫 路由组件，我们把这些组件放到一个新的目录下，通常叫做：views/pages，而对于之前的组件，叫 非路由组件，还是放到 component 目录下

路由模块 的格式和 普通模块 相同

2、创建路由器模块

创建 router 目录，在目录下创建 index.js 文件，这是一个路由器模块

// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入 路由组件
import About from '../views/About.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

// 向外暴露 一个路由器
export default new VueRouter({
     
	// 路由器 包含 多个路由
	routes: [
		{
     
			path: '/about',
			component: About
		},
		{
     
			path: '/home',
			component: Home
		},
		{
     
			path: '/',
			redirect: '/about'
		}
	]
})

3、mian.js 中引入路由器模块

import router from './router'

new Vue({
     
	router
})

4、编写界面：路由连接、路由界面

路由连接

<router-link to="/about">Aboutrouter-link>
<router-link to="/home">Homerouter-link>

路由界面

<router-view>router-view>

嵌套路由

路由组件 中又包含 路由连接和路由组件

// 向外暴露 一个路由器
export default new VueRouter({
     
	// 路由器 包含 多个路由
	routes: [
		{
     
			path: '/home',
			component: Home,
			children: [ // 嵌套路由
				{
     
					path: '/home/news',
					component: News
				},
				{
     
					path: 'message',
					component: Message
				},
				{
     
					path: '',
					redirect: '/home/news'
				}
			]
		}
	]
})

缓存路由组件

默认情况下，被切换的路由组件对象会死亡释放，再次回来时，是重新创建的

<keep-alive>
	<router-view>router-view>
keep-alive>

向路由组件传数据

export default new VueRouter({
     
	// 路由器 包含 多个路由
	routes: [
		{
     
			path: '/home',
			component: Home,
			children: [ // 嵌套路由
				{
     
					path: 'message',
					component: Message,
					children: [
						{
     
							// :id 表示占位
							path: '/home/message/detail/:id',
							component: MessageDetail
						}
					]
				}
			]
		}
	]
})

通过 中的 to 属性 传递值

<router-link :to="`/home/message/detail/${message.id}`">{
    {message.title}}router-link>

在 子路由组件 中，有一个 $route 对象，包含着路径、params参数、query参数等信息【在params参数中包含上面的 ${message.id 的值】

另，通过 的属性 传递值

<router-view msg="xxx">router-view>

在 子路由组件 中就可以 通过 props 来 接收数据 并 使用。

export default {
     
	props: {
     
		msg: String // 接收 值
	}
}

页面跳转

window.location='url'