Vue.js基础知识

什么是Vue.js？

• Vue.js是目前最火的前端主流框架之一，和Angular、React一起，并成为前端三大框架。
• Vue.js是一套构建用户界面的框架，只关注视图层。

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目需要更换框架，则需要重新构建整个项目。
• 库/插件：提供一个小功能，对项目侵入性较小，可以随时切换的小部分模块。

MVC和MVVM区别

• MVC是后台的分层开发概念；

• MVVM是前端视图层的概念，MVVM把前端的视图层分为三部分：Model、View、ViewModel

  
  
  MVVM.png

Vue实例中MVVM对应的内容

//Vue实例所控制的这个元素（app），就是View
  
  {{ name }}

v-cloak

用于解决插值表达式闪烁的问题

  
  {{ name }}

v-text

• 用于渲染数据，同插值表达式一样，但是v-text默认没有闪烁问题
• v-text与插值表达式的不同点：

插值表达式可以渲染出来“我的名字是：”
我的名字式{{ name }}
v-text无法渲染“我的名字是”，而是加载完成后直接覆盖标签内的文本
我的名字是：

v-html

可以输出html元素,v-text和插值表达式输出的是普通字符串

  
  {{ title }}
  
  

v-bind

Vue提供的用于绑定属性的指令，可以简写为 :要绑定的属性，v-bind中可以写合法的表达式

v-on

Vue中提供的事件绑定机制,可以简写为 @事件名
methids为存放方法的对象

  
  按钮
  按钮

Vue实例中想要获取data上的数据，或者调用methods中的方法，必须通过 this.数据名/方法名 来进行访问，这里的this表示new出来的vm实例对象

  
  按钮

事件修饰符(可串写)

• .stop 阻止冒泡(冒泡是从里到外，捕获是从外到里)

 
  按钮
  

• .prevent 阻止默认事件

  按钮

• .capture 添加事件侦听器时使用事件捕获模式(冒泡是从里到外，捕获是从外到里)

 
  按钮
 

• .self 只当事件在元素本身（比如不是子元素）触发时回调

 
  按钮
 

• .once 事件只触发一次

按钮

v-model和双向数据绑定

使用v-model 指令，可以实现表单元素和Model 中数据的双向数据绑定

  
  
{{ name }}
  

Vue中样式的设置

• 使用Class类

1、数组

我的名字叫H1

2、数组中使用三元表达式

我的名字叫H1

data:{
  flag:true
}

3、数组中使用对象

我的名字叫H1

data:{
  flag:true
}

4、直接使用对象

我的名字叫H1

• 使用内联样式

1、直接绑定

我的名字叫H1

2、在data上定义样式

我的名字叫H1

data:{
  active:{ color: '#666', 'font-size' : '18px'}
}

3、多个样式组合使用

我的名字叫H1

data:{
  active:{ color: '#666', 'font-size' : '18px'},
  back:{ background : 'red'}
}

v-for

• 循环数组

 {{ item }} ---{{ index }} 

data:{
  list:[ ' 一 ' , ' 二 ' , ' 三 ' ,]
}

• 循环对象

 {{ val }} ---{{ key}} ---{{index}} 

data:{
  list: { id:1 , name:'bob1' },
}

• 循环带对象的数组

 {{ item.id }} ---{{ item.name}}---{{ index }} 

data:{
  list:[ 
    { id:1 , name:'bob1' },
    { id:2 , name:'bob2' },
    { id:3 , name:'bob3' },
  ]
}

• 迭代数字（使用v-for迭代数字时，前边的count值时从1开始而不时从0开始）

 这是第{{count}} 次循环

v-for的key值

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
注意：只能为number或者string类型，并且需要v-bing绑定到元素上

  
...

v-if和v-show

• v-if特点：
  每次都回重新删除或者创建元素
  有较高的切换性能消耗
• v-show特点：
  每次不会重新进行DOM的删除和创建操作，知识切换了元素的 display:none/block样式
• 建议：
  如果涉及频繁的切换，最好不要使用v-if，而是使用v-show
  如果元素可能永远也不会显示或者隐藏出来，则推荐使用v-if

 标签 
 标签 

data:{
  flag:true
}