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" />

四/总结

原文地址:https://www.cnblogs.com/threeron/p/7520060.html