zoukankan      html  css  js  c++  java
  • Vue入门笔记03(基础)

    一/文件结构

    1,vue文件构成:
    2,vue文件打包后构成:

    二/组件参数

    props参数:

    定义组件属性,实现组件之间通信

    components参数:

    注册为组件,使其能够作为标签使用

    methods参数:

    定义组件相关方法,可以做为事件的监听函数

    watch参数:

    定义模式数据变更时的监听函数,当数据变更时,对应的函数会被调用

    三/模板指令

    v-text,v-html:数据渲染(v-html会处理html标签)

    v-bind:属性绑定

    1,字符串(绑定一个属性值)
    2,对象(根据对象值控制是否存在该键名,键名即为属性值)
    3,数组(绑定多个属性值)

    v-on:事件绑定

    写法1:v-on:click="funname"
    写法2: @click="funname"
    写法3: v-on="{click:funname, mouseover:funname2}"
    传递参数:v-on:submit="funname($event)"
    阻止默认行为:v-on:submit.prevent="funname"
    阻止冒泡:v-on:submit.stop="funname"
    条件限制:v-on:keyup.enter="funname"

    v-for:渲染循环列表

    v-show,v-if:控制隐藏

    v-show:控制元素显示/隐藏
    v-if:控制是否存在该元素
    v-if配套使用:v-else-if,v-else

    v-model:数据模型,与参数data对应

    v-model.lazy:懒加载,即当数据发生onchange类似事件时才绑定更新,如:
    <input type="text" v-model.lazy="username" />
    v-model.trim:去除前后空格
    <input type="text" v-model.trim="username" />
    v-model.number:控制为number模式
    <input type="text" v-model.number="username" />

    四/总结

  • 相关阅读:
    事件的解密
    C#世界中的委托
    这次是C#中的接口
    完全二叉树的建立和翻转
    全排列的应用
    网易笔试-按位或运算
    柱状图的最大矩形--单调栈
    Linux将线程绑定到CPU内核运行
    Windows多线程与线程绑定CPU内核
    B+树介绍
  • 原文地址:https://www.cnblogs.com/threeron/p/7520060.html
Copyright © 2011-2022 走看看