vue作业_vue this.blur()-CSDN博客

本文链接：https://blog.csdn.net/u013364932/article/details/70246134

-------自己写的------

css：

@charset "utf-8";body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}
body{font-size:12px;font-family:"Microsoft YaHei"}
ul,ol{list-style-type:none}
select,input,img,select{vertical-align:middle}
a{text-decoration:underline;color:#313030}
a{blr:expression(this.onFocus=this.blur())}
input,textarea{outline:0;resize:none}
a{outline:0}
.znsArea{width:755px;overflow:hidden;margin:0 auto;font-family:"Microsoft YaHei"}
.commentOn{width:753px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana}
.reply{overflow:hidden;padding:10px 20px;background:#FFF;border-top:#e9e9e9 solid 1px;border-bottom:#e9e9e9 solid 1px}
.userInfo{display:block;overflow:hidden;height:25px;border-bottom:#bababa solid 1px}
.userName{float:left;background:url(../img/userBj.png) left center no-repeat;padding-left:15px;color:#000;font-size:14px;font-weight:bold}
.replyTime{float:left;color:#8b8585;line-height:30px;font-size:11px}
.replyContent{line-height:24px;font-size:14px;color:#2b2b2b;font-family:"Microsoft YaHei"}
.operation{clear:both;width:100%;height:30px;margin-top:8px}
.handle{float:right;padding-top:6px}
.handle a{text-decoration:none;float:left;margin-left:12px;background:url(../img/icons.png) 0 0 no-repeat;height:18px;line-height:18px;padding-left:20px}
.handle .top_icon{background-position:0 0}
.handle .down_icon{background-position:0 -17px}
.handle .cut{background-position:0 -33px}
.handle a:active{color:#09F}
.noContent{text-align:center;display:block;background:#FFF;font:14px/2.3 "Microsoft YaHei";border-bottom:#e9e9e9 solid 1px;border-top:#e9e9e9 solid 1px;color:#999}
.takeComment{width:713px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana;padding:15px 20px}
.takeTextField{width:701px;height:70px;border:#b1b1b1 solid 1px;clear:both;display:block;margin:10px 0 10px 0;line-height:20px;padding:5px;box-shadow:inset 0 0 5px #DDD;font-family:"Microsoft YaHei"}
.takeSbmComment{display:block;overflow:hidden}
.takeSbmComment span{float:right;color:#CCC;line-height:37px;padding-right:10px}
.inputs{float:right;width:125px;height:37px;border:none 0;background:tranparent;background:url(../img/takeSbmComment.png) left top no-repeat;cursor:pointer;opacity:.8}
.inputs:hover{opacity:1}
.inputs:active{opacity:.9}
.messList{overflow:hidden}
.page{text-align:right;font-size:0;font-family:Verdana;padding:10px 16px}
.page a{display:inline-block;height:20px;padding:0 7px;border:#CCC solid 1px;font:12px/20px Verdana;text-decoration:none;margin-left:5px;background:#FFF}
.page a:hover{background:#09F;color:#FFF;border-color:#09F}
.page .active{background:#CCC}
.page a:active{opacity:.8}

html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
<link rel="stylesheet" href="style/weibo.css">
<script src="../vue.js"></script>
<script src="../vue-resource.js"></script>
<script>
window.οnlοad=function(){
var URL='weibo.php';

new Vue({
el:'.znsArea',
data:{ //vue的属性、数据
t1:'',
msgData:[]
},
methods:{
add:function(){
//发送请求
this.$http({
url:URL,
data:{ //后台发送数据
act:'add',
content:this.t1
}
}).then(function(res){
var json=res.data;
//msgData添加数据

this.msgData.unshift({
content:this.t1,
time:json.time,
acc:0,
ref:0,
id:json.id
});

this.t1='';
});
},
getPageData:function(n){
this.$http({
url:URL,
data:{
act:'get',
page:n
}
}).then(function(res){
var arr=res.data;
for (var i=0;i<arr.length;i++){
this.msgData.push({
content:arr[i].content,
time:arr[i].time,
acc:arr[i].acc,
ref:arr[i].ref,
id:arr[i].id
});
}
});
}
},
ready:function(){
this.getPageData(1);
}
});
};
</script>
</head>
<body>
<div class="znsArea">

<div class="takeComment">
<textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="t1"></textarea>
<div class="takeSbmComment">
<input type="button" class="inputs" value="" @click="add" />
<span>(可按 Enter 回复)</span>
</div>
</div>

<div class="commentOn">
<div class="noContent" v-show="msgData.length==0">暂无留言</div>
<div class="messList">
<div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time}}</span>
<span class="handle">
<a href="javascript:;" class="top">{{item.acc}}</a>
<a href="javascript:;" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" class="cut">删除</a>
</span>
</p>
</div>
</div>
<div class="page">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</div>
</div>
</div>

</body>
</html>

-------作业------

main.js(部分代码)

 
 import Vue  
 from  
 'vue' 

 
 import App  
 from  
 './App' 

 
 import router  
 from  
 './router' 

 
 import style  
 from  
 './static/css/index.css' 

 
 Vue. 
 config. 
 productionTip  
 =  
 false 

 
 new  
 Vue({ 

    el:  
 '#app', 

    router, 

    template:  
 '<App/>', 

    components: { App }, 

     
 created:  
 function(){ 

       
 router. 
 replace( 
 '/all?type=all') 

}

})

 
 app.vue

   < 
  template> 
 
     < 
  div  
  id= 
  "app"> 
 
       < 
  div  
  class= 
  "page-top"> 
 
         < 
  div  
  class= 
  "page-content"> 
 
           < 
  h2>任务计划列表</ 
  h2> 
 
         </ 
  div> 
 
       </ 
  div> 
 
       < 
  div  
  class= 
  "main"> 
 
         < 
  h3  
  class= 
  "big-title">添加任务：</ 
  h3> 
 
         < 
  input  
  placeholder= 
  "例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" 
 
  class= 
  "task-input" 
 
  type= 
  "text" 
 
  v-model="todo" 
 
  v-on:keyup.13= 
  "addTodo" /> 
 
         < 
  ul  
  class= 
  "task-count" 
 
  v-show=" 
  list.length"> 
 
           < 
  li>{{noCheckeLength}}个任务未完成</ 
  li> 
 
           < 
  li  
  class= 
  "action"> 
 
             < 
  router-link  
  class= 
  "active"  
  to= 
  "/all?type=all">所有任务</ 
  router-link> 
 
             < 
  router-link  
  to= 
  "/all?type=unfinished">未完成的任务</ 
  router-link> 
 
             < 
  router-link  
  to= 
  "/all?type=finished">完成的任务</ 
  router-link> 
 
           </ 
  li> 
 
         </ 
  ul> 
 
         < 
  h3  
  class= 
  "big-title">任务列表：</ 
  h3> 
 
         < 
  router-view : 
  list="list" 
 
                      : 
  visibility="visibility" 
 
                      : 
  filteredList="filteredList" 
 
                      ></ 
  router-view> 
 
       </ 
  div> 
 
     </ 
  div> 
 
   </ 
  template> 
 
   < 
  script> 
 
  var filter  
  = { 
 
  all:  
  function ( 
  list) { 
 
  return list; 
 
     }, 
 
  finished:  
  function ( 
  list) { 
 
  return  
  list. 
  filter( 
  function ( 
  item) { 
 
  return  
  item. 
  isChecked; 
 
       }) 
 
     }, 
 
  unfinished:  
  function ( 
  list) { 
 
  return  
  list. 
  filter( 
  function ( 
  item) { 
 
  return  
  ! 
  item. 
  isChecked; 
 
       }) 
 
     } 
 
   } 
 
  export  
  default { 
 
     name:  
  'app', 
 
  data() { 
 
  return { 
 
         list:  
  this. 
  fetch( 
  "miaov-new-class"), 
 
         todo:  
  '', 
 
         visibility:  
  "all" 
 
       } 
 
     }, 
 
     computed: { 
 
  noCheckeLength:  
  function () { 
 
  return  
  this. 
  list. 
  filter( 
  function ( 
  item) { 
 
  return  
  ! 
  item. 
  isChecked 
 
         }).length 
 
       }, 
 
  filteredList:  
  function () { 
 
  //找到了过滤函数，就返回过滤后的数据；如果没有返回所有数据 
 
  return filter[ 
  this.visibility]  
  ? filter[ 
  this.visibility]( 
  this. 
  list)  
  :  
  this. 
  list; 
 
       } 
 
     }, 
 
     watch: { 
 
       list: { 
 
  handler:  
  function () { 
 
  this. 
  save( 
  "miaov-new-class",  
  this. 
  list); 
 
         }, 
 
         deep:  
  true 
 
       } 
 
     }, 
 
     methods: { 
 
  save: ( 
  key,  
  value)  
  => { 
 
  localStorage. 
  setItem(key,  
  JSON. 
  stringify(value)); 
 
       }, 
 
  fetch: ( 
  key)  
  => { 
 
  return  
  JSON. 
  parse( 
  localStorage. 
  getItem(key))  
  || []; 
 
       }, 
 
  addTodo:  
  function () { 
 
  this. 
  list. 
  push({ 
 
           title:  
  this. 
  todo, 
 
           isChecked:  
  false 
 
         }); 
 
  this. 
  todo  
  =  
  ''; 
 
       }, 
 
  watchHashChange:  
  function () { 
 
  var hash  
  = window.location.hash. 
  slice( 
  1); 
 
  let regexp  
  = 
   / 
  \/\S 
  + 
  \= 
  / 
  gi; 
 
  this.visibility  
  =  
  hash. 
  replace(regexp,  
  '');; 
 
       }, 
 
     }, 
 
  created() { 
 
  this. 
  watchHashChange(); 
 
       window. 
  addEventListener( 
  "hashchange",  
  this. 
  watchHashChange); 
 
     } 
 
   } 
 
   </ 
  script> 
 
   < 
  style> 
 
   </ 
  style> 
 
  all.vue 
  
    < 
   template> 
  
      < 
   div  
   class= 
   "tasks"> 
  
        < 
   span  
   class= 
   "no-task-tip" 
  
   v-show=" 
   ! 
   list.length">还没有添加任何任务</ 
   span> 
  
        < 
   ul  
   class= 
   "todo-list"> 
  
          < 
   li  
   class= 
   "todo" 
  
              : 
   class="{completed:  
   item. 
   isChecked}" 
  
   v-for="item  
   in filteredList"> 
  
            < 
   div  
   class= 
   "view"> 
  
              < 
   input  
   class= 
   "toggle" 
  
   type= 
   "checkbox" 
  
   v-model=" 
   item. 
   isChecked" /> 
  
              < 
   label>{{  
   item.title }}</ 
   label> 
  
              < 
   button @ 
   click=" 
   deleteTodo(item)" 
  
   class= 
   "destroy"></ 
   button> 
  
            </ 
   div> 
  
          </ 
   li> 
  
        </ 
   ul> 
  
      </ 
   div> 
  
    </ 
   template> 
  
    < 
   script> 
  
   export  
   default { 
  
      name:  
   'all', 
  
   data() { 
  
   return { 
  
        } 
  
      }, 
  
      props: [ 
   'list',  
   'visibility',  
   'filteredList'], 
  
      methods: { 
  
   deleteTodo( 
   todo) {  
   //删除任务 
  
   var index  
   =  
   this. 
   list. 
   indexOf(todo); 
  
   this. 
   list. 
   splice(index,  
   1); 
  
        }, 
  
      } 
  
    } 
  
    </ 
   script> 
  
    < 
   style  
   scoped> 
  
    </ 
   style>