Vue 学习第二天 代码笔记

1 简单的品牌管理列表

 在之后的学习 都会以该项目作为学习基础

<div id="app">
    <label>
      ID
      <input type="number" v-model="id">
    </label>
    <label>
      NAME
      <input type="text" v-model="name">
    </label>
    <input type="button" value="添加" @click="add">
    <label>
      搜索
      <input type="text" v-model="sreachKey" autofocus="true">
    </label>
    <div>
      <!-- 在之前，我们使用v-for循环中的数据是直接从vm中的data里的list直接渲染出来de -->
      <!-- 现在我们定义了一个 sreach 方法，通过将搜索的字符作为参数的形式传递给该方法-->
      <!-- 在该方法内部我们通过循环进行比对就可以得出响应的数据 并返回出来 在通过v-for循环该数据就可以渲染我们想要的数据 -->
      <div v-for="(item, index) in sreach(sreachKey)" :key="item.id">{{item.id}} {{item.name}} {{item.create}} <input
          type="button" value="删除" @click="del(index)"></div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        id: "",
        name: "",
        sreachKey: "",
        list: [
          { id: 1, name: "奔驰", create: "2019-04-09 15:12:42" },
          { id: 2, name: "宝马", create: "2019-04-09 15:12:42" },
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name, create: new Date() });
          this.id = parseInt(this.id) + 1;
        },
        del(index) {
          console.log(index);
          this.list.splice(index, 1);
        },
        sreach(key) {
          if (key == "") return this.list;
          var data = [];
          // this.list.forEach(element => {
          //   if (element.name.indexOf(key) !== -1) {
          //     data.push(element);
          //   }
          // });
          // return data;
          return this.list.filter(item => {
            if (item.name.includes(key)) { return item };
          })
        }
      },
    })
  </script>

2 Vue中的过滤器

<div id="app">
    <p>{{msg | msgformat("哈哈哈")}}</p>
  </div>
  <script>
    //定义一个msg的过滤器
    Vue.filter("msgformat", (msg,replaceText) => {
        //在replace 方法，第一个参数除了可以写一个字符串 还可以定义一个正则
       return msg.replace(/喜欢/g, replaceText);
    })
    var vm = new Vue({
      el: "#app",
      data: {
        msg: "我以前很喜欢你，但是现在不喜欢你了。我现在喜欢你大爷了！！！！",
      },
      methods: {

      },
    })
  </script>

3 使用过滤对品牌管理列表的时间栏进行格式化

 下面的代码中， 还有关于 Vue 的指令 和键盘码控制 

