Vue学习记录（二）

收集表单信息

1. <input type="text"></input>v-model收集的是value值
2. <input type="radio" value="xxx"></input>v-model收集的也是value值，需要自己设置value值
3. <input type="checkbox"></input>
   • 若没有配置value值，v-model收集的为checked的值，是布尔型
   • 若配置了value值，v-model的初始值不是数据，收集的依旧为checked的值，布尔型；若v-model的初始值为数组，收集的为value值组成的数组
4. v-model的修饰符：
   • trim：过滤空格
   • lazy：失去焦点后收集数据
   • number：将收集字符串转为数字

过滤器

1. 定义：对要显示的数据进行特定格式化后再显示，适用于一些简单逻辑的处理
2. 注册全局过滤器：Vue.filter(name, callback);
   注册局部过滤器：

    new Vue({
        filters:{}
    })
   

3. 使用过滤器：{{xxx | 过滤器名字}} 或 v-bind:属性=“xxx | 过滤器名字”
4. 注：Vue3废除filters过滤器的使用

内置指令

v-text

1. 作用：向指定节点中渲染文本内容

v-html

1. 作用：向指定节点中渲染包含html结构的内容
2. 与插值语法的区别：
   • v-html会替换掉节点中的所有内容，{{xxx}}不会
   • v-html可以识别html结构
3. v-html有安全性问题！
   • 在网络上动态渲染html容易导致xss攻击
   • 要在可信的内容上使用v-html，不要在用户提交的内容上使用！！

v-cloak（没有值）

1. 本质是一个特殊指令，Vue实例创建完毕并接管容器后，会删掉v-cloak指令
2. 可以使用css属性选择器配合使用，在js还未解析前隐藏页面元素

v-once

1. v-once所在节点在初次动态渲染后，就是为静态渲染
2. 以后数据的改变不会引起v-once所在结构的更新，可以用于性能优化

v-pre

1. 跳过所在节点的编译过程
2. 可以用于没有指令语法、没有使用插值语法的节点，会加快编译

自定义指令

定义语法

1. 指令定义时不加v-,使用时要加v-
2. 指令名如果是多个单词时，使用kebab-case命名方式，不要用camelCase命名

局部指令

new Vue({
    directives:{
        //指令名：配置对象
        'name':{}

        //或 指令名：回调函数
        'name'(){}
    }
})

全局指令

Vue.directive(/*指令名，配置对象  或  指令名，回调函数*/);

配置对象中常用的3个回调

directives: {
    'test': {
        //指令与元素成功绑定时（一开始）
        bind(element, binding) {
            console.log('bind', this); //指令中的this向window
            element.value = binding.value;
        },
        //指令所在元素插入页面时
        inserted(element, binding) {
            console.log('inserted');
            element.focus();
        },
        //指令所在模板被重新解析时
        update(element, binding) {
            console.log('update');
            element.value = binding.value;
        }
    }
}

生命周期

1. 生命周期又叫生命周期回调函数、生命周期函数、生命周期钩子
2. 生命周期中的this指向vue或者组件

生命周期阶段

beforeCreate

此时数据监测和数据代理还没有完成初始化，无法通过vm访问到data中的数据，methods中的方法

created

完成初始化，可以访问

beforeMount

vue开始解析模板，生成虚拟dom（在内存中），页面还不能显示已经解析好的内容，页面显示的是未经vue编译的dom解构，所有对dom的操作最终都不奏效

mounted

将内存中的虚拟dom转为真实dom并插入页面中，页面中呈现的是经过vue编译的dom，对dom的操作均有效（尽可能避免）

beforeUpdate

数据发生改变时会触发，此时数据是新的，页面是旧的，还未完成同步

updated

数据与页面完成同步

beforeDestroy

vm中的数据都处于可用状态，马上要执行销毁过程

destroy

切断vue中的所有相关联系

常用的生命周期钩子

1. mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等初始化操作
2. beforeDestroy：清除定时器，解绑自定义事件，取消订阅等收尾工作

关于销毁vue实例

1. 销毁后借助开发者工具看不到任何信息
2. 销毁后自定义事件会失效，但原生dom事件仍有效
3. 一般不会在beforeDestroy操作数据

组件化编程

组件

用来实现局部（特定）功能效果的代码集合（html/css/js/image…）

定义组件（创建组件）

使用Vue.extend(options)创建，不写el，data必须写成函数，避免组件被复用时，数据存在引用关系

const school = Vue.extend({
            template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click='showName'>点我提示学校名</button>
            </div>
            `,
            data() {
                return {
                    schoolName: 'school',
                    address: 'guangzhou'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        })

注册组件

1. 局部注册

components:{
    school: school
}

2. 全局注册 Vue.component('组件名', 组件)

使用组件

<注册的组件名字></注册的组件名>

VueComponent

1. 组件本质是一个VueComponent构造函数
2. 创建<注册的组件名字></注册的组件名>时，Vue解析时会帮我们创建实例对象，执行new VueComponent
3. 每次调用Vue.extend，返回的都是一个全新的VueComponent
4. 关于this的指向：
   • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，this都是VueComponent实例对象
   • new Vue(option)中，this都是Vue实例对象
5. VueComponent实例对象，简称vc

Vue和VueComponent的关系

1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2. 因为这个关系，组件实例对象可以访问到Vue原型上的属性、方法