实战\ Vue2.5开发去哪儿网App(总结一)

一.vue基础

1.todolist开发

1.准备
实战\ Vue2.5开发去哪儿网App(总结一)_第1张图片
2.以上简写代码更改如下:页面显示效果一致
实战\ Vue2.5开发去哪儿网App(总结一)_第2张图片
3.在结构中添加双向数据绑定和点击事件
实战\ Vue2.5开发去哪儿网App(总结一)_第3张图片
4.在点击事件中往数组中添加元素即可
实战\ Vue2.5开发去哪儿网App(总结一)_第4张图片
最终实现效果:
实战\ Vue2.5开发去哪儿网App(总结一)_第5张图片

2.使用全局组件优化todolist(里面涉及父组件向子组件传值)

实战\ Vue2.5开发去哪儿网App(总结一)_第6张图片
父组件向子组件传值总结:使用子组件的使用,使用v-bind的形式,把一个值传给自组件.
实战\ Vue2.5开发去哪儿网App(总结一)_第7张图片

3.使用局部组件优化todolist

实战\ Vue2.5开发去哪儿网App(总结一)_第8张图片

4.子组件如何向父组件进行传值(还是用todolist案例)

需求:当我们点击下面的li标签的内容,就删除当前的li(这就用到了子组件向父组件进行传值了)


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>todolist开发title>
    <script src="./00-vue.js">script>
  head>
  <body>
    <div id="app">
      <input type="text" v-model="inputValue" />
      <button @click="addContent">提交button>
      <ul>
        <my-component
          :content="item"
          :index="index"
          v-for="(item,index) in list"
          @delete="handleItemDelete"
        >
        my-component>
      ul>
    div>
  body>
html>
<script>
  /* 
  需求:点击哪个就删除哪个li标签.
  步骤:因为我们的数据放在父组件的Vue的data里,最终删除的也是这里的数据
1.在子组件模板中添加点击事件handleItemClick
2.在子组件中的methods方法中写上这个事件
3.使用this.$emit触发delete事件:this.$emit('delete')
4.在html中监听这个delete事件handleItemDelete
5.在父组件中写这个handleItemDelete事件
6.接收传过来的索引方法:
  html中绑定index方法,在子组件中的props接收过来,在子组件的$emit中传入索引,
  在父组件中的handleItemDelete函数中,接收这个索引
 */
  let MyComponent = {
      
    props: ['content', 'index'], //父组件(list)向子组件(每个li)传值
    template: '
  • { {content}}
  • '
    , methods: { handleItemClick: function() { this.$emit('delete', this.index) } } } let app = new Vue({ el: '#app', components: { MyComponent: MyComponent }, data: { list: [], inputValue: '' }, methods: { addContent() { this.list.push(this.inputValue); this.inputValue=''; }, handleItemDelete: function(index) { // alert(index) this.list.splice(index, 1) } } })
    script>

    实现效果:
    实战\ Vue2.5开发去哪儿网App(总结一)_第9张图片

    (接下来会有总结二,未完待续)

    你可能感兴趣的:(十二.vue,实战\)