VUE-基础使用

1. 什么是vue.js

1.Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

2. 为什么学习流行框架

1.企业为了提高开发效率：在企业4E2D，时间就是效率，效率就是金钱；

2.企业中，使用框架，能够提高开发的效率；

3.提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js

4.能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

5.在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

3. 框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

• 例如：node中的express

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

• 例如：从Jquery 切换到 Zepto

• 例如：从EJS切换到 art-template4. MVC与MVVM的区别   

4. MVC与MVVM的区别

MVC 是后端的分层开发概念;

MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

5. Vue.js的代码结构

引入vue.js

写视图层，我们要展示的内容

实例化Vue()

• data：存放数据

• el：这个控制是哪块视图

• methods：放我们的方法

6. 插值表达式、v-cloak、v-text、v-html

• 插值表达式{{}}，可以在前后插入一些内容

• v-text：会替换掉元素里的内容

• v-html：可以渲染html界面

7. v-bind

界面元素属性值的绑定

• 括号里不加引号的都是我们data里的数据读取

• 如果想使用字符串需要加上引号

• 里面可以写表达式

• 里面也可以调用定义好的方法，拿到的是方法的返回值

 

8. v-on

进行事件的绑定，我们用的最多的是click事件绑定

简写@

9.事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

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

.once 事件只触发一次

10. v-model数据双向绑定

1. 作用：数据双向绑定

2. 注意：绑定的是表单控件

 11. Vue中样式的使用

使用class样式:

1. 数组

2. 三木表达式

3. 数组内置对象（对象的键是样式的名字，值是bool类型）

4. 直接通过对象

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

   1. 在data上定义样式

   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

3. 在 :style 中通过数组，引用多个 data 上的样式对象

   1. 在data上定义样式

   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

 

12. V-for和key属性 

1. 遍历数组，参数(item,index) in list

2. 遍历对象，参数(value,key,index) in list

3. 遍历数字，num in 10 (1~10)

1. key在使用v-for的时候都需要去设置key

1. 让界面元素和数组里的每个记录进行绑定

2. key只能是字符串或者数字

3. key必须是唯一的

13. v-if与v-show区别

1. 区别：

1. v-if删除dom元素

2. v-show设置display:none

1. 应用场景：

1. v-if只修改一次的时候可以使用v-if

2. v-show频繁切换的时候可以使用v-show