VUE笔记

const 常量 let 变量

v-on:click = @click

v-on:绑定事件 事件写在methods里 事件如click、touch等
另 v-on:click = @click

v-cloak 解决网速慢在vue库未加载完前隐藏

<style>
[v-cloak]{display:none;}
</style>
<p v-cloak>{{msg}}</p>

{{msg}} v-text v-html

<div v-text='msg'></div>//不适合前后加文本
<div v-html='msg'></div>//可输出标签属性如<h1></h1>

v-bind可省略为”:” 如v-bind:value = :value
另:v-bind后value的值为变量可写js v-bind只可以单向绑定无法实现双向数据绑定

v-model可实现数据双向绑定 如预设文字输出input用户改input可同时改动msg值bind做不到这点但v-model只能用在表单

<input type="text" v-model="msg">

.stop阻止其他事件一起触发冒泡 如@click.stop=”btn” div包裹btn点击btn div上不冒泡
.prevent阻止默认行为
.capture事件捕获模式多事件同事触发从外到里触发 如div包裹btn点击btn触发顺序从div开始
.self点击哪个事件触发哪个事件不会导致div包裹btn点击btn同时触发div上事件但需要在每个事件上加self没stop彻底
v-once .once 也可写在dom标签中 vue变量只生效一次后续改变无效
这些都可以串联发生如@click.prevent.once这样只阻止一次

class可以用三元表达式

<div :class="['aaa','bbb',isactive?'active':'']">

也可以通过vue里变量来改变class状态

<div :class="['aaa','bbb',{'active':isactive}]">

v-for遍历循环 动画效果和多选等要使用key
也可不需要数组直接循环

<div v-for="(val,key,i) in list"></div> 
<div v-for="count in 10">{{count}}</div>

v-if v-show 可用变量ture false改变显示和消失
区别:if是创建和消除代码而show是显示和隐藏

发表评论

邮箱地址不会被公开。