Vue组件实例

1.渲染多个元素/组件

效果如下：

template 中使用的 v-if 和 v-for

   
    

    
{{ item.name }}
    
    
No items found.
 
  

效果如下：

可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 Javascript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}

例子：输入value值，首个字母大写

 

    
    
{{ message | capitalize }}
  
  

效果如下：

效果如下：

比如想为网站的滚动事件添加一些行为，尤其是动画。已有的做法很多，但是代码和依赖最少的方式可能就是使用一个自定义指令创建一个钩子，在特定的滚动事件之后作处理。

官方文档详解：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

使用axios访问API

API 获取数据时的加载状态

获取价格信息

效果如下：