本文共 2672 字，大约阅读时间需要 8 分钟。

1. Vue模板语法

1.1v-cloak指令用法

1.插值表达式存在的问题：“闪动”

2.如何解决该问题：使用v-cloak指令

3.解决该问题的原理：先隐藏，替换好值之后再显示最终的值

示例：

[v-cloak] {
     display: none;}

   
      {
  { message }}
   

1.2数据绑定指令

1.2_1v-text 填充纯文本

示例：

   {
  {msg}}

1.2_2v-html 填充HTML片段

① 存在安全问题

② 本网站内部数据可以使用，来自第三方的数据不可以用 示例：

1.2_3v-pre 填充原始信息

① 显示原始信息，跳过编译过程（分析编译过程）

示例：

{
  { this will not be compiled }}

1.3 数据响应式

1.3_1v-once 只编译一次

① 显示内容之后不再具有响应式功能

②只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

   This will never change: {
  {msg}}
   
   
  
    
comment
  
    
{
  {msg}}
   
   
   
   
   
  
    
{
  {i}}
   

1.3_2v-model指令用法

双向数据绑定

Message is: {
  { message }}

1.4 事件绑定

1.4_1v-on指令用法

一般写法

简写

1.4_2 事件函数的调用方式

直接绑定函数名称

Hello

调用函数

Say hi

1.4_3事件函数参数传递

Say hi

这里的$event是固定写法，如果没有参数传递，那么默认第一个参数是$event，没有写$event也是。

1.4_4事件修饰符

stop 阻止冒泡

跳转

prevent 阻止默认行为

跳转

1.4_5按键修饰符

enter 回车键

esc 退出键

1.4_6 自定义按键修饰符

全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

1.5属性绑定

v-bind指令用法

跳转

缩写形式

跳转

1.6 样式绑定

1. class样式处理

对象语法

数组语法

2. style样式处理

对象语法

数组语法

1.7 分支循环结构

1.7_1 分支结构

v-if

v-else v-else-if v-show

1.7_2v-if与v-show的区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示（已经渲染到了页面）

1.7_3 循环结构

v-for遍历数组

{
  {item}} + '---' +{
  {index}}

（没写也没事，就是降低效率）key的作用：帮助Vue区分不同的元素，从而提高性能

{
  {item}} + '---' {
  {index}}

v-for遍历对象

v-if和v-for结合使用

1.8表单域修饰符

number：转化为数值

trim：去掉开始和结尾的空格 lazy : 将input事件切换为change事件，input事件是及时操作的，而change事件是鼠标失去失去焦点才启动，所以change事件比input事件慢，因而叫lazy

1.9自定义指令

1.9_1 自定义指令的语法规则（获取元素焦点）

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

1.9_2 自定义指令用法

1.9_3 带参数的自定义指令（改变元素背景色）

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

1.9_4 指令的用法

1.9_5局部指令

1.10计算属性

computed: {	reversedMessage: function () {	return this.msg.split('').reverse().join('')	}}

计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的

方法不存在缓存

1.11侦听器

watch: {	firstName: function(val){		// val表示变化之后的值		this.fullName = val + this.lastName;	},	lastName: function(val) {	this.fullName = this.firstName + val;	} }

1.12生命周期

① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。

② created 在实例创建完成后被立即调用。 ③ beforeMount 在挂载开始之前被调用。 ④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 ⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。 ⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 ⑦ beforeDestroy 实例销毁之前调用。 ⑧ destroyed 实例销毁后调用。

1.13数组相关API(响应式）

1. 变异方法(修改原有数据)
   push()
   pop()
   shift()
   unshift()
   splice()，从第几个开始删，删几个
   sort()
   reverse()
2. 替换数组(生成新的数组)
   filter()
   concat()
   slice()
3. 修改响应式数据
   ⚫ Vue.set(vm.items, indexOfItem, newValue)
   ⚫ vm.$set(vm.items, indexOfItem, newValue)
   ① 参数一表示要处理的数组名称
   ② 参数二表示要处理的数组的索引
   ③ 参数三表示要处理的数组的值

转载地址：http://bwmzi.baihongyu.com/