毕业设计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>