VUE基础知识学习

1.插值表达式

{{}}

2.解决插值表达式闪动问题
使用指令v-cloak
填写样式

	[v-cloak]: {
		display: none;
	}

给插值表达式所在的标签添加v-cloak指令

	<div v-cloak>{{msg}}</div>

3.数据绑定指令

1. 数据绑定：将数据填充到标签中

* v-text = 'data' 
* v-html = 'data' :有风险，可能xss攻击
* v-pre :跳过编译
* v-once:如果显示的信息后续不再需要修改，可以使用，可以提高性能

2. 双向数据绑定

* v-modle = 'data' 一般用于表单控件。
* 表单域修饰符
	number：转化为数值
	trim：去掉开始和结束的空格
	lazy：将input事件切换为change事件

4.事件指令

1. v-on

* 点击事件 v-on:click='clickfn' 可简写为@click='clickfn()'
* v-on:change='changefn' @change='changefn()'

2. 事件函数参数传递

* 如果事件直接绑定函数名称，那么默认传递事件对象为参数
* 如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行传递，并且名称必须为$event

3. 事件修饰符

* .stop 阻止冒泡 <a v-on:click.stop='clickfn'></a>
* .prevent 阻止默认兴文 <a v-on:click.prevent='clickfn'></a>

4. 按键修饰符

* .enter 回车键 <input v-on:keyup.enter='clickfn' >
* .delete 删除键 <input v-on:keyup.delete='clickfn' >

5. 自定义按键修饰符

* 全局config.keyCodes对象
	Vue.config.keyCodes.f1 = 112
	112必须是事件对象中keycode中的值

5.属性绑定

1. v-bind指令

* 用法 <a v-bind='url'></a>
* 简写 <a :bind='url'></a>

2. class样式处理

* 对象语法 
	<div v-bind:class="{ active: isActive }"></div> 
	通过修改isActive的值来控制class属性的值，true或false
* 数组语法 
	<div v-bind:class="[activeClass, errorClass]"></div> 
	通过修改变量activeClass，errorClass的值改变class属性，activeClass='active'
* 样式绑定细节
	1. 对象绑定和数组绑定可以结合使用
		<div v-bind:class="[activeClass, errorClass, {test: isTest}]"></div>。
	2. class绑定的值可以简化操作
		可以在data中定义一个数组或者对象绑定到class属性上。
	3. 默认的class如何处理
		默认的class会保留。

3. style样式处理(内联样式)

* 对象语法 
	<div v-bind:style="{ color: activeColor,fontSize: fontSize }"></div> 
	通过修改activeColor和fontSize的值来控制style
* 数组语法 
	<div v-bind:style="[baseStyles, overridingStyles]"></div> 
	通过修改变量baseStyles，overridingStyles对象属性改变style

6.分支循环结构

1. 分支解构

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-if控制元素是否渲染到页面
v-show控制元素是否显示
2. 循环v-for

<!-- key的作用是帮助vue区分不同的元素，提高性能  -->
<!-- 遍历数组 -->
<li :key='item.id' v-for='(item,index) in list'>{{item}}+"------"+{{index}}</li>
<!-- 遍历对象 -->
<li :key='key' v-for='(value, key, index) in obj'>{{key}}+"------"+{{value}}+"------"+{{index}}</li>
<!-- v-if和v-for结合使用 -->
<li :key='key' v-if='value==2' v-for='(value, key, index) in obj'>{{key}}+"------"+{{value}}+"------"+{{index}}</li>

7.自定义指令

1. 不带参数自定义指令

* 语法规则

Vue.directive('focus' {
	inserted: function(el){
		//获取元素焦点
		el.focus();
	}
})

* 用法

<input type='text' v-focus>

2. 带参数自定义指令

* 语法规则

Vue.directive('color' {
	inserted: function(el,binding){
		el.style.backagroundColor = binding.value.color;
	}
})

* 用法

<input type='text' v-color='{ color: 'pink' }'>

3. 局部自定义指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

4. 自定义指令钩子函数

* bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
* inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
* update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
	指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
* componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
* unbind：只调用一次，指令与元素解绑时调用。

5. 钩子函数的参数

* 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 钩子中可用。

8.计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

1. 用法

<p>Computed reversed message: "{{ reversedMessage }}"</p>

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
}

9.侦听器

1. 应用场景
   数据变化时执行异步或者开销较大的操作
2. 用法

data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
	// 如果 `question` 发生改变，这个函数就会运行
	question: function (newQuestion, oldQuestion) {
	  this.answer = 'Waiting for you to stop typing...'
	  this.debouncedGetAnswer()
	}
}

10.过滤器

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

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
过滤器可以串联：
{{ message | filterA | filterB }}
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。
然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数

11.生命周期

1. 挂载
   • beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用
   • created 在市里创建完成后被立即调用
   • beforeMount 在挂载开始之前被调用
   • mounted el被新创建的vm.$el替换，并挂载到实例上去之后被调用
2. 更新
   • beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前
   • updated 由于数据更改导致的虚拟DOM重新渲染和打补丁后调用
3. 销毁
   • beforeDestory 实例销毁之前调用
   • destoryed 实例销毁之后调用

12.补充

1. 数组

* 变异方法 (mutation method)
	Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
	push()
	pop()
	shift()
	unshift()
	splice()
	sort()
	reverse()
* 替换数组
	filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。
Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
2. 修改响应式数据

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
//也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)
/*
参数一表示要处理的数组或对象
参数二表示要处理的元素的下表或对象属性名
参数三表示新的值
*/