欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue-笔记(3)

程序员文章站 2022-03-29 09:21:44
...

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> 

 

相关标签: Vue