vue基础语法

模板语法

Mustache语法:{{msg}}

html赋值: v-html = ""

绑定属性 v-bind:id=""

表达式: {{OK ? 'white':'black'}}

文本赋值: v-text=""

指令 v-if=""

过滤器：{{message | capitalize}}和 v-bind:id = "rawld | formatld"

Class和Style绑定

对象语法： v-bind:class=“{active:isActive,'text-danger':hasError}”>

数组语法 ：<div v-bind:class="[activeClass,errorClass]">

data:{

activeClass:'active',

errorClass:'text-danger'

}

style绑定-对象语法:v-bind:style=“{color:activeColor,fontSize:fontSize + 'px'}”//activeColor为变量

条件渲染

它们都是控制显示和隐藏

v-if 、v-else、v-else-if //DOM已经存在或不存在

v-show //DOM已经存在，用css来控制他的透明度

v-cloak //如果页面刷新太快，导致我们的某些元素没有加载出来，cloak 可以同步来隐藏我们的html代码

事件处理器

事件处理主要用于交互

鼠标点击事件

v-on:click="showImg" 或者 @click="showImg" //showImg是我们定义的函数名字

事件修饰符

v-on:click.stop //阻止事件冒泡

v-on:click.stop.prevent //阻止默认事件，比如a便签默认是跳转 加上这个会阻止跳转

v-on:click.self //只局限于div本身触发事件 div的子级是不会触发事件的

v-on:click.once //只绑定执行一次

键盘点击事件

v-on:keyup.enter

v-on:keyup.tab

v-on:keyup.delete

v-on:keyup.esc

v-on:keyup.space

v-on:keyup.up

v-on:keyup.down

v-on:keyup.left

v-on:keyup.right

VUE组件

全局组件和局部组件

父子组件通讯-数据传递

*在vue里面只允许父组件单向与子组件通讯