初学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