Veeはエッセイを学ぶ(二)

19584 ワード

グローバルAPI
まず、グローバルAPIとは何ですか?グローバルAPIはコンストラクタではなく、まずグローバル変数を宣言するか、Vue上で直接いくつかの新しい機能を定義し、VueにはいくつかのグローバルAPIが内蔵されている.directiveは、コンストラクタの外部でVueが提供するAPI関数で新しい機能を定義することを簡単に書きます.
Vue.义齿

<body>
{% verbatim %}
<div id="app">
  <div v-huang="color">{
     { num }}div>
    <p><button @click="add">ADDbutton>p>
div>

{% endverbatim %}
body>
<script>
    Vue.directive('huang',function (el,binding) {
       
        //    
        console.log(el);
        //obj={name: "huang", rawName: "v-huang", value: "red", expression: "color", modifiers: {…}, …}
        console.log(binding);
        //huang
        console.log(binding.name);
        //red
        console.log(binding.value);
        //color
        console.log(binding.expression);
        el.style = 'color:'+binding.value;
    });
    new Vue({
       
  el: '#app',
  data: {
       
	num:10,
    color:'red'
  },
    methods:{
       
      add:function () {
       
          this.num++;
      }
    }
});
script>

自定义指令的生命周期

自定义指令有五个生命周期(也叫钩子函数)，分别是bind，inserted，update，componentUpdated，unbind

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用(父节点存在即可调用，不存在于document中)。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化，通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。

<body>
{% verbatim %}
<div id="app">
  <div v-huang="color">{
     { num }}div>
    <p><button @click="add">ADDbutton>p>
div>
<p>
    <button onclick="unbind()">  button>
p>
{% endverbatim %}
body>
<script>
    function unbind(){
       
        app.$destroy();
    }
    Vue.directive('huang',{
       
        bind:function (el,binding) {
       //   
            console.log('1 - bind');
            el.style = 'color:'+binding.value;
        },
        inserted:function () {
       //     
            console.log('2 - inserted');
        },
        update:function () {
       //    
            console.log('3 - update');
        },
        componentUpdated:function () {
       //      
            console.log('4 - componentUpdated');
        },
        unbind:function () {
       //  
            console.log('5 - unbind');
        }
    });
    new Vue({
       
  el: '#app',
  data: {
       
	num:10,
    color:'red'
  },
    methods:{
       
      add:function () {
       
          this.num++;
      }
    }
});
script>

Vue.extendコンストラクタの延長
まず、Vueとは何ですか.extend? Vue.extendは、「拡張インスタンスコンストラクタ」、すなわち、一部のオプションが予め設定されたVueインスタンスコンストラクタを返し、常にVueにサービスする.componentはコンポーネントを生成するために使用されます.テンプレートでコンポーネント名がラベルとして使用されるカスタム要素に遭遇すると、自動的に「拡張インスタンスコンストラクタ」が呼び出されてコンポーネントインスタンスが生産され、カスタム要素にマウントされることを簡単に理解できます.

<body>
{% verbatim %}

    <div id="author">div>
{% endverbatim %}
body>
<script>
    var authorExtend = Vue.extend({
       
        template:"{
{ authorName }}
",
        data:function () {
       
            return{
       
                authorName:'huangyongpeng',
                authorURL:'http://www.baidu.com'
            }
        }
    });
    new authorExtend().$mount('#author');

script>

Vue学習入門---todoListケースを実現

[基礎] ファイルハンドル