（Sjran）vue.js第六天学习_idnamectimeoperation-CSDN博客

本文链接：https://blog.csdn.net/qq_45506707/article/details/100029794

1.vue 实例的生命周期
（1）在beforeCreate中data和methods数据并没有被初始化
（2）在created中data和methods都已经被初始化
（3）在beforeMount中模板已经在内存中编辑好了，但并未渲染到页面中，只是之前写的一些模板字符串
（4）在mounted中实例已经完全被创建好了，内存中的模板已经挂载到页面上了
（5）在beforeupdate中页面显示数据是旧的但data数据是新的尚未与页面保持同步
（6）在updata中页面与数据保持同步都是最新的
2.vue-resource 实现get post jsonp 请求
（从数据库中获取列表完成增删改查功能）

<!DOCTYPE html>
<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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-resource-1.3.4.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
  
</head>
  
   <body>
     <div id="app">

      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
          
          <label>
            Name:
            <input type="text" v-model="name" class="form-control">
          </label>
          <input type="button" value="添加" @click="add" class="btn btn-primary">



        </div>
      </div>

      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td>
              <a href="" @click.prevent='del(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>

      </table>

     </div>
     <script>
       Vue.http.options.root = 'http://vue.studyit.io/'
       Vue.http.options.emulateJSON=true;
       var vm = new Vue({
         el:'#app',
         data:{
           name:'',
           list:[
             {id:1 , name:'五菱宏光' , ctime:new Date()},
             {id:2 , name:'宝马' , ctime:new Date()}
           ]
         },
         created(){
           this.getalllist()
         },
         methods:{
           add(){
            this.$http.post('api/addproduct',{name: this.name},{})
            .then(result=>{
              if(result.body.status===0){
                this.getalllist()
                this.name=''

              }else{
                alert('添加失败')
              }
            })

           },
           getalllist(){
             this.$http.get('api/getprodlist').then(result=>{
               var result = result.body
               if(result.status === 0){
                this.list=result.message
               }else{
                 alert('获取数据失败')
               }
             })
           },
           del(){
             this.$http.get('api/delproduct'+id).then(result=>{
               if(result.body.status===0){
                 this.getalllist()
               }else{
                 alert('删除失败')
               }
             })

           }
         }
       })
     </script>
   </body>
  

</html>