Vue-笔记(3)

1、事件绑定机制,为元素指定处理函数时,加个小括号就可以给函数传参了。
2、数组的新方法
    forEach   some   filter   findIndex
    都会对数组中的每一项,进行遍历,执行相关的操作;
(1).sonme()方法

array.some(function(currentValue,index,arr),thisValue)

    some() --> 会依次执行数组的每个元素,用于检测数组中的元素是否满足指定条件(函数提供)。
                如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
                如果没有满足条件的元素,则返回false。
                不会对空数组进行检测。
                不会改变原始数组。
(2).splice()方法

arrayObject.splice(index,howmany,item1,.....,itemX)

    splice() --> 向/从数组中添加/删除项目,然后返回被删除的项目。
                该方法会改变原始数组。
(3).forEach()方法

array.forEach(function(currentValue, index, arr), thisValue)

    forEach() --> 用于调用数组的每个元素,并将元素传递给回调函数。
                 对于空数组是不会执行回调函数的。
(4).filter()方法

array.filter(function(currentValue,index,arr), thisValue)

    filter() --> 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
                 不会对空数组进行检测。
                 不会改变原始数组。
3、ES6中,为字符串提供了一个新方法,叫做  String.prototype.includes('要包含的字符串')
    如果包含,则返回 true ,否则返回 false
4、自定义过滤器
    

Vue.filter('过滤器名称', function (参数1[, 参数2 = "",...]) {
        ...
});

    参数1 --> 已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
5、自定义按键修饰符
    如:

Vue.config.keyCodes.f2 = 113;

6、自定义指令
    如:

Vue.directive('focus', {
    bind: function (el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
        // 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象
        // 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用
        //  因为,一个元素,只有插入DOM之后,才能获取焦点
        // el.focus()
    },
    inserted: function (el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
        el.focus()
        // 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效
    },
    updated: function (el) {  // 当VNode更新的时候,会执行 updated, 可能会触发多次

    }
});

7、vue-resource
    (1)get请求

 // 当发起get请求之后, 通过 .then 来设置成功的回调函数
this.$http.get(url).then(function (result) {
    // 通过 result.body 拿到服务器返回的成功的数据
});

    (2)post请求    application/x-wwww-form-urlencoded

// 手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了。
// 通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post(url, {}, { emulateJSON: true }).then(result => {
    ...
});

    (3)JSONP请求

// 手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了。
// 通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.jsonp(url).then(result => {
    ...
});

8、客户端JSONP页面

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<body>
      <script>
           function showInfo123(data) { ... }
      </script>

    <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
</body> 
发布了76 篇原创文章 · 获赞 26 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/qq_29326717/article/details/93372510