4.案例交互

写vue页面：

1. 拆分组件
2. 静态组件（无交互）
3. 动态组件：
   
   1. 初始化数据
   2. 交互

传数据，自动收集收据：v-model
监听事件 :@click

组件通信：

<list :comments="comments"/>    //传的是值

<list comments="comments"/> //传的是文本

接收属性：
1. props:[‘comments’]
2. 对象形式：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

3. 或者是

props:{ //指定属性名和属性值的类型
    comment:Object,
    deleteComment:Function,
    index:Number
},

• splice:删除
• unshift:在最上面添加
• confirm:弹出一个确定和取消按钮的对话框(window.confirm(你要删除这个吗))
• trim:去掉前后的空格，但是中间空格不会去掉

一个文件夹下，有的页面需要引入另一个页面，当需要链接到一个页面怎样写相对路径：
1. 要链接到同级或者下一级元素用 ./
2. 链接到上级元素用 ../