MVC、MVVM关系图解
1. mvc(后端思想)
2. 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-module = '属性名'>
注 : 仅 适 用 于 表 单 元 素 \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 更新时执行,可能触发多次 } })
函数相关参数
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中定义变量接收