vue基础语法以及父子组件如何相互传值

vue模板引擎语法,关注数据层面

  1. Mustache语法:{{msg}} 主要是用date控制
  2. html赋值:v-html=""
  3. 绑定属性:v-bind:id=""
  4. 使用表达式:{OK?“yes”:“NO”}
  5. 文本赋值:v-text=""
  6. 指令:v-if=""
  7. 过滤器:{{message|capitalize}}和v-bind:id=“rawId|formatId”

class和style绑定

  • 对象语法:v-bind:class="{active:isActive,‘text-danger’:hasError}"
  • 数组语法:
data:{
activeClass:"active",
errorClass:"text-danger"
}
  • style绑定-对象语法
v-bind:style="{color:activeColor,fontSize +'px'}"
 //activeColor和fontSize在date里面定义变量
  • 条件渲染

v-if
v-else
v-eles-if
v-show(和v-if的区别是v-if判断是不会加载到页面,而v-show是加载到页面只是不显示)
v-cloak

  • vue事件处理器

v-on:click=“greet” 或许@click=“greet”
v-on:click.stop 阻止冒泡
v-on:click.stop.prevent阻止默认事件(a标签点击失灵)
v-on:click.self 给绑定对象绑定事件,对子元素是没有效果的
v-on:click.once 只能绑定一次,例如"下一步",只能生效一次。
v-on:keyup.enter/tab/delete/esc/space/up/down/left/right

  • vue组件

全局组件和局部组件
父子组件通讯-数据传递 (vue允许:父给子传递数据用到plp,不允许:不能给父传递数据–可以使用Emit来操作)
VUE主张单向数据流,那怎么做到子给父传值呢

父给子传值案例:

APP.vue(父)注册子组件Counter,并定义num值,给子组件传值




first.vue(子)接收父传的值,使用到props接收值。




子给父传值案例–需要通过emit操作:

APP.vue(父)在注册子组件Counter时自定义两个事件(incre和decre),并在增加increment和decrement的方法,说道底就是,父方法创建方法让子组件调用改变



//子组件使用$emit调用父组件(注意是事件名)




你可能感兴趣的:(vue,node.js,对象,数据,html)