VUE常见的语法
模版渲染{{msg}}
v-html=""
v-text=""
v-bind:id="" 类似 attr
三元判断 {{ok?'yes':'no'}}
指令:v-if=""
过滤器:
{{message|capitalize}} => v-bind:id="rowId | formId"
style和css:
(1)对象语法:v-bind:class="{key:value,key:value}"
(2)数组语法:v-bind="[classA,classB]"
(3)内联语法:v-bind:style="{font:fontSize+'px'}"
条件渲染:
v-if v-else v-else-if v-show v-cloak(刷新太慢,可以同步隐藏)
事件处理器:
v-on:click
v-on:click.stop 阻止冒泡
v-on:click.stop.prevent 阻止默认事件,比如阻止a跳转,阻止submit提交
v-on:click.self 本身,子元素没有作用
v-on:click.once 只执行一次
v-on:keyup.enter/tab/delete/esc/space/up/down/left/right
组建:
(1)全局组建和局部组建(数据单项流动):父元素通过prop传递,子元素通过$.emit触发父元素
(2)父子通讯-数据组建
(3)slot 插槽
路由:
动态路由匹配
嵌套路由
编程式路由
命名路由和命名视图
vue-router
<router-link></router-link> =>this.$router.push(spath:" ")
<router-view></router-view>
![](https://img2018.cnblogs.com/blog/1247144/201810/1247144-20181026105210176-736980108.jpg)