Vue开发实战之组件核心概念:事件

  1. 事件绑定指令:v-on ,简写:@
 <button v-show="!del" @click="handleClick">删除</button>
  1. 子组件把触发父组件事件用:$emit(‘事件名’,参数)
 this.$emit("delete", this.title);

子组件为什么要触发父组件事件呢,因为子组件拿的值是自己范围的数据,如果需要通知父组件传过来的数据,需要在父组件修改

3.事件修饰符:可以更精确控制事件的触发

Vue开发实战之组件基础之组件注册

  1. 组件是为了代码复用
  2. 全局注册:
Vue.component('全局组件名称',{});
//例子
Vue.component('todo-item',{
props:{
  title:String,
  del:{
      type:Boolean,
      default:false
  }
}
template:'<span v-if="!del">{{title}}</span>',
data:function(){return {}},
methods:{}
});
  1. 使用
<todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item> 

Vue开发实战之第一个Vue程序

  1. 不使用组件时的使用方式:cdn开发引用js包
  2. mustache语法:普通文本域中使用
<div>{{message}}</div>
<ul>
<li v-for="item in list">
{{item.title}}
</li>
</ul>
  1. 指令指令:可理解为占位符,不需要使用mustache语法,mustache语法是一般是为了显示文本信息。
    v-bind,v-for,v-if
  • {{item.title}}
    {{item.title}}

注意v-bind与v-model区别:
v-bind是单向绑定,只能是m绑定到v中
v-model是双向绑定,但只能在表单元素中使用