The way to the font end: vue入门第二季

[JackWong992]

                ()

Vue入门第二季

---

lesson1_Vue.directive自定义指令 自定义指令中传递的三个参数 el: 指令所绑定的元素，可以用来直接操作DOM。 binding: 一个对象，包含指令的很多信息。 vnode: Vue编译生成的虚拟节点。

Vue.directive("jack" , function(el,binding){
 el.style = "color:" + binding.value;
});

el : 指令要绑定的元素 binding：是一个对象，里面还有自定义指令的相关信息 binding.value : 绑定的指令的具体值 binding.expression: 绑定的表达式值

binding的生命周期：
bind:function(){//被绑定
     console.log('1 - bind');
},
inserted:function(){//绑定到节点
      console.log('2 - inserted');
},
update:function(){//组件更新
      console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
      console.log('4 - componentUpdated');
},
unbind:function(){//解绑
      console.log('5 - bind');
}

---

lesson2_Vue.extend自定义无参数标签

<author></author>
<script type="text/javascript">
    var authorExtend = Vue,extend({
      template: "<p><a :href='authorUrl'>{{authorName}}</a></p>",
      data: function(){
      return{
          authorName: 'jack',
          authorUrl: 'http://www.taobao.com' 
        } 
  }
  });
  new authorExtend().$mount('author');
</script>

---

lesson_5：template制作模板的三种写法

• 直接写在选项里的模板 template: <h1 style="color: red;">我是选项模板</h1>
• 写在script标签里面的模板

  <script type="x-template" id="demo">
  <h2 style="color: red;">我是script模板</h2>
  </script>
  ....
  template: '#demo3'

• 直接写在template标签里面

  
  <template id="demo">
  <h2>你好，我是黑客</h2>
  </template>

.... template: '#demo'

---
#### lesson_5: component组件
自定义全局的组件：

html:

js: Vue.component('hello',{ template:<h1>你好啊</h1> }) var app= new Vue({ el:'#app', })

自定义局部组件：

html:

js: var app=new Vue({ el:'#app', components:{ ’hello’:{ template:<h1>你好啊</h1> } } })

组件和指令的区别：
组件注册是一个标签，而指令则是定义标签的一个属性。实际开发的过程中组件用的比较多，指令用的比较少，因为指令的封装不如组件。