美文网首页
Vue学习(二)

Vue学习(二)

作者: ALEX朱先生 | 来源:发表于2019-04-27 08:29 被阅读0次

    二、Vue

    1.Data属性

    2.Props属性

    父子组件

    在父组件中定义数据

    在使用组件式,绑定父组件中的数据

    在子组件中通过props属性声明父组件中传递过来的参数

    在template属性中使用父组件中的参数

    3.props校验

    type: 指定数据类型 String Number Object ...注意不能使用字符串数组, 只能是对象大写形式

    txt1:[Number,String],//可以支持多个

    txt2:String,

    required: 指定是否必定输入

    txt3:{

          required:true,

          type:String

          },

    default: 给默认值或者自定义函数返回默认值 

    txt4:{

          default:100

    },

    如果不输入就会返回这个默认值

    validator: 自定义函数校验

    validator:function (value) {

            return value>10

        }

    4.非props属性

    在template中设置属性

    template:"<span class='test' style='color: red'>红色</span>"

    属性采用就近原则,在标签中的属性比非props属性,优先级高

    5.自定义事件

    5.1声明父组件

    5.2自定义事件

    5.3自定义子组件

    5.4主动挂载

    自定义事件不仅

    $on

    $emit

    6.插槽分发

    6.1 slot插槽

    子组件插槽

    <slot>插槽</slot>

    6.2 具名插槽

    利用name属性来具体赋值并使用

    <h3 slot="header">我好帅</h3>

    <slot name="header">如果没有传递数据,默认显示这段文本</slot>

    6.3 插槽作用域slot-space

    普通

    解构赋值

    7.动态组件

    7.1. 使用方式

    7.2 keep-alive

    7.3 refs属性

    8.数据处理

    8.1watch属性

    8.2$watch

    8.3computed属性

    computed和methods定义

    计算时用computed

    计算属性使用时不加括号

    计算属性是基于他们的缓存,效率较高

    8.4getter和setter

    getter

    getter获取值

    setter

    setter输入值

    9.生命周期

    实例创建 > 实例挂载 > 实例将要更新 >实例已更新 > 调用方法 > 实例写在

    10.自定义指令

    10.1基本使用

    定义

    Vue.directive('focus',{

    //当绑定元素插入到 DOM 调用

        inserted: function (el) { //元素获取焦点

            el.focus();

        }

    });

    使用

    <input type="text" v-focus/>

    10.2钩子函数

    10.3实例图片懒加载

    11.过滤器

    12.路由

    相关文章

      网友评论

          本文标题:Vue学习(二)

          本文链接:https://www.haomeiwen.com/subject/bvlhnqtx.html