Vue笔记-环境搭建、模板语法、计算属性、Class 与 Style 绑定

{{message.split(separator,howmany).reverse().join(‘’)}},（spilt:分割字符串,reverse:转置数组,join:返回一个字符串,该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。）

条件directives(指令)

v-if、v-else、v-else-if、v-show

if与show的差别：v-if是“真实的”条件呈现，因为它确保在切换期间正确地销毁和重新创建条件块中的事件监听器和子组件。

v-if也是惰性的:如果条件在初始渲染时为false，那么它将不做任何事情——直到条件第一次变为true时，条件块才会被渲染。

相比之下，v-show要简单得多——元素总是在不考虑初始条件的情况下呈现，只使用简单的基于css的切换。

一般来说，v-if具有较高的切换成本，而v-show具有较高的初始渲染成本。所以，如果你需要经常切换某些东西，最好选择v-show，如果条件在运行时不太可能改变，最好选择v-if。

自定义directives

指令文件：

import Vue from "vue";

// 注册一个全局自定义指令

Vue.directive('custom',{

//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。基于缓存

bind:function (el,binding) {

el.textContent = Math.pow(binding.value,2);//Math.pow返回value的2次幂

// var s=(binding.arg==='red'?'black':'red');

// el.style.color=s;

},

//所在组件的 VNode 更新时调用

update:function (el,binding) {

el.textContent = Math.pow(binding.value,3);

//var s=(binding.arg==='red'?'red':'black');

el.style.color=binding.arg;//为传入参数

}

//inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

//componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

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

})

/*el(可读可写)：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：

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 }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。 */

template中的语句：<div v-custom:[color]='2'></div>

提醒：要在APP.vue中事先导入指令import './components/custom_directive.js'

Vue基础-计算属性

应用场景：具有依赖关系的数据监听

作用：将计算得到的属性混合到Vue实例中。所有的getter和setter都将其上下文自动绑定到Vue实例。

注意，不应该使用箭头函数来定义计算属性(例如aDouble: () => this)。a * 2).原因是arrow函数绑定了父上下文，所以这不是你所期望的Vue实例。a没有定义。

计算得到的属性被缓存，并且仅在响应性依赖项更改时重新计算。请注意，如果某个依赖项超出了实例的范围(即非响应性)，则计算的属性将不会更新。

computed vs methods

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

计算属性VS侦听属性

当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch

计算属性的setter

下面这段是某教程上抄了一下的：

var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter， vm.name 和 vm.url 也会被对应更新 vm.site = 'zouzouzou; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);