Vue基础整理1

落日映苍穹つ 2022-12-09 05:29 123阅读 0赞

#### MVC、MVVM关系图解 ####

> ##### 1. mvc（后端思想） #####
> 
> ![mvc图解][mvc]
> 
> ##### 2. mvvm（前端思想） #####
> 
> ![mvvm图解][mvvm]

#### 简单指令 ####

> ##### 1.v-cloak #####
> 
> `<div v-cloak>{ { msg }}</div>`  
> 解决插值表达式的闪烁问题(页面刷新加载时出现的\{ \{\}\})  
>  注 ： 配 合 样 式 \[ v − c l o a k \] d i s l p a y : n o n e \\color\{red\}\{注：配合样式 \[v-cloak\] \{ dislpay: none \}\} 注：配合样式\[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-model = '属性名'>`  
>  注 ： 仅 适 用 于 表 单 元 素 \\color\{red\}\{注：仅适用于表单元素\} 注：仅适用于表单元素
> 
> ##### 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 更新时执行,可能触发多次
>     
>     	}
>     })
> 
> 函数相关参数  
> ![函数相关参数][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70_pic_center]
> 
> ##### 2.私有 #####
> 
> 定义位置：在vm实例内定义，与 methods 同级  
> 定义：`directives: {'自定义指令名': {相关函数}}`  
> **函数简写(全局/私有)：**  
> ![在这里插入图片描述][20200922171013447.png_pic_center]

#### 实例生命周期 ####

生命周期函数与 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 ===>数据已经改变
>     }
>     updated(){ //页面与数据都已更新
>     	//组件/数据被改变时触发
>     	//例：当点击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 \{\} ——>中间过程动画  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70_pic_center 1]  
[点击查看：vue动画详细介绍][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.子传父  
> 在子组件调用的地方，添加自定义事件，这个事件由父组件执行，在子组件中，使用`this.$emit('自定义事件名称','需要传递的参数')`来讲数据传递给父组件

[mvc]: /images/20221123/20b98ba67bf541dfadaa51be728f4517.png
[mvvm]: /images/20221123/8634aeab4ebb40809fa32545e101cc43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0f4a7de0694347eca1cc5b2ff344e483.png
[20200922171013447.png_pic_center]: /images/20221123/07690620f3ca4b929127c34d22882071.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jvb2tzdG9yZVNwaXJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/69edc085cf3d406d82a69e651e34c969.png
[vue]: https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D