二 : Vue 介绍
- vue 中文网 https://cn.vuejs.org/
- github 下载地址 https://github.com/vuejs/vue
- Vue.js (读音 /vju:/ view)
- 渐进式 JavaScript 框架
4.1 渐进式 :
小型项目 就可以使用 vue 就高度了
随着页面的复杂程序提高,就要学习 vue-rouer 来管理更多的页面
再随着项目的数据越来越多,管理数据也变得麻烦起来了,就开始使用 vuex 来管理数据
4.2 框架 : 一整套的解决方案
框架和库的区别 (面试)
####1. 库(Library) , 代表 : jquery
- 库就是一系列函数的集合, 我们开发人员在使用库的时候,想要完成什么样的功能,就调用库中提供的某个方法
比如 : 想要添加样式, 就调用 jquery 中的 .css() / .addClass()
- 库起到了一个辅助的作用, 在使用库的是时候,是由开发人员说了算, 也是由开发人员起主导作用.
比如 : 想给 A:设置样式 A.css(), B:addClass() C:style.background=‘red’
####2. 框架 (Framework), 代表:vue
- 在使用框架的时候,是由框架说了算,由框架起到了主导作用,
- 框架是一套完整的解决方案,框架中制定了一套规则,使用框架的时候,只需要按照规则,把代码放到合适的地方,然后框架会在合适的时机,主动调用开发人员的代码
比如 : 想用vue,组件里遍历就得使用 v-for, 下次不用 v-for 了,使用 for 不行 v-for=‘item in list’
- 主要区别 : 控制反转
也就是 : 谁起到了主导作用
- 使用库的时候 : 开发人员起主导作用
- 使用框架的时候:框架起到了主导作用
- 从体量上看,框架一般比库大
- 会发现使用框架的时候,会受到很多限制
- 我们所说的前端框架与库的区别?
https://zhuanlan.zhihu.com/p/26078359?group_id=830801800406917120
三 : MVC + MVVM (面试)
第 3.1 MVC
- MVC 是一种软件架构模式,也有人叫做设计模式
- M : Model 数据模型 (专门用来操作数据,数据的 CRUD)
- V : View 视图 (对于前端来说,就是页面)
- C : Controller 控制器 (是视图和数据模型沟通的桥梁,用于处理业务逻辑)
- 看图
第 3.2 MVVM
Vue 使用的是 MVVM 模式
为什么要学习 MVVM ?
- MVVM ===> M / V / VM
- M : model 数据层
- V : view 视图层
- VM : ViewModel 视图模型
- 核心 : M <=> VM <=> V
第 3.3 MVVM 优势
- MVC 模式 将应用程序划为三个部分,实现职责分离
- 但是,在前端中,经常要通过 js 代码来进行一些逻辑操作,最终还要把这些逻辑操作展示页面中, 也需要频繁的操作DOM
- DOM是前端性能的瓶颈
- 比如 : ajax 请求、添加、修改、设置样式、动画
- MVVM 提出来的思想 通过 数据双向绑定 让数据自动的双向同步
- V (修改视图) --> M
- M (修改数据) --> V
- 采用的是 : 数据驱动视图的思想, 数据是核心
- 以后如果想要操作 DOM, 立马想到的不是应该是拿到元素设置,而是数据
第 3.4 Vue 中的 MVVM
- 注意 : 不推荐直接手动操作 DOM
每个人操作 DOM 的方法不一样,会造成性能不一样
官网 : 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
第 3.5 学习 Vue 要转化思想
-
数据驱动视图 : 不要再想着怎么操作 DOM, 而是想着如何操作数据
MVC 与 MVVM 区别?
四 : 起步 - Hello Vue
第 4.1 : 基本使用
-
安装 : npm i vue (小写)
-
导入 :
-
实例 vue
const vm = new Vue({ // 指定 vue 管理的边界 el: '#app', // 提供视图中 需要的数据,视图可以直接使用data中的数据 data: { msg: 'xxx' } })
第 4.2 : 使用注意点
- vm 官网建议
- Vue 构造函数首字母大写
- 参数是一个对象
- id=’#app’, 其他也可以 class=’.abc’
- 边界外的无法使用 msg
4.3 {{}} 插值表达式
1. {{}} Mustache 小胡子语法, 插值表达式
2. 作用 : 使用{{}} 从data中获取数据,并展示在模板中
3. 说明 : {{}} 中只能出现 js 表达式
- 表达式 (有返回值的)
- 常见的数据类型 1 'abc' false [] {}
- 数据类型 和 运算符结合在一起1+2 arr.join('-') true ? 123 : 321
- 语句 if语句 for语句
{{}} 语法 不能作用在 HTML 元素的属性上
五 : 数据双向绑定演示
第 5.1 : 一个 input + v-model
v-model 指令 : 数据双向绑定的指令
作用 : 把data中的msg值 和 input上的值 绑定到一起
注意 : v-model只能用在 表单控件上 (input checkbox 等)
> 可以在浏览器分别演示 V => M 和 M =>V
第 5.2 : Object.defineProperty
内在-响应式原理
let obj = {}
let temp
obj.name = 'zhanhgsan'
// 参数1 : 要给哪个对象设置属性
// 参数2 : 给对象设置什么属性
// 参数3 : 属性的修饰符
Object.defineProperty(obj, 'name', {
set: function(newVal) {
console.log('赋值了', newVal)
},
get: function() {
console.log('取值了')
return temp
}
})
第 5.3 : 数据双向绑定的原理
-
演示 : V ==> M
//2.1. 拿到文本框
const txt = document.getElementById('txt')
//2.2 时刻监听txt ,拿到最新的值
txt.oninput = function() { console.log(this.value) obj.name = this.value }
//2.3 数据模型
var obj = {} let temp Object.defineProperty(obj, 'name', { // 给属性赋值的时候会掉 set: function(newVal) { console.log('调用了set', newVal) temp = newVal txt.value = newVal }, get: function() { console.log('调用了get') return temp } })
-
V => M (视图层 => 数据层)
//1. 获取 input的值,最新值
//2. 通过监听oninput 拿到最新值
//3. 把最新值赋值给 obj.name
//4. 就会掉了set方法,就会修改了数据 -
M => V (数据层 => 视图层
//1. obj.name = ‘xxx’
//2. 调用 set方法
//3. 把值赋值给input元素
六 : 指令学习
第 6.0 指令
- 指令 : 就是一个特殊的标记, 起一个辅助作用, 使 html 具备原来没有的功能
- vue 中 所有的指令, 都是以 v-开头的
- 比如 : v-model v-bind v-if v-for 等等
第 6.1 v-model (常用)
说明 : 用在表单元素中, 用来实现数据双向绑定 (input checkbox 等等)
作用 : 将 数据txt 和 文本框的值 绑定到一起, 任何一方发生改变,都会引起对方的改变
注意 : v-model 在不同类型的表单元素中,该指令的作用不同
<!-- 文本输入框 绑定的是值 (文本值) -->
<input type="text" v-model="name" />
<!-- 多选框 绑定的选中状态 (布尔值) -->
<input type="checkbox" v-model="isChecked" />
const vm = new Vue({
el: '#app',
data: {
name : 'zs',
isChecked : true
}
})
第 6.2 v-text 和 v-html
说明 : 设置文本内容
-
v-text(写在头标签里面) : [相当于之前的 innerText , 设置文本内容(不识别 html 标签)] == {{}} 双标签内部
-
v-html(写在头标签里面) : [相当于之前的 innerHTML , 设置文本内容(识别 html 标签)] == {{}} 双标签内部
-
例如:
v-text 和 v-html 1. v-text 相当于之前 innerText (功能和{{ }} 一样,,只不过位置不一样) 不识别 h1 标签,,只当字符串使用 v-text 写在头标签里面 {{}} 写在 双标签内部 2. v-html 相当于之前 innerHTML 识别标签 <div id="app"> <!-- v-text --> <div v-text='msg1'></div> // 字符串 <!-- v-html --> <div v-html='msg2'></div> // 能识别标签 <div>{{ msg1 }}</div> // 字符串 </div> <script src="./vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { msg1 : '<h1>我是测试 v-text的</h1>', msg2 : '<h1>我是测试 v-html的</h1>', } }) </script>
第 6.3 v-bind (常用)
说明 : 动态绑定数据 (单向)
出现原因 : 在 HTML 属性中, 无法使用插值表达式
步骤:
// 加载静态数据
<a href="https://wbaidu.com">aaa</a>
// 想加载动态数据 {{ }}可以获取data中的数据
// 但是 **{{}} 不能使用在属性中**
<a href="{{ src }}">aaa</a>
// 所以使用 v-bind
<a v-bind:href="{{ src }}">aaa</a> ok
<img v-bind:src="src"> ok
缩略 : v-bind 全部省略 只留下一个:
改为 :
<a :href="src">aaa</a> ok
<img :src="src" /> ok
以后 使用
静态加载数据 :
<a href="https://wbaidu.com">aaa</a>
动态加载数据 :
<a :href="href">aaa</a>
第 6.3.1 v-bind 和 v-model 的区别
// v-model : 数据双向绑定 表单元素上
// v-bind : 动态绑定数据(单向) 任意元素动态读取属性
容易出错点 :
<!-- v-model 数据双向绑定 -->
<!--场景 : 表单元素中 -->
<input type="checkbox" v-model="isChecked1" /> <br />
<!-- v-bind 数据动态绑定 (单向) -->
<!--场景 : 主要用在属性中 -->
<input type="checkbox" :checked="isChecked2" />*
第 6.4 操作样式
1.操作样式
<!-- 1. 静态类名 -->
<h1 class="red">哈哈</h1>
<!-- 2. 动态类名 -->
<h1 :class="cls">哈哈</h1>
<!-- 3. 最常用 -->
<!-- :class 里的值是一个对象
键 : 类名 (可能会要,也可以不要)
值 : 布尔值, true/false 确定类要不要
-->
<h1 :class="{ red:isRed , fz:isFZ}">哈哈</h1>
<!-- 4. style -->
<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈</h1>
2.其他操作
<!-- 1 -->
<!-- 重点 -->
<div :class="{ active: true }"></div>
===>
<div class="active"></div>
<!-- 2 -->
<div :class="['active', 'text-danger']"></div>
===>
<div class="active text-danger"></div>
<!-- 3 -->
<div :class="[{ active: true }, errorClass]"></div>
===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 -->
<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈</h1>
<!-- fz : 80 -->
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<!-- 如果有相同的样式,以后面的样式为准 -->
<div :style="[baseStyles, overridingStyles]"></div>
第 6.5 v-on 指令
注册事件/绑定事件
-
- v-on:click 绑定了一个单击事件
- 后面是事件名称
<button v-on:click="fn">按钮</button>
-
缩写 : @click=‘fn’
<button @click=‘fn’>按钮 -
函数写在 methods 里面
fn : function(){ … }
fn() { … } -
函数里面的 this 指的就是 vm 实例
在函数里面操作数据 获取数据 this.msg 修改数据 this.msg = 'XXX'
-
传参
5.1 正常传参@click=‘fn(123)’
5.2 事件对象 $event
<!-- 4.1 绑定事件对象的时候, 没有添加小括号,此时,直接在方法中,通过参数 e 就可以获取到事件对象 -->
<!-- 4.2 如果添加小括号,就拿不到事件对象了,vue留了一个$event -->
<button @click="fn1($event,123)">我是按钮</button>
6.5 v-for
- v-for 指令: 遍历数据,为数据中的每一项生成一个指令所在的标签
- 代码示例
<!-- 需求1 : 最常用 遍历数组 -->
<!-- 作用 : 遍历 list1 数据, 为数据中的每一项生成一个li标签 -->
<!-- item 数组里的每一项元素 -->
<ul>
<li v-for="(item,index) in list1">{{ item }} - {{ index }}</li>
</ul>
<!-- 需求2 : 遍历元素是对象的数组 -->
<ul>
<li v-for="item in list2">{{ item.name }} - id:{{ item.id }}</li>
</ul>
<!-- 需求3 : 遍历对象 -->
<ul>
<li v-for="(v,key) in obj">{{ v }}-{{ key }}</li>
</ul>
<!-- 需求4 : 想要生成10个h1 -->
<h1 v-for="item in 10">我是h1 {{ item }}</h1>
// 1. 重点是遍历数组,,其他的了解即可