VUE

快来打我* 2021-09-07 06:09 295阅读 0赞

### VUE ###

*  一、什么是VUE
 *  二、指令
 *   *  1.v-bind:可缩写：
     *  2.v-model
     *  3.自定义指令
     *   *  1.不带参数的自定义
         *  2.带参数的自定义指令
         *  3.自定义指令的钩子函数
         *  4.局部指令
     *  4.v-block，解决闪动
     *  5.数据绑定指令
 *  三、事件修饰符
 *  四、按键修饰符
 *  五、样式绑定
 *  六、语句判断
 *  七、for循环
 *  八、表单操作符
 *  九、计算属性
 *  十、侦听器
 *  十一、过滤器
 *  十二、vue实例的生命周期
 *   *  1.beforeCreate
     *  2.created
     *  3.beforeMount
     *  4.mounted
     *  1.beforeUpdate
     *  2.updated
     *  1.beforeDestroy
     *  2.destroyed

# 一、什么是VUE #

mvvm模式  
m:model数据  
v：视图  
vm:视图模型  
数据驱动视图模型，修改视图。

# 二、指令 #

## 1.v-bind:可缩写： ##

v-bind:href="url"等于:hrdf=url

这样可以动态修改这个url

## 2.v-model ##

实现控件的和数据的双向绑定。  
原理：

<input  type="text" :value='msg' @input="msg =$event.target.value">
    //$event.target表示是input这个元素,vaule是控件输入的值

## 3.自定义指令 ##

### 1.不带参数的自定义 ###

Vue.directive('focus'，{ 
      inserted:function(el){ 
      //el是指令绑定的元素。
      //focus()获取元素的焦点，
       el.focus();
    }
    })

用法

<input type='text' v-focus>
    <input type='text' v-focus>
    //多个的话只有第一个有效

### 2.带参数的自定义指令 ###

Vue.directive('color'，{ 
      inserted:function(el,binding){ 
      //el是指令绑定的元素。
      //focus()获取元素的焦点，
    el.style.backgroundColor = binding.value.color
    }
    })

用法

<input type='text' v-color="{color:'orange'}">
    //orange与上面的binding.value后面的值对应
    
    //多个的话只有第一个有效

### 3.自定义指令的钩子函数 ###

bind  
inserted

### 4.局部指令 ###

注册在组件中，即vue实例中  
directives属性

directive:{ 
    color:{ 
    bind:function(el,bingding){ 
    el.style.backgroundColor = binding.value.color
    }
    },
    focus:{ 
     inserted:function(el){ 
         el.focus()
    }
    }
    }

用法

<input type='text' v-color="{color:'orange'}">
    //多个的话只有第一个有效
    <input type='text' v-focus>

局部组件只能在本组件中使用，全局指令没有限制，多个组件都能使用。

## 4.v-block，解决闪动 ##

可以在插值表达式值没刷新出来之前，先隐藏掉，在内存中进行值的替换，替换好后在把值显示出来。这就解决了闪动的问题

[v-block]{ 
    display:none;
    
    }
    
    <div v-block>
    { { mes}}
    
    </div>

## 5.数据绑定指令 ##

v-text  
和插值表达式\{ \{\}\}类似

# 三、事件修饰符 #

写法

<div @click.stop.prevent ="fn"></div>
    //事件修饰符可以连写，且顺序很重要。prevent 在最前面会阻止所有的点击，

1.stop：阻止事件冒泡。只触发最外层 的元素事件。原生js是event.stopPropagation()  
2.prevent：阻止默认行为，一般是阻止a标签的跳转行为。原生js是event.preventDefault()  
3.self：阻止冒泡上来的事件触发这个元素的这个事件。只有点击的是这个元素，才会触发这个元素的事件。

# 四、按键修饰符 #

写法

<div @keyup.enter ="fn"></div>
    //事件的keycode表示按键的唯一标识，enter也可以写成数字，相当于那个按键，

1.enter：表示是按的是回车键时才会触发  
2.delete：表示delete键和退格键才会触发  
3.自定义按键修饰符：  
Vue.config.keyCodes.aaa= 65  
然后aaa修饰符的值就是65，即按下键盘上的a时才会触发事件。  
名字是自定义的，但是值必须是按键对应的那个数字。

# 五、样式绑定 #

1.class绑定

<div class="box" :class="{active: isactive，active2:isactive2}"></div>//isactive为true就添加active这个类名
    <div :class ="[active,active2]"></div>//表示绑定两个类名，active和active2是变量，可以动态的切换类名

已有的class会保留

2.style绑定

<div :style="{color:activecolor,fontsize:fontSize}"></div>
    <div :style="[baseStyle,overStyle]"></div>//表示可以放多个对象形式的样式
    <div :style="obj"></div>//直接绑定一个属性，
    //obj:{ 
     color:'red'
    }

对象形式的是根据变量的值来确定属性的值。

# 六、语句判断 #

v-if='boolean'
    v-else-if='boolean'
    v-show='boolean'

都绑定一个boolean值，true则元素显示，if为false,则else-if的元素就会显示  
v-show是设置的元素display:none，已经渲染了，即元素已经存在了。但不显示  
而v-if是删除元素和新增元素，控制的是是否渲染，即元素存不存在。  
频繁显示和隐藏用v-show  
变化少用v-if,因为if操作了dom元素，耗能较大。

# 七、for循环 #

<li v-for='item in list'>{ { item}}</li>
    <li v-for='(item,index) in list' :key=item.id>{ { index}}</li>
    <li v-for='item in list' :key=index></li>
    <li v-for='(value,key,index)in obj' :key=index></li>//value是属性值，key是属性名，index是键值对的索引

list是个数组,也可以是一个对象  
要给每个li绑定一个key属性  
作用是帮vue区分每个元素，从而提高性能，key的值一定要绑定的是唯一的。有id用id,没有用index  
最好增加key,不增加也能区分，但是非常消耗性能。  
所以只要遍历就加上key。

# 八、表单操作符 #

<input v-model.number ='age' type="number"/>
    //控件或取到的值一般都是字符串形式，需要自己再做处理。

1.number：将值转换为数字  
2.trim：去除字符串两边空格  
3.lazy：将input事件切换为change事件，input事件是每次输入都触发，而change是失去焦点后就会触发。

# 九、计算属性 #

computed :{ 
        方法名：{ 
        // 最后要return 一个结果，使用的地方直接加函数名即可，不需要在data里再定义一个变量了。
    }
    }

和方法的区别  
计算是有缓存的，它基于data中的数据，只要数据不发生变化，就不会重新执行函数，只会找缓存，要是data数据变了，才会执行。  
方法是无缓存的，方法是每次都会重新执行函数。

# 十、侦听器 #

监听数据的变化

<input v-model='firstName'>
    data:{ 
     firstName:'你好'
    }
    watch:{ 
    firstName:function(val){ 
       //当firstName发生变化时就会触发这个方法，val表示变化后的值，
    }

# 十一、过滤器 #

全局过滤器是

Vue.filter('名字'，function(val){ 
            //val是参数
    })

局部是

filters:{ 
      过滤器的名字:function(val){ 
           return 一个值
           //一定要返回一个值
      }
    }

使用都是

{ { aaa | 过滤器的名字|可连写多个过滤器，参数是上一个的结果}}
    
    <div :id='a | 过滤器'>//属性绑定也能绑定过滤器

案例：格式化日期

# 十二、vue实例的生命周期 #

挂载(初始化相关操作)

## 1.beforeCreate ##

## 2.created ##