P9-P10不太懂 生命周期
目录
一、邂逅Vuejs
1、认识Vuejs
- Vue (读音 /vjuː/,类似于 view),不要读错。
- Vue是一个渐进式的框架
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。
- Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
- 学习Vuejs的前提?
并不需要你具备其他类似于Angular、React,甚至是jQuery的经验。
需要具备一定的HTML、CSS、JavaScript基础。
2、Vuejs安装方式P03
2.1 CDN引入
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2 下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
2.3 NPM安装管理(较多使用)
后续通过webpack和CLI的使用,我们使用该方式。较多使用
3、Vuejs初体验P04
3.1 Hello Vuejs
let 定义变量 const 定义常量
el挂载要管理的元素 data定义数据
声明式编程,数据和界面完全分离,响应式开发
4、Vuejs的MVVM
什么是MVVM呢?
通常我们学习一个概念,最好的方式是去看维基百科(对,千万别看成了百度百科)
https://zh.wikipedia.org/wiki/MVVM
我们直接来看Vue的MVVM
View层:
视图层
在我们前端开发中,通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层:
数据层
数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
VueModel层:
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
5. 创建Vue实例传入的options
你会发现,我们在创建Vue实例的时候,传入了一个对象options。这个options中可以包含哪些选项呢?
详细解析
目前掌握这些选项:
el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。
data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。 也可以是从服务器加载的
methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
6.Vue的生命周期
二、模板语法
1. 插值操作 P12-P13
1.1 Mustache
1.2 v-once
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。
1.3 v-html
某些情况下,我们从服务器请求到的数据本身就是一个HTML代码
如果我们直接通过{
{}}来输出,会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。
如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
1.4 v-text
v-text作用和Mustache比较相似:都是用于将数据显示在界面中
v-text通常情况下,接受一个string类型
1.5 v-pre
v-pre用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
1.6 v-cloak
在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。
cloak: 斗篷
2. 绑定属性 v-bind P14
v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍)
在开发中,有哪些属性需要动态进行绑定呢?
还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href,代码如下:
v-bind有一个对应的语法糖,也就是简写方式
在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。
简写方式如下:
绑定class有两种方式:
- 对象语法P15
用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
- 数组语法P16
用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>//单引号里就是写死的
用法二:也可以传入多个值
<h2 :class=“[active, line]">Hello World</h2>//不加是变量,可以在vue里指定值
用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
v-bind绑定style有两种方式:P18
- 对象语法
<!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
<h2 :style="{fontSize: '50px'}">{
{message}}</h2>
style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值,值可以来自于data中的属性
<h2 :style="getStyles()">{
{message}}</h2>//对象可以作为函数去返回,但是在方法里记得写this
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
- 数组语法
div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以,分割即可
3.计算属性
3.1什么是计算属性?P20
对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量,我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称,我们就需要写多个{ {firstName}} { {lastName}}
我们可以将上面的代码换成计算属性:
计算属性是写在实例的computed选项中的.该选项有set和get两种方法,当set不设置时,会省略get字样的书写。与methods不同点在于这里是当成属性去写的,有缓存机制,方法每一次调用都会重新计算
3.2 计算属性的复杂操作P21
P22第一天的课堂回顾
3.3 计算属性的setter和getter
每个计算属性都包含一个getter和一个setter
在上面的例子中,我们只是使用getter来读取。
在某些情况下,你也可以提供一个setter方法(不常用)。
在需要写setter的时候,代码如下:
3.4 let/var
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.
其他块定义来说是没有作用域的,比如if/for等,这在我们开发中往往会引起一些问题。let会在一个{}有单独的块级作用域
3.5 const的使用
什么时候使用const呢?
当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性.
建议: 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.
一旦给const修饰的标识符被赋值之后, 不能修改
在使用const定义标识符,必须进行赋值
常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.结合存储规则理解
3.6对象增强写法
4. 事件监听
4.1v-on
v-on:click可以写成@click
4.2 v-on参数
情况一:()可以不添加。如果该方法不需要额外参数,那么方法后的()省略
但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
v-on 修饰符
在某些情况下,我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件
5. 条件判断
5.1 v-if、v-else-if、v-else
v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
v-if的原理:
v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
5.2 条件渲染案例
用户再登录时,可以切换使用用户账号登录还是邮箱地址登录。
5.3 案例小问题
小问题:
如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
但是按道理讲,我们应该切换到另外一个input元素中了。
在另一个input元素中,我们并没有输入内容。
为什么会出现这个问题呢?
问题解答:
这是因为Vue在进行DOM渲染时&#