<div id="app">
    <label>
      ID
      <input type="number" v-model="id">
    </label>
    <label>
      NAME
       <!-- 给name的输入框加上@keyup.f2 就可以实现当焦点在输入框时 按f2 可以实现添加功能-->
      <input type="text" v-model="name" @keyup.f2="add">
    </label>
    <input type="button" value="添加" @click="add">
    <label>
      搜索
      <input type="text" v-model="sreachKey" v-focus v-color="'blue'">
    </label>
    <div>
      <!-- 在之前，我们使用v-for循环中的数据是直接从vm中的data里的list直接渲染出来de -->
      <!-- 现在我们定义了一个 sreach 方法，通过将搜索的字符作为参数的形式传递给该方法-->
      <!-- 在该方法内部我们通过循环进行比对就可以得出响应的数据 并返回出来 在通过v-for循环该数据就可以渲染我们想要的数据 -->
      <div v-for="(item, index) in sreach(sreachKey)" :key="item.id">{{item.id}} {{item.name}}
        {{ item.create | formatTT() }}
        <input type="button" value="删除" @click="del(index)">
      </div>
    </div>
  </div>
  <div id="app2">
    <p v-fontweight="800" v-color="'red'" v-fontsize="80">{{ dt | formatTT() }}</p>
  </div>
  <script>
    //全部过滤器
    Vue.filter("formatTT", (date, format = '') => {
      //根据给定的字符串，得到特定的时间
      var date = new Date(date);
      var year = date.getFullYear();
      var month = (date.getMonth() + 1).toString().padStart(2, "0");
      //知识点补充 ， ES6中字符串的新方法 padStart(maxLength,padStr) 最大长度不足 用padStr填充
      var day = (date.getDate()).toString().padStart(2, "0");

      if (format.toLowerCase() == "yyyy-mm-dd") {
        return `${year}-${month}-${day}`;
      } else {
        var hh = (date.getHours()).toString().padStart(2, "0");
        var mm = (date.getMinutes()).toString().padStart(2, "0");
        var ss = (date.getSeconds()).toString().padStart(2, "0");
        return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
      }
    })
    //自定义全局按键修饰符
    Vue.config.keyCodes = {
      f2: 113,
    };

    //使用Vue.directive(id,[options]) 定义全局的指令 如focus
    //其中 参数1 指令的名称，注意在定义的时候，指令的名称前面不要加v- 前缀
    //但是在调用的时候，必须在指令名称前面加上v-前缀调用 <input type="text"  v-focus>
    //参数 2 是一个对象，这个对象身上 有一个相关的指令函数，这些函数可以在特定的阶段 执行相关的操作 如生命周期
    Vue.directive('focus', {
      //注意 在每个函数中 第一个参数永远是el 表示 被绑定了指令的那个元素，这个el是一个原生的js对象
      bind(el) {
        //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
        //在元素 刚绑定了指令的时候， 还没有插入到内存的DOM树中取。这个时候 调用focus方法是没有作用的
        //因为一个元素只有在插入DOM之后才能获取焦点
        // el.focus();
      },
      inserted(el) {
        //当元素插入到 DOM中的时候， 会执行inserted函数【触发一次】
        //与js行为有关的操作，最好在inserted中去执行， 防止这个js行为不生效
        el.focus();
      },
      updated() {
        //当Vnode更新的时候，会执行updated 可能会触发多次
      },
    })

    Vue.directive("color", {
      //样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中qu去，这个元素一定会有一个行内样式
      //将来元素肯定会显示在页面上，这时候，浏览器的渲染引擎，必然会解析样式，应用给这个元素
      bind(el, binder) {
        //参数2 代表元素绑定的指令中携带的参数。
        //与样式相关的操作 一般都可以在bind中执行。 
        el.style.color = binder.value;
        console.log(binder);
      }
    })
    var vm = new Vue({
      el: "#app",
      data: {
        id: "",
        name: "",
        sreachKey: "",
        list: [
          { id: 1, name: "奔驰", create: "2019-04-09 15:12:42" },
          { id: 2, name: "宝马", create: "2019-04-09 15:12:42" },
        ]
      },
      methods: {
        add() {
          this.list.push({ id: this.id, name: this.name, create: new Date() });
          this.id = parseInt(this.id) + 1;
        },
        del(index) {
          console.log(index);
          this.list.splice(index, 1);
        },
        sreach(key) {
          if (key == "") return this.list;
          var data = [];
          // this.list.forEach(element => {
          //   if (element.name.indexOf(key) !== -1) {
          //     data.push(element);
          //   }
          // });
          // return data;
          return this.list.filter(item => {
            if (item.name.includes(key)) { return item };
          })
        }
      },
    })
    var vm = new Vue({
      el: "#app2",
      data: {
        dt: new Date(),
      },
      methods: {

      },
      //私有过滤器
      filters: {
        //定义私有过滤器的要求有两个 【过滤器名称 和处理函数  】
        //过滤在调用的时候 采用的是就近原则 如果私有过滤器和全局过滤器重名， 则会选择私有过滤器优先调用
        formatTT(date, format = "") {
          //根据给定的字符串，得到特定的时间
          var date = new Date(date);
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          if (format.toLowerCase() == "yyyy-mm-dd") {
            return `${year}-${month}-${day}`;
          } else {
            var hh = date.getHours();
            var mm = date.getMinutes();
            var ss = date.getSeconds();
            return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
          }
        }
      },
      directives: {
        fontweight: {
          bind(el, bindding) {
            el.style.fontWeight = bindding.value
          }
        },
        // 指令的简写方式 该简写 等同于在 bind 和update 中都写了代码
        fontsize: (el, bindding) => {
          el.style.fontSize = parseInt(bindding.value) + "px"
        }
      }
    })
  </script>

4 Vue中的实例生命周期函数

