Vue基础整理1

MVC、MVVM关系图解

1. mvc（后端思想）

2. mvvm（前端思想）

简单指令

1.v-cloak

<div v-cloak>{ { msg }}</div>
解决插值表达式的闪烁问题(页面刷新加载时出现的{ {}})
$注：配合样式[v-cloak]dislpay:none$
**

• 不解析标签
• 只替换占位符，不覆盖原本内容

2. v-text

<div v-text = "msg"></div>

• 默认没有闪烁问题
• 覆盖元素中的内容
• 不解析标签

3.v-html

<div v-html= "msg"></div>

• 覆盖元素中内容
• 会解析标签

4.v-bind:（简写为‘:’）

<input type='button' v-bind:title='mytitle'></div>
绑定属性,数据单向绑定
不加v-bind时，则认为’mytitle’为字符串，加上后则为变量或者合法js表达式

5.v-on:（简写‘@’）

绑定事件

• 点击：v-on:click = ‘方法名’ -------@click
• 悬浮：v-on:mouseover = ‘方法名’ -------@mouseover
• 离开：v-on:mouseout = ‘方法名’ -------@mouseout
• 移动端 touchstart、touchend、touchmove…

6.事件修饰符

写在绑定事件名后：如 @click.stop

• .stop：阻止冒泡
• .prevent：阻止默认行为
• .capture：改为事件捕获
• .self：事件在该元素本身触发时 触发回调
• .once：只触发一次

7.数据双向绑定指令 v-model

<input type ='text' v-module = '属性名'>
$注：仅适用于表单元素$

8.v-for循环遍历

<p v-for = '(值, 索引) in 数组名/对象名' :key=''></p>

• key的值只能为 srting 或者 number类型
• 使用绑定属性的形式指定key的值

9.v-if、v-show

<p v-if = '条件'></p>
<p v-show = '条件'></p>

• v-if 删除或创建元素
• 有较高切换性能消耗，若元素需频繁切换，不适用v-if
• v-show 隐藏或显示元素，等同切换 display值 => ‘none’
• 有较高初始渲染消耗，若元素并不需要显示，不适用v-show

过滤器

用作常见的文本格式化，可使用在：mustache插值 和 v-bind表达式；
{ { msg | 过滤器名称(传参)}} ===> 先通过过滤器对数据进行处理后，在返回给name显示；
‘|’ => 管道符；
过滤器调用 采用就近原则，当全局过滤器与私有过滤器重名，则优先采用私有过滤器；

1.全局过滤器

