vue.js语法介绍
模版语法(template):
mustache语法:{{mag}}
html赋值:v-html=“”
绑定属性(id只是其中一个属性也可以是class):v-bind:id=“”
使用表达式{{ok?‘YES’:‘NO'}}
文本赋值: v-text=“”
指令: v-if
过滤器(就是和或表达式差不多):{{message|capitalize}}和v-bind:
id=“rawld|formatld”
class和style绑定 :
- 对象语法: v-bind:class=“{active:isActive,’text-danger‘:hasError}“ 解析:isActive是一个ture或者flase,来指定这个active显示不显示
- 数组语法 就是在data里面定义两个变量,然后赋值到v-bind:class="{activeClass,errorClass}
- style绑定-对象语法:v-bind:style="{color:activeCorlor,fontSize:fontSize+'px' 这两个也是一个data对象
条件渲染:
- v-if
- v-else
- v-else-if
- v-show
- v-cloak 控制html代码隐藏
vue事件处理器:
- v-on:click="greet" 或者 @click=“greet”
- v-on:click.stop
- v-on:click.prevent 阻止默认事件
- v-on:click.left
- v-on:click.once 只生效一次
- v-on:keyup.enter enter tab delete(删除和退格) sec space up down left rght
vue组件
- 全局组件和局部组件
- 父子组件通讯-数据传递
- slot
父组件和子组件之间数据的传递
1.父组件传递数据给子组件:在子组件export defalt中放一个props【】然后里面放一个变量 ,父组件在
获取v-bind:
num=
"num"这个变量
2.子组件传递给父组件:添加一个$emit()这个函数,首先
v-on
:incre=
"increment"
v-on
:decre=
"decrement"自定义两个组件 然后在methods定义他们的方法,最后在子组件中
this
.
$emit
(
'incre'
) 这样就间接的修改了父组件的值