前端学习--Vue.js Day2

1、反馈:

2、品牌案例
完成品牌列表的添加功能
（1）Vue.js中不建议用jQuery

根据关键字实现数组的过滤

<template>
  <!--品牌案例-->
  <div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
        <br>
      </div>
      <div class="panel-body form-inline" :style="{'margin-left':'20px'}">
        <label>
          ID:
          <input type="text" class="form-control" v-model="id">
        </label>
        &nbsp;&nbsp;
        <label>
          Name:
          <input type="text" class="form-control" v-model="name">
        </label>
        &nbsp;&nbsp;
        <button class="btn btn-primary" @click="add">添加</button>
        &nbsp;&nbsp;
        <label>
          搜索名称关键字:
          <input type="text" class="form-control" v-model="keywords">
        </label>
        <!--<button class="btn btn-primary" @click="">搜索</button>-->
      </div>
    </div>
    <br>
    <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>
      <!--search():自定义的方法;该方法返回一个数组-->
      <tr v-for="item in search(keywords)" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.ctime | dataFormat("yyyy-mm-ddd")}}</td>
        <td><a href="">删除</a></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

  import Vue from 'vue'
  //全局的过滤器，进行时间的格式化
  Vue.filter('dataFormat', function (datastr, pattern = 'yyyy-mm-dd') {
    //根据给定的时间字符串，得到特定的时间
    var dt = new Date(datastr);
    //输出 yyyy-mm-dd
    var y = dt.getFullYear();
    var m = dt.getMonth() + 1;
    var d = dt.getDate();
    if(pattern.toLowerCase() === 'yyyy-mm-dd'){
      //要求输出年月日即可
      return y + "-" + m + "-" + d;
    }else{
      var h = dt.getHours();
      var min = dt.getMinutes();
      var s = dt.getSeconds();
      //输出全部时间
      return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
    }
  })

  export default {
    name: 'day',
    data () {
      return {
        id: '',
        name: '',
        keywords: '',
        list: [
          {id: 1, name: '奔驰', ctime: new Date()},
          {id: 2, name: '宝马', ctime: new Date()},
        ]
      }
    },
    methods: {

      //品牌列表的添加功能
      add () {
        //创建一个对象，将表单中的数据赋值
        var car = {
          id: this.id,
          name: this.name,
          ctime: new Date()
        };
        //将创建好的对象添加到list数组中
        this.list.push(car);
        this.id = '';
        this.name = '';
      },

      //根据关键字实现数组的过滤
      //方法1：
      search (keywords) {
        var newList = []
          //forEach:遍历数组
          this.list.forEach(item =>{
            //将keywords这个字符串与item.name一一匹配，若找不到返回-1
            //注：如果keywords为空，返回0
            if(item.name.indexOf(keywords) != -1){
              newList.push(item)
            }
          })
        return newList
      }
    }
  }
</script>

3、Vue中全局过滤器的基本使用
Vue中全局过滤器（即所有的实例对象都能使用），类似全局组件

过滤器:就是对文本修改，形成自己的定义输出；过滤器是文本输出前最后一层处理
注意：过滤器不会修改原数据，只是输出的结果被修饰了
“|”:这条竖就是管道符

即将name作为第一个参数传给function，在函数内对数据进行操作

<template>

  <!--Vue中全局过滤器的基本使用-->
  <div>
    <p>{{message | myfilter("她+123") | test("你+456")}}</p>
  </div>
</template>
<script>
  import Vue from 'vue'
//可以有多个过滤器
  Vue.filter('myfilter', function(message, arg){
    return message.replace(/我/g, arg)
  })

  Vue.filter('test', function(message, arg){
    return message = message + "======" + arg
  })

  export default {
    data(){
      return{
        message:"我是一个，我是一块，我是一堆",
        arg:''
      }
    }
  }
</script> 

4、过滤器–定义私有过滤器（局部）


5、字符串的padStart方法使用（ES6）
当时间为1，需要展示成01时，可以用这个方法去填充。记住：数字先转为字符串形式

6、自定义按键修饰符
//自定义全局按键修饰符

Vue.config.keyCodes.f2 = 113;

7、指令-自定义全局指令让文本框获取焦点（要在元素插入DOM中才能获取焦点）

//定义全局指令，其中参数1：指令名称（定义时不需要加v-前缀，调用时需要）
//参数2：对象（有指令相关的函数，这些函数可以在特定的时间进行操作）
Vue.directive('focus', {
  //在元素刚绑定指令的时候，还没有插入DOM中，这时调用focus方法无作用
  //因为一个元素只有插入DOM之后才能获取焦点
  bind:function (el) {
  //  每当指令绑定到元素上的时候，会立即指向这个函数，只执行一次
  //  注意：在每一个函数中，第一个参数永远是el，表示被绑定的元素，
  //  这个元素是原生的js对象
    el.focus()  //js行为
  },
  //插入函数；inserted表示元素插入到DOM中的时候，会执行
  inserted:function (el) {
    //这时才能获取焦点
    //和JS行为有关的操作，最好子inserted中去执行，防止JS行为不生效
    el.focus()
  },
  //更改函数；当VNode更新时，会执行这个函数，可能触发多次
  update:function () {
  }
})

8、指令-使用钩子函数的第二个binding参数拿到传递的值

//自定义设置字体颜色
Vue.directive('color', {
  //当元素加载到内存中就会执行bind函数
  bind:function (el, binding) {
    //为什么可以写在bind中？
    //当DOM元素当有样式时，浏览器在解释DOM元素时会自动带上其样式
    //样式：只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
    //将来元素肯定会显示到页面中，这时候浏览器的渲染引擎必然会解析样式，应用给这个元素
    el.style.color = binding.value
  //  和样式相关的操作，一般都可以在bind中执行
  }
})

<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">

9、指令-定义私有指令

指令函数的简写形式

10、生命周期函数-组件创建期间的4个钩子函数

生命周期就是一堆事件，要在页面中显示真正的内容需要Mount（挂载）
beforeMount：内存数据最新，页面的数据不是最新的
Mounted：页面中的（DOM）元素数据是最新的

beforeCreate () {
  //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
  // console.log(this.msg) //报错
  // this.show() //报错
//  注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据和函数都
//  还没有初始化
},
created () {
//  这是遇到的第二个生命周期函数
//   console.log(this.msg)
//   this.show()
//  在created中，data和methods都已经被初始化好了
//  如果要调用methods中的函数和data中的数据，最早，只能在created中操作
},
beforeMount () {
//  这是遇到的第三个生命周期函数
//  表示模板已经在内存中编译完成了，但尚未把模板渲染到页面中
//在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
},
mounted () {
  //  这是遇到的第四个生命周期函数
//  表示，内存中的模板，已经真实的挂载到了页面中
  //  用户已经可以看到渲染好的页面了
//  注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经
//  被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
}

11、生命周期函数-组件运行和销毁阶段的钩子函数





12、vue-resource发起get、post、jsonp请求

（1）导包（注意顺序）

：

Get请求：

Post请求：

jsonp请求:

13、结合Node手写JSONP服务器剖析JSONP原理
script标签不受跨域限制；JSONP：解决数据跨域传递