初学Vue


1. 什么是vue.js

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

b) Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!

2. 为什么学习流行框架

a) 企业为了提高开发效率:在企业4E2D,时间就是效率,效率就是金钱;

b) 企业中,使用框架,能够提高开发的效率;

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

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

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

3. 框架和库的区别

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

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

4. MVC与MVVM的区别

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

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

5. Vue.js的代码结构

a) 引入vue.js

b) 写视图层,我们要展示的内容

c) 实例化Vue()

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

a) 如何获取变量值呢?

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

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

v-html:可以渲染html界面

7.v-bind

a) 界面元素属性值的绑定

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

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

里面可以写表达式

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

8.v-on

a) 进行事件的绑定,我们用的最多的是click事件绑定

b) 简写@

9.事件修饰符

a) .stop 阻止冒泡

b) .prevent 阻止默认事件

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

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

e) .once 事件只触发一次

10.v-model数据双向绑定

a)  作用:数据双向绑定

b)  注意:绑定的是表单控件

11.Vue中样式的使用

使用class样式

a)   数组

b)   三木表达式

c)   数组内置对象(对象的键是样式的名字,值是Boolean类型)

d)   直接通过对象

使用内联样式

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

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

a) 在data上定义样式

b) 在元素中,通过属性绑定的形式,将样式对象应用到元素中

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

a) 在data上定义样式

b) 在元素中,通过属性绑定的形式,将样式对象应用到元素中

12.V-for和key属性

a) 遍历数组,参数(item,index) in list

b) 遍历对象,参数(value,key,index) in list

c) 遍历数字,num in 10 (1~10)

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

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

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

iii. key必须是唯一的

注意:

2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

13.v-if与v-show区别

a) 区别:

   i. v-if删除dom元素

   ii. v-show设置display:none

b) 应用场景:

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

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