VUE2 入坑指南01--指令

vue

mvvm

• app.js 项目入口文件
• router.js 路由分发
• controller 业务处理
• model 数据的curd (create read update delete)
  • m 页面中的数据
  • vm中间调度者
  • v 页面html结构

vue 与mvvm的对应

• 当导入包后，浏览器内存中就多了一个vue构造函数
• el： 绑定区域
• data：el 中要用到的数据

v-cloak、v-text、v-html

• v-cloak ：解决插值表达式闪烁的问题，F12 online调慢网速，可以看到数据变化（[v-cloak]{display:nonel;}）
• v-text : <h4 v-text="msg"></h4> ; 不会有闪烁问题；会覆盖元素原本内容；
• v-html : <h4 v-html="msg2"></h4> 覆盖但内容当做html渲染

v-bind 指令

• v-bind:title="mytitle + '123'" : 绑定一个属性
• v-bind 等同于 : + 属性名

v-on 指令定义vue中的事件

• v-on:click="show"
• methods 属性 ，用来定义当前vue实例所有可用的方法
• v-on 等同于 @ + 事件

事件修饰符

• .stop : 阻止冒泡 （@click.stop=“divclick”）
• .prevent ：阻止默认行为 （例如 a 标签的跳转）
• .capture : 实现捕获触发事件的机制（从外向里）
• .self : 只有点击当前元素才触发事件（不受冒泡影响）
• .once : 事件只触发一次

v-model 和双向数据绑定

• v-model=“msg” : msg 和 输入的表单数据双向绑定（v-model 只能运用于表单元素）

通过属性为元素绑定样式设置

• (.red{color:‘red’;.thin{font-weight:‘200’};.active{background:‘blue’;}})

• :click="[‘red’,‘thin’,flag?‘active’:’’]"
• :click="[‘red’, ‘thin’, {‘active’:flag}]" (如果flag为true则使用active样式)
• :click=" {red:true,thin:false,active:true}" (对象的属性可带引号，也可不带引号)

使用内联样式

• :style="{color:‘red’,‘font-weight’:200}"
• :style="[{color:‘red’,‘font-weight’:200} , {‘font-size’:‘18px’}]"

v-for 指令的四种使用

1. 普通数组

• <p v-for="item in list">{{ item }}</p>
• <p v-for="(item,i) in list">{{ i }} : {{ item }}</p>

2. 键值对数组

• <p v-for="item in list">{{ item.id }} -- {{ item.name }}</p>

3. 遍历对象

• <p v-for="(val,key,i) in list">-值：{{ val }} -键： {{ key }}-索引：{{ i }}</p>

4. 迭代数字

• <p v-for="count in 10">这是第{{ coutn }}次循环</p>

v-for 中key使用的注意事项

• 2.2+版本中，组件中使用v-for 必须用 key
• <p v-for="item in list" :key="item.id">{{ item }}</p> //key属性只能用 number 或者 string ,且 必须用 v-bind 属性绑定的形式

v-if 和 v-show 的使用

• v-if : 每次都会删除或创建元素，有较高的切换性能消耗，(如果元素频繁切换，不建议使用v-if)
• v-show : 只是切换了元素的 display:none 样式，有较高的初始渲染消耗，(如果元素可能永远不被显示，不建议使用 v-show)

some / findIndex / forEach / filter 循环

this.list.some((item , i)=>{

​ if(item.id == id){…}

​ return true;

})

var index = this.list.findIndex(item => {

​ if(item.id == id){ return true}

})

this.list.splice(index , 1) : splice 根据索引删除数组元素

this.list.forEach(item => {

​ if(item.name.indexOf(keywords) != -1){

​ newList.push(item)

​ }

})

var newList = this.list.filter(item => {

​ if(item.name.includes(keywords)){

​ return item

​ }

})

return newList;

vue-devtools的安装

• chrome 插件

vue 中全局过滤器的使用

• 用于 mustache插值 和 v-bind表达式
• 应该被添加在javascript 表达式的尾部，由 管道符 指示
• 定义全局过滤器 Vue.filter(‘过滤器名称’，function(data){})
• data.replace(/单纯/g,‘邪恶’)
• return y + ‘-’ + m + ‘-’ + d 优化于 return ` $y-${m}-${d} ` (模板字符串)

定义私有过滤器

• 过滤器调用采用就近原则（私有与全局名称一致则调用私有）
  filters:{
  test1:function(){}
  test2:function(){}
  }

padStart 方法的使用

str.padStart(2,‘0’) 长度两位，不够用0补位

自定义按键修饰符

• @keyup.enter=“add”
• .enter .tab .esc .up .down …
  +Vue.config.keyCods.f2 = 113

自定义全局指令

• Vue.directive(‘focus’,{})

• 参数1 指令名称，调用的时候需要加 v-

• 参数2 对象，指令相关函数

  Vue.directive(‘focus’,{
  bind:function(el){ //每当指令绑定到元素上的时候（浏览器内存中），会立即执行这个bind,一次
  el.focus()
  },
  inserted:function(el){ //插入到DOM中的时候，会执行inserted函数
  el.focus()
  },
  updated:function(el){ //当VNode更新的时候，会执行 updated ，可能会触发多次

  }
  })

定义私有指令

directives:{ //定义私有指令
‘fontweight’:{
bind:function(el,binding){
el.style.fontWeight=binding.value
}
}
}

指令函数的简写形式

directives:{ //定义私有指令
‘fontweight’:{
bind:function(el,binding){
el.style.fontWeight=binding.value
}
},
‘fontsize’:function(el,binding){ //这个function 等同于把代码写到了 bind 和 updated 中去
el.style.fontSize = bind.value
}
}

VUE2 入坑指南02–生命周期