Vue学习之路02

第一步使用vue-cli创建模板项目

    使用cmd执行以下命令

     npm install -g vue-cli

     vue init webpack VueDemo

运行项目

 npm run dev

访问http://localhost:8080/，或者修改

第二步 vue组件化开发

index.html页面

     

main.js

    

App.vue

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对VUE的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add :addConmment="addConmment"/>
      <List :comments="comments" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>

<script>
  import Add from './components/Add.vue'
  import List from './components/List.vue'

  export default {
    components: {
      Add,
      List
    },
    methods:{
      //添加评论
      addConmment(comment){
        this.comments.unshift(comment);
      }
      ,
      //删除指定下标的评论
      deleteComment(index){
        this.comments.splice(index,1);
      }
    },
    data(){
      return{
        comments:[//数据在那个组件，更新数据的行为（方法）就应该定义在哪个组件
          {
            name:'zhangsan',
            content:"Vue",
          },
          {
            name:'lisi',
            content:"Vue1",
          },
          {
            name:'wangwu',
            content:"Vue12",
          }

        ]
      }
    }
  }
</script>

<style scoped>

</style>

Add.vue

<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" v-model="name">
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容" v-model="content"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  props:{
    addConmment:{//指定属性名/属性值的类型/必要性
      type:Function,
      required:true
    }
  },
  data(){
    return{
      name:'',
      content:''
    }
  },
  methods:{
    add(){
      //1.检查输入的合法性
      const name=this.name.trim();
      const  content=this.content.trim();
      if(!name||!content){
        alert("用户名或评论不能为空")
        return;
      }
      //2.根据输入的数据，封装成一个comment队形
      const comment={
        name,
        content
      }
      //3.添加到comment中
      this.addConmment(comment);
      //4.清除输入
      this.name=''
      this.content=''
    }
  }
}
</script>

<style scoped>

</style>

List.vue

<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 v-show="comments.length===0" style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <Item v-for="(comment,index) in comments" :key="index" :comment="comment"
      :deleteComment="deleteComment" :index="index"/>
    </ul>
  </div>
</template>

<script>
  import Item from './Item.vue'

export default {
  components: {
    Item
  },
  //声明接收属性：这个属性就会成为组件对象的属性
  props:['comments','deleteComment'],

}
</script>

<style>
  .reply {
    margin-top: 0px;
  }
</style>

Item.vue

<template>
  <li class="list-group-item">
    <div class="handle">
      <a href="javascript:;" @click="deleteItem">删除</a>
    </div>
    <p class="user"><span >{{comment.name}}</span><span>说:</span></p>
    <p class="centence">{{comment.content}}</p>
  </li>

</template>

<script>
    export default {
        //props:['comments']//只指定了属性名
        props:{//指定属性名，和属性值
          deleteComment:Function,
          index:Number,
          comment:Object
        },
        methods:{
          deleteItem(){
            const {comment,deleteComment,index}=this
            if(window.confirm(`确定删除${comment.name}的评论吗`)){
              deleteComment(index);
            }
          }
        }

    }
</script>

<style scoped>
  li {
    transition: .5s;
    overflow: hidden;
  }

  .handle {
    width: 40px;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    right: 10px;
    top: 1px;
    text-align: center;
  }

  .handle a {
    display: block;
    text-decoration: none;
  }

  .list-group-item .centence {
    padding: 0px 50px;
  }

  .user {
    font-size: 22px;
  }
</style>