vue基础知识二

所有代码没有引入vue.js！！！！

vue实例化对象中的this指向

在vue中 this指向vue的实例化对象

const app = new Vue({
    el:"#app",
    data:{
        name:"张三"
    },
    methods:{
        tryThis(){
            console.log(this);
            console.log(this === app);  // true
        }
    }
})
console.log(app);

app实例化后 data和methods里面的属性 会直接整合到vue实例上

实例化对象上已经没有data和methods属性 取值时 只需要使用this进行取值

自定义指令

1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。

全局注册：

   Vue.directive('xxx', {
        inserted: function (el) {
           //指令属性
        }
    });

局部注册：

var app = new Vue({
    el: '#app',
    directives: {
        xxx: {
            //指令属性
        }
    }
});

2、钩子函数：

指令定义函数提供了几个钩子函数（可选）：

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

unbind：只调用一次， 指令与元素解绑时调用。

3、钩子函数的参数：(el, binding, vnode, oldVnode)

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.a.b，modifiers的值为{'a':true,'b':true}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

<div id="app" v-demo:foo.a.b="message"></div>
 
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
      console.log('bind');
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
});
new Vue({
  el: '#app',
  data: {
    message: 'hello!'
  }
});

 4、函数简写：大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

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

5.多值入参

我们可以通过 JavaScript 的对象字面量，为自定义指令一次性传入多个值。其实任意一个合法的 JavaScript 表达式都是支持的。

<div id="app3">
    <div v-deniro-directive2="{title:'物理学家新发现四起黑洞相撞事件',content:'物理学家探测到了它们向地球发来的引力波'}"></div>
</div>
<script>
Vue.directive('deniro-directive2', {
    bind: function (el, binding, vnode) {

        el.innerHTML =
            'title:' + binding.value.title + '<br>' +
            'content:' + binding.value.content + '<br>';
    }
});
var app3 = new Vue({
    el: '#app3',
    data: {
    }
});
</script>

 计算属性

为什么要使用计算属性

模板内的表达式通常用于简单的运算，当其过长或逻辑复复杂时，会变得难以维护

什么是计算属性
在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读

计算属性的用法

　　在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了
</div>
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

　　计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性;  二是计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据

   <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>
var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});
 
var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
            return app1.text.split('').reverse().join('');  //使用app1的数据进行计算
        }
    }
});

每一个计算属性都包含一个getter 和一个setter ，我们上面的两个示例都是计算属性的默认用法， 只是利用了getter 来读取。

在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

计算属性缓存
其实细心的话就会发现，调用methods里的方法也能实现和计算属性一样的效果，甚至有的方法还能接收参数，使用起来更加的灵活，既然使用methods就可以实现，那为什么还需要计算属性呢？原因就是计算属性是基于他的依赖缓存的。一个计算属性所依赖的数据发生变化时，他才会重新取值，
所以依赖的text只要不改变。计算属性也就不更新

computed：{
now：function（）
{
return Date.now()
}
}
这里的Date.now()不是响应式依赖，所以计算属性now 不会更新，但是methods则不同，只要重新渲染他就会被调用，因此函数也会被执行。
使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存