vue基础

MVVM设计模式

在MVVM设计模式中有3部分组成
M: Model 数据模型（保存数据，处理数据业务逻辑）
V: View 视图（展示数据，与用户交互）
VM: View Model 数据模型和视图的桥梁
MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M-> VM-> V
也可以从 V->VM->M
Vue中MVVM的划分
Vue其实是基于MVVM设计模式的
被控制的区域：View
Vue实例对象：View Model
实例对象中的Data：Model
Vue中数据的单项传递
我们把"数据"交给"Vue实例对象"，Vue实例对象将数据交给"界面"
Model -> View Model -> View

数据双向传递

数据双向绑定
默认情况下Vue只支持数据单项传递
vue中只支持在<input> <textarea> <select>中进行双向绑定

vue中的常用指令

指令就是Vue内部提供的一些自定义属性, 这些属性中封装好了Vue内部实现的一些功能，只要使用这些指令就可以使用Vue实现的这些功能

`v-once`

只渲染元素和组件一次，不会跟着数据的变化而变化

`v-cloak`

先将未绑定的数据展示到页面
然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML
最后再将绑定数据之后的HTML渲染到界面上

缺点：正是在最终的HTML被生成渲染之前会先显示模板内容，所以如果用户网络比较慢或者网页性能比较差，那么用户会看到模板内容
解决问题

利用v-cloak配合[v-cloak]:{display:none}默认先隐藏未渲染的界面，等到生成HTML渲染成功之后再重新显示

作用：数据渲染后自动显示

`v-text`

相当于innerText,会替换掉原来的内容，但是不会解析HTML代码

`v-html`

相当于innerHTML，会替换掉原来的内容并且会解析HTML

`v-if`

满足条件渲染元素，不满足就不渲染，如果条件不满足根本不会创建这个元素（重点）

`v-show`

满足条件给当前元素一个display:block，不满足条件display:none，不会重复渲染当前的元素

`v-for`

相当于JS中的for循环，可以根据数据多次渲染数据

可以遍历数组、字符串、对象、数字

`v-bind`

在企业开发中想要给"元素"绑定数据，我们可以使用v-bind简写为一个:。

在给元素的属性绑定值的时候只要是一个合法的JS表达式即可被转换成值输出

在绑定数据中的class和style属性绑定数据，格式比较特殊

不能直接进行复制，默认情况下v-bind先去Model中去查找。如果想让style中查找类名，就必须将类名放到数组中，放到数组中以后还需要去Model中查找，所以还需要对类名进行加['类名']。还可以通过对象来绑定类名

v-on

给元素绑定监听事件，我们可以使用v-on可以简写为@。

触发方法后会执行Vue中的methods查找函数的名称。

修饰符

.once 只触发一次回调
.prevent 调用event.preventDefault()阻止默认的行为
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调(如果想让当前元素触发了当前的方法，才能执行，不然不会冒泡到外面)
.stop 调用event.stopPropagation()。阻止事件冒泡行为
.capture 添加事件侦听器时，使用capture模式（默认情况下是事件冒泡，如果想使用事件捕获，就需要使用capture）

按键修饰符

@keyup.enter 触发回车事件
.tap 触发tap键
.delete 触发删除键
.esc 触发取消键
.space 触发空格键
.up 触发上键
.down 触发下键
.left 触发左键
.right 触发右键

自定义按键修饰符

将keycode直接跟在@keyup.keycode码自定义
全局定义keycode按键修饰符 Vue.config.keyCode.f1 = 112

自定义指令

自定义全局指令

// 第一个参数：指定指令名称，不需要写v-
// 第二个参数：对象
// 存在生命周期:
/*
bind: 指令被绑定到元素上的时候执行
inserted: 绑定指令的元素被添加到父元素上的时候调用 
*/
// 自定义指令实现修改文本颜色
Vue.directive("color",{
    // 被绑定指令的那个元素
    bind:(el)=>{
        el.style.color = "red";
    }
})

// 自定义指令实现聚焦

Vue.directive("focus",{
// el指向当前的元素节点 
    inserted:(el)=>{
        el.focus();    
    }
})

给自定义指令传参数

// `<p v-color="red"></p>`
Vue.directive("color",{
    // 被绑定指令的那个元素
    bind:(el,obj)=>{
        el.style.color = obj.value;
    }
})

自定义局部指令


new Vue({
    el:"#app",
    // 自定义局部指令
    directives:{
        "color":{
          bind:(el,obj)=>{
              el.style.color = obj.value;
          }
        }
    }
})

计算属性


let vm = new Vue({
    el:"#app",
    computed:{
        msg(){
            return "msg";
        }
    }
})

**函数和计算属性的区别: **

函数每次调用会都执行
只要返回的结果没有发生变化，那么计算属性就只会被执行一次

什么情况下使用计算属性，什么情况下使用函数：

由于计算属性会将返回的结果缓存起来，如果返回的数据不经常发生变化，那么使用计算属性会比使用函数的性能高

过滤器

过滤器是和计算属性一样都是用来处理数据的，但是过滤器一般用于格式化插入的文本数据

自定义全局过滤器

定义：

Vue.filter("过滤器名称",过滤器处理函数)

Vue.filter("testFilter",(val)=>{
  // TODO 处理文本内容的逻辑
  return val;
})

使用过滤器：

\{\{msg|过滤器名称\}\}
:value="msg|过滤器名称"

使用过滤器的情况下：格式化文本推荐使用过滤器，不推荐使用函数和计算属性
过滤器只能在插值语法和v-bind中使用
过滤器可以多个连续使用\{\{msg|format1|format2\}\}

自定义局部过滤器

let vm = new Vue({
  el:"#app",
  data(){
    return{
      msg:"测试数据"
    }
  },
  filters:{
    formatMsg(value){
      // todo 处理文本内容的操作
      return value;
    }
  }
})

可以给过滤器传递参数

补充js中的补零函数：

方法用另一个字符串填充当前的字符串，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

let time = "1";
console.log(time.padStart(2,"0"));

第一个参数填写需要填充的字符串的长度
第二个参数填写需要填充的字符串

只能填充字符串，若为数字先将数字转换为字符串，在进行填充

vue基础 #

MVVM设计模式 #

数据双向传递 #

vue中的常用指令 #

v-once #

v-cloak #

v-text #

v-html #

v-if #

v-show #

v-for #

v-bind #

v-on #

修饰符 #

按键修饰符 #

自定义按键修饰符 #

自定义指令 #

自定义全局指令 #

自定义局部指令 #

计算属性 #

过滤器 #

自定义全局过滤器 #

自定义局部过滤器 #

过渡动画 #