vue的一些常用的基本语法

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' ) 这样就间接的修改了父组件的值