Vue知识点整理

---

一、初识Vue

1.1.Vue 是什么:

Vue 是一套用于构建用户界面的渐进式框架

1.2.Vue 的两大核心:

1.响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作
2.可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

1.3.Vue 基础语法:

1. 文本插值: { {}} : 花括号中是js表达式;

2. 指令: directive; vue中新增的一些属性等,称为指令, 不同的指令有不同的功能.

3. 条件渲染: v-if的值是一个表达式,当表达式的取值为true时,创建标签,添加到DOM;当表达式的取值为false时,将该标签从Dom删除, 有多种情况时,可以使用v-if\v-else\v-else-if,需要注意,v-else\v-else-if需要与v-if相邻.
   当某种特殊情况需要展示一段标签,但是又不想添加额外的包裹标签造成html结构变化,这时,可以采用template标签.
   template:模板; 这是vue提供的一个虚标签,仅起包裹作用,html中不会显示这个标签.

4. v-show:值是一个js表达式,当表达式的取值为true时,标签显示: 取值为false,通过css display:none隐藏;

5. 如何选择使用v-if\v-show?? 两者区别?

6. v-if的显隐是通过标签的创建删除实现,v-show是通过css显隐实现.

7. 因此v-if 有较小的初始渲染开销,v-show有较大的初始渲染开销,较小的切换开销;综上,频繁切换采用v-show,较少可以采用v-if.

8. v-html:展示html;

9. v-bind:属性绑定;这个指令有参数,v-bind:参数名=“js表达式值”;参数名称就是属性名称;可以简写为:参数名=“值”;

10. v-once:一次性绑定: 该指令所在标签, 数据变化,页面不会随之变化.

11. 列表渲染:
    v-for="(元素,索引) in 数组" : 不需要索引时,可以缺省()和索引;

    v-for="(属性值,属性名) in 对象" ; 遍历对象;

    v-for="(元素,索引) in 整数" : 遍历数字; 实际上遍历的是一个数字数组,这个整数是数组的长度;

1.4.Vue的vm实例:

    vm$el 属性, 取值是一个DOM元素,vue实例初始化时会根据构造函数传入option对象中的el字段,查找对应的DOM标签,赋值给$el.
    vm._data属性,取值是一个对象, 对象的属性与option对象中的data字段下属性保持一致: 
    这些数据属性会通过object.defineProperty方法以存取描述符 (set\get) 的方式添加到_data中.
    也就意味着,赋值会调用set方法,取值的时候会调用get方法.
    可以通过vm._data.属性名称的方式访问这些属性:
    也可以直接通过vm.属性名称的方式访问这些属性,与vm._data.属性名称等价.
    vue的数据更新是响应式的(reactive);
    响应式: 数据变化了,页面会自动更新. 依赖于数据是通过object.defineProperty方法以存取描述符 (set\get) 的方式添加的

1.3.Vue的事件监听:

事件监听:v-on:事件名称=“表达式||少量代码”;简写为@事件名称=“表达式||少量代码”;
事件回调函数,默认携带event参数,也可以自己传递需要的数据;
@事件名=“函数名”;默认携带event参数;
@事件名=“函数名(a,b…)”;这时,a,b…是自主传递的参数;
@事件名=“函数名($event,a,b…)”;这时, $event是事件对象, a ,b…是其他需要的数据;

回调函数中this表示当前vue对象;
事件修饰符
self:自身,限定只能监听自身触发的事件;
capture:捕获; 监听捕获事件;
once:一次;一次性的事件绑定;
prevent:组织事件的默认行为;
stop:停止事件传播;
键盘修饰符
enter:enter键;
left\right\down\up ;
esc
tab
delete
系统修饰键
ctrl
alt
shift
meta

1.5.Vue的双向绑定:

####原理:
数据 ->视图 : 数据变化,页面随之变化; 通过v-bind:value属性绑定实现;
绑定实现:
视图->数据:视图变化,数据随之变化;通过v-on:input事件监听实现
双向绑定 可以简写为v-model

1.6.Vue的属性绑定 v-bind:

属性绑定 v-bind : html中默认属性的取值都是string

vue中对常用的属性, class\style的绑定做了扩展
        class:
           字符串;例如  "red big"
           数组: 例如  ["red", "big"]
           对象: 例如 {red:true,big:false} 取值true,说明有这个class,反之false
        style:
           字符串: 例如 "width:100px;height:100px;background-color:red;"
           对象: 例如 {width:100px,height:100px,backgroundColor:red}
           数组: 例如 [
                        {
                            width:100px,height:100px,
                        },
                        {
                            backgroundColor:red
                        }
                     ]

1.7.Vue的计算属性computed:

计算属性: 会缓存计算的结果: 多次使用,get方法只会执行一次;只有当计算属性依赖的data中数据发生变化时,会重新计算.
计算属性, 取值调用get,赋值调用set;set很少使用,一般只用get方法,可以使用简写;

1.8.Vue的监视属性watch:

方法名就是需要监视的数据名称,当数据发生变化时,会执行这个函数.
para1:修改后的值,新值
para2:修改前的值,旧值

1.9.表单元素的双向绑定:

双向绑定:
                数据->视图: 数据变化,视图更新; 
                视图->数据: 试图变化, 数据更新;

            双向绑定简写为v-model;v-model是双向绑定的语法糖;
                input\textarea
                v-bind:value 属性绑定 实现数据变化,视图更新;
                v-on input 事件监听, 实现试图变化,数据更新;
                radio\checked
                v-bind:checked
                v-on:change
                select-option
                v-bind:selected
                v-on :change
            双向绑定的事件修饰符
                number : 将输入内容转化为数字
                trim : 裁剪;将输入开头结尾的空格删除
                lazy : 懒 ; 将input事件监听换成change; 

                input:输入字符时触发;
                change:输入变化并失去焦点时触发;

2.1.filter:过滤器:

filter:过滤器; 进行数据格式化;
        filter实际就是函数;
        可以在{
  {}} 以及 v-bind 中使用过滤器.例如{
  {oldValue | 过滤器名称}} , {
  {oldValue | 过滤器名称(第二个参数,第三个是参数....)}}
        过滤器函数的参数:
            para1:| 前面的变量;
        过滤器支持串联;  例如{
  {oldValue | 过滤器1 | 过滤器2 | 过滤器3 ...}}
        执行第一个过滤器,得到返回值,将返回值作为参数传入第二个过滤器

例:

filters:{
   
                capitalize:function(value,count){
   
                    return value.toFixed(