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://www.cnblogs.com/chengmingxiaowu/p/9115038.html