前端之Vue学习（二）

品牌列表案例【02】

品牌列表的添加

品牌列表的删除

• some
• findIndex 索引

关键字搜索

• foreach
• filter
  注意： some findIndex forEach filter 这些都属于数组的新方法
  都会对数组的每一项，进行遍历，执行相关操作

过滤器的使用

按键码修饰符

自定义指令

• 全局指令——文本框聚焦
• 局部指令

过滤器

• 概念：vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。
• 应用：mustachc插值 和 v-bind表达式
  过滤器应该被添加在js表达式的尾部，由“管道”符指示
• 过滤器的调用
  {{ name | namepot }}
• 过滤器的定义语法
  Vue.filter('过滤器的名称', function(){})
  过滤器中的 function ，第一个参数已经被规定死了，永远都是 过滤器 管道符前面传递过来的数据

    Vue.filter('过滤器的名称', function(data){
        return data+'123'
    })

私有过滤器

全局过滤器

注意： 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器

按键码修饰符

• keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
  使用 keyCode attribute 也是允许的：

自定义指令

概念与调用

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
举个聚焦输入框的例子，如下：
当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

• 注册一个全局自定义指令 v-focus

    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
        // 聚焦元素
        el.focus()
        }
    })

• 如果想注册局部指令，组件中也接受一个 directives 的选项：

    directives: {
        focus: {
        // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }

• 然后你可以在模板中任何元素上使用新的 v-focus property，如下：

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  在内存中调用（和JS有关的行为。。。。）
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  在页面中调用（样式。。。。）
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

1. el：指令所绑定的元素，可以用来直接操作 DOM。
2. binding：一个对象，包含以下 property：
   • name：指令名，不包括 v- 前缀。
   • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
   • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
   • expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
   • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
   • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
3. vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
4. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
   除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

 Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

Vue 实例的生命周期

生命周期的概念

从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期

生命周期钩子

定义：

生命周期事件or 生命周期函数 的别名

主要生命周期函数分类

• 创建期间的生命周期函数：
  • beforeCreate：实例刚在内存中被创建出来，此时还没有初始化data和methods属性
  • created：实例已经在内存中创建OK，此时data和methods也已经创建OK，但还没有开始编译模板
  • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  • mounted：此时，已经将编译好的模板挂载到页面指定的容器中显示
    **注意：**如果要通过某些插件操作页面上的DOM节点，最早在mounted中进行；
    只要执行完了mounted，就表示整个Vue实例已经初始化完毕了；
    此时，组件已经完全脱离了创建阶段，进入到了运行阶段
• 运行期间的生命周期函数：
  • beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
  • updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了
• 销毁期间的生命周期函数：
  • beforeDestroy：实例销毁之前调用，这一步，实例仍然完全可用
  • destroyeed：Vue实例销毁后调用，调用后，Vue实例知指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

axios

导入

• 联网时axios在线地址：（cdn）
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• npm下载
  npm install --save axios
• 语法

1. get
   axios.get(地址?key=value&key2=values).then(function(response){} , function(err){})
2. post
   axios.post(地址, {key:value,key2:value2}).then(function(response){} , function(err){})

vue-resource

get

post

jsonp