所有的vm实例都共享
定义：Vue.filter(‘过滤器名称’, function(msg,arg){ //数据处理 })
定义位置：在vm实例外面定义
参数：

• msg：管道符前面的数据
• arg：接收的参数

2.私有过滤器(局部)

定义位置：vm内部，filters: {}，与methods同级
定义：filters:{ 过滤器名称(管道符前数据，接受的参数) {}}
《=========》
(小知识)：string.padStart(2, ‘0’) 用来给个位数补零

自定义指令

自定义指令名以 ‘v-’ 开头

1.全局

定义：Vue.directive(‘自定义指令吗’, {})
参数1：指令名称 定义时，自定义指令名不加 ‘v-’ 前缀，调用时需加上
参数2：对象，对象中有一些指令相关函数，在特定阶段执行相应操作
例：焦点事件
<input type='text' v-focus>

Vue.directive('focus', {
每个函数第一个参数为 el，表示被绑定指令的元素，此时可使用原生的方法
	bind:function(el){ //指令绑定到元素上时执行，仅一次
		el.focus() //元素还未插入到DOM 中,不生效
		//多为与样式相关的操作
	}
	inserted:function(el){ //元素插入到 DOM 中的时候执行，仅一次
		el.focus() //元素已经插入到DOM 中，生效
		//多为与js相关的操作
	}
	updated:function(){ //VNode 更新时执行,可能触发多次

	}
})

函数相关参数

2.私有

定义位置：在vm实例内定义，与 methods 同级
定义：directives: {'自定义指令名': {相关函数}}
函数简写(全局/私有)：

实例生命周期

生命周期函数与 methods 同级

**html:**
<div id='app'>
	<input type='button' value='改变msg' @click="msg='No'">
	<p id='p'>{
    
    { msg }}</p>
</div>
**js:**
var vm = new Vue({
	el: '#app',
	data: {
		msg: 'ok'
	},
	methods: {
		show() { console.log('执行了show方法') }
	},
})

***创建期间的生命周期函数***
beforCreate(){ //实例被完全创建之前执行
	//在这个生命周期内，data 和 methods 中的数据未初始化
	console.log(this.msg); //undefined
	this.show()  //报错，this.show() is not a function
}

created() {
	//在这个生命周期内，data 和 methods 中的数据初始化完成
	//可调用 methods 中的方法和操作 data 中的数据
	console.log(msg) //ok
	this.show() //执行了show方法
}

beforeMount() { //模板在内存中编译完成，还未渲染到页面中
	//在这个生命周期内，页面中的元素未被替换，还是原来写好的模板字符串
	console.log(document.getElementById('p').innerHtml) //{
    
    { msg }}
}

mounted() { 实例创建期间的最后一个生命周期函数
	//将编译好的内存中的模板挂在到页面中
	console.log(document.getElementById('p').innerHtml) //ok
}

***组件运行阶段的生命周期函数***
beforeUpdate() {  //界面还未被更新，但数据已被更新
	//组件/数据被改变时触发
	//例：当点击input按钮时：
	console.log(document.getElementById('p').innerHtml) // ok ===>页面未更新
	console.log(this.msg) // No ===>数据已经改变
}
undaated(){ //页面与数据都已更新
	//组件/数据被改变时触发
	//例：当点击input按钮时：
	console.log(document.getElementById('p').innerHtml) // No ===>页面已更新
	console.log(this.msg) // No ===>数据已经改变
}

***组件销毁阶段的生命周期函数***
beforeDestroy() {
	//还未执行销毁过程
}
destroyed() {
	//组件被完全销毁，此时组件中所有的数据、方法、指令、过滤器等 都不可用
}

动画

将需要动画的元素使用 标签包裹
样式：
v-enter, v-leave-to {} ——>进入和离开
v-enter-active, v-leave-active {} ——>中间过程动画

点击查看：vue动画详细介绍

组件

定义：拆分vue实例的代码量，不同组件划分不同功能模块，需要时调用

1.全局创建

<div id='app'>
	<my-com1></my-com1>//引用组件
</div>
<template id='tmp1'>
	<div> //根元素
		<p>创建的组件</p>
	</div>
</template>

****Vue.component('组件名称', { //创建的组件模板对象 })****
Vue.component('myCom1', {
	template: '#tmp1'
}) 
注：
	1.若组件名称使用驼峰命名时，调用时用小写，并且单词之间‘-’连接，若未使用驼峰命名，则直接引用组件名；
	2.常见的模板对象必须有一个根元素包裹

2.局部创建(私有)

实例内部，与methods同级

components: { //定义实例内部私有组件
	组件名: {
		template: ''
	}
}

3.组件中 data、methods

Vue.compontent('com1', {
	template: '',
	data: function() {
		return {}
		//组件中的 data 为一个函数，且必须 return 一个对象
	},
	methods: {}
})

4.组件切换

<component :is="'组件名'"></component>

5.组件传值

1.父传子

<div id='#app'>
	<com1 :parentmsg='msg' v-on:func='show'></com1>
</div>

<template id='son'>
	<div>
		<input type='button' value='点击调用父组件传递的方法' @click=‘parentfunc’>
		<p>子组件---{
    
    { parentmag }}</p>
	</div>
</template>

var vm = new Vue({
	el: '#app',
	data: {
		msg: '父组件数据'
	},
	methods: {
		show() {
			console.log('调用了父组件方法')
		}
	},
	//定义子组件：
	components: {
		com1: {
			template: '#son',
			props: ['parentmsg'], //将父组件传递的parentmsg属性在props数组中定义，然后才能使用，但是不做更改
			methods: {
				parentfunc() {
					this.$emit(‘func’)
				}
			}
		}
	}
})
总结：
	（1）在父组件调用子组件的地方，绑定一个自定义属性，属性值为要传递的数据，在子组件定义的地方通过props数组接收
	（2）若调用父组件的方法，在父组件调用子组件的地方，使用事件绑定方式，自定义事件名,在子组件的方法中，通过this.$emit('方法名')调用父组件方法

2.子传父
通过子组件调用父组件方法的方式，将要传给父组件的数据以参数形式回传，在父组件中，调用方法时接受该参数,若传递的为对象，则在父组件data中定义变量接收