<div id="app">
    <h3 id="h3">{{msg}}</h3>
    <input type="button" value="点我" @click="change">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg: "ok"

      },
      methods: {
        test() {
          console.log("我已经准备好了");
        },
        change() {
          this.msg = "change";
        }
      },
      beforeCreate() {//这是第一个生命周期函数，表示实例完成创建之前，就会执行
        // console.log(this.msg)//undefined
        // 注意在beforeCreate()执行时，data和methods中的数据还没有初始化
      },
      created() {//这是第二个生命周期函数
        console.log(this.msg);//ok
        this.test();//我已经准备好了
        //在created()执行的时候，data和methods的数据已经初始化好
        //如果要使用data和methods中的数据最早只能在该周期函数中进行调用
      },
      beforeMount() {//这是第三个生命周期函数 表示模板在内存中编辑完成了，但是尚未把模板渲染到页面中
        console.log(document.getElementById("h3").innerText);// {{msg}}
        //在beforeMount() 执行时， 页面中的元素，还没有真正被替换过来，只是之前写的模板字符串
      },
      mounted() {//这是第四个生命周期函数 表示内存中的模板已经真实的挂载到了页面上，用户可以看到渲染好的页面了
        console.log(document.getElementById("h3").innerText);//ok
        //mounted()是实例创建期间的最后一个函数， 当执行完mounted()以后，实例就已经完全创建好了，如果没有后入操作的话， 将会在内存存留
      },
      //下面的是运行的事件
      beforeUpdate() {//表示我们的界面还没有被更新【数据是被更新了的】
        console.log("界面上元素的内容" + document.getElementById("h3").innerText);//界面上元素的内容ok
        console.log("data中的数据" + this.msg);//data中的数据change
        //结论：当执行beforeUpdate()时候，页面中显示的数据，依旧是旧的，此时data数据是最新的，页面尚未和最新的data数据保持同步
      },
      updated() {
        console.log("界面上元素的内容" + document.getElementById("h3").innerText);//界面上元素的内容change
        console.log("data中的数据" + this.msg);//data中的数据change
        //结论：当执行updated()时候，页面中显示的数据，和data数据保持同步
      },
      beforeDestroy() {
        //当运行beforeDestroy()时。vue实例已经从运行阶段，进入到了销毁阶段，
        //此时在vue实例中的所有数据都处于可用状态，还没有真正销毁
      },
      destroyed() {
        //当destroyed()执行时，vue实例已经销毁，实例中的所有数据都不可用了
      },
    })

5 Vue中 发送网络请求

如果想要发送Vue网络请求，我们需要使用v-resource来进行（如jQuery中的$.ajax一样）

要引入一个v-resource文件

  <script src=" https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

<div id="app">
    <input type="button" value="G请求" @click="request">
    <input type="button" value="P请求" @click="postreq">
    <input type="button" value="J请求" @click="jsonpreq">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
      },
      methods: {
        request() {
          this.$http.get("http:localhost:8081").then((result) => {
            console.log(result);
          });
        },
        postreq() {
          this.$http.post('http:localhost:8081/reg',{name:'wwwww',pwd:"qeq"}).then(res => {
            console.log(res);
          })
        },
        jsonpreq(){
          this.$http.jsonp('http:localhost:8081/jsonp').then(res => {
            console.log(res);
          })
        }
      },
    })
  </script>

6 使用v-resource来改造品牌管理列表 实现MVVM

<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, index) 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>
    var vm = new Vue({
      el: "#app",
        //在vm实例中 有一个属性叫http 是控制请求的配置 
      http: {
        root: "http://127.0.0.1:8081/",//访问的地址配置 在http中配置了root后 在发送请求时 就可以不写请求根地址，只需要将接口写对 即可正确访问 
        //原写法 ：this.$http.post("http://127.0.0.1:8081/").then()
        //配置后 ：this.$http.post().then()
        emulateJSON: true
      },
      data: {
        name: "",
        interface: {
          all: "all",
          add: "add",
          del: "del"
        },
        list: [
          { id: 1, name: "五菱", ctime: new Date() },
          { id: 2, name: "面包", ctime: new Date() },
        ]
      },
      methods: {
        add() {
          this.$http.post(this.interface.add, { name: this.name }).then(res => {
            console.log(res);
            var data = res.body;
            if (data.status == 0) {
              this.getAll();
            } else {
              alert(data)
            }
          })
        },
        getAll() {
          //因为引入vue-resource 可以直接使用this.$http进行访问
          this.$http.get(this.interface.all).then(res => {
            console.log(res);
            var data = res.body;
            if (data.status == 0) {
              this.list = data.msg
            } else {
              alert(data)
            }
          })
        },
        del(id) {
          this.$http.post(this.interface.del, { id: id }).then(res => {
            console.log(res);
            var data = res.body;
            if (data.status == 0) {
              alert(data.msg)
              this.getAll();
            } else {
              alert(data)
            }
          })
        },
      },

      created() {
        this.getAll();
      },
    })
  </script>