学习总结

表单操作
表单也可以用双向绑定和本身的value绑定，来选取按钮或者获取选取的按钮
下拉列表多选 设置multiple
多选的v-model绑定的必须是数组
表单域修饰符
number:转化为数值
trim:去掉开头和结尾的空格
lazy:将input事件切换为change事件，change事件是在失去焦点的时候触发,表单验证等情况下使用

​

​

​ 自定义指令
​ Vue.directive('focus'{ //指令名称
​ inserted:function(el){ //钩子函数,el代表被绑定的元素
​ el.focus();
​ }
​ })
​
​ insterted 被绑定元素插入父节点时调用
​ 带参数的自定义指令
​ Vue.directive('color',{
​ inserted:function(el,binding){
​ el.style.backgroundColor = binding.value.color;
​ }
​ })
​

​ 局部指令
​ directives:{
​ focus:{
​ inserted:function(el){
​ el.focus()
​ }
​ }
​ }
​ 局部组件只能在本组件中使用

​

​

​ 计算属性
​ 表达式的计算逻辑可能毕竟复杂，使用计算属性可以使模板内容更加简洁
​ computed:{
​ reverseMessage:function(){
​ return this.msg.split('').reverse().join('')
​ }
​ }
​ 计算属性与方法的区别
​ 计算属性是基于它们的依赖进行缓存的，依赖就是指数据
​ 方法不存在缓存
​ 就是说，如果计算属性需要执行多次，第一次执行之后已经把结果缓存好了，后面再执行的时候直接就使用了，不需要重新执行，计算数学必须要return 返回值
​ 而方法，每次都会重新执行

​

​

​ 侦听器
​ 侦听器的应用场景：数据变化时执行异步或开销较大的操作
​ 侦听器对数据进行监听，数据一旦发生变化就通知侦听器所绑定方法。
​ 侦听器的用法
​ watch:{
​ firstName:function(val){
​ this.fullName = val +this.lastName;
​ },
​ lastName:funciton(val){
​ this.fullName = this.firstName +val
​ }
​ }
​ 过滤器
​ 过滤器的作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式
​ 自定义过滤器
​ Vue.filter('过滤器名称',function(value){
​ //过滤器业务逻辑
​ })
​ 过滤器的使用

    <div>{{msg | upper}}</div>插值表达式
    <div v-bin:id="id | formatID"></div>属性绑定

​ 局部过滤器
​ filters:{
​ upper:function(value){
​ value是过滤器传过来的参数
​ }
​ }
​ 带参数的过滤器
​ 类似于函数传参
​

​ 生命周期
​ 主要阶段：
​

​ 创建
​ beforCreate 在实例初始化之后，数据观测和事件配置之前被调用
​ created 在实例创建完成后被立即调用
​ 挂载
​ beforeMount 在挂载开始之前被调用
​ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
​ 更新
​ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前
​ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
​ 销毁
​ beforeDestroy beforDestroy实例销毁之前调用
​ destroyed 实例销毁后调用

学习心得

VUE最需要我们去做的就是理解他，理解他的思想和他是如何实现的，然后就可以去写出代码，所以要加强理解性学习。