第一步使用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>