Vue:渐进式JS框架
简介
Vue
是前端优秀框架,用于构建用户界面的渐进式框架- 也是要通过终端安装工具,成功!
- 日后我们就在
src
的文件中编写代码,其他的都是配置的文件,src
的内容有:assets
;存储静态资源::静态资源:公共的CSS文件,包含项目当中所用的图片文件等::components
:vue中的组件,++vue是组件化开发的++App.vue
:主入口的组件,可以理解为根组件,所有组件都是从这里开始的main.js
:主入口文件
模板语法
文本
- 数据绑定最常见的形式就是使用**Mustache(双花括号)**语法的文本插值
- Mustache:胡子
- 文本插值:配合页面动态显示文本::文本动态化::
- html:
<p>{{message}}</p>
,脚本设置变量message
- Mustache支持JS的表达式,不必非要只用变量,用任意的运算符、方法都是可以的。但是不支持语句!并且一次只支持一个表达式
原始HTML
- 双大括号会将数据解释为普通文本,而非HTML代码。
- 为了输出真正的HTML,你需要使用
v-html
指令::所有以v-开头的都是指令:: - ++这种就好像是innerText和innerHTML的区别:前者只能接受普通文本信息,如果出现“”的情况,前者会展示成文本的形式,但后者会识别并展示超链接形式++
v-html
用法类似于属性<div v-html="文本"><div>
属性
- Mustache语法不能在HTML属性中使用,++看上面,双花括号只能在标签之内包裹变量,不能用作外面标签的属性++为了让属性动态化,我们可以使用
v-bind
指令 - 用法:
<div v-bind:属性名="变量名"></div>
,在脚本中改变变量的值就能改变属性的值 - v-bind:可以简写为:
条件渲染
- 条件渲染是根据条件不同来在页面上渲染不同的内容
v-if
:- 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回
true
值的时候被渲染 - 如
<p v-if="f1ag">我是孙猴子</p>
,flag就是动态可变变量 v-else
用法:<p v-else>我是b猴子</p>
,也是和if-else作用是一样的
- 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回
v-show
:- 另一个用于条件性展示元素的选项
- 二者的不同:
v-if
是“真正“的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建++啥意思?就是说如果我们想要更换渲染内容,v-if会把现有的元素直接删除,再重建一个新的元素。又或者我们一开始显示初始内容时,另一部分的元素压根没有被渲染++v-if
也是惰性的:在只有v-if
时,如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。- 相比之下,
v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换::display属性的切换,none时消失,block时出现:: - 一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变则使用v-if
较好
列表渲染
v-for
指令:
- 把一个数组映射为一组元素,就是把数组展开,把每一个元素拿到
- 我们可以用
v-for
指令把一个数组渲染成一个列表。v-for
指令需要使用** item in items **形式的特殊语法,其中 items 是源数据数组名, 而 item 则是数组元素的别名v-for
指令写在li标签中- 脚本中返回的样式就是一个数组,数组元素通常是对象,详细看vs
维护状态
- Vue只会多渲染新增的数据,而不是像JS一样重新再去渲染一遍。增加一条我们就渲染这一条,性能消耗很小。
- 当Vue正在更新使用
v-for
渲染的元素列表时,它默认使用就地更新的策略。++如果数据项的顺序(id)被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素(id),并且确保它们在每个索引位置正确渲染。++ - 需要为每项提供一个唯一的* key attribute *,::基本是id::以便它能跟踪每个节点的身份,从而重用和重新排序现有元素。
<div v-for:"item in items":key="item.id">
这样就能检查看哪些节点需要修改,再根据id跟踪并修改节点- v-for和key是要搭配使用的!!
事件处理
监听事件
- 我们可以使用
v-on
指令(通常缩写为@
符号)来监听DOM事件,并在触发事件时执行一些JavaScript。 - 用法为
v-on:click="methodName"
或使用快捷方式 @click=“methodName”,方法名称可以写一些简单的语句比如::message += 1::,每次点击message的值就+1
事件处理方法
- 返回的是函数
@click="函数名"
- JS中要写另一个对象methods,值就是好多函数组成的对象。::这个methods以及前面返回数值变量的data都是系统的关键字,不能重新起名::
- 如果想在函数中修改::data中的变量::,要用
this
关键字指明,this.message = "不要点人家!";
内联处理器中的方法
%% 俗称:事件传递参数,就是事件用的函数带参
表单的输入绑定
- 你可以用
v-model
指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。++v-moel本质上不过是语法糖。它负责监听用户的输入事件来更新数据++ - 双向数据绑定:在输入的同时读取输入的内容,基本上绑定的都是某个变量,便于动态修改
修饰符
.lazy
- 在默认情况下,
v-model
在每次input事件触发后,将输入框的值与数据进行同步。::也就是实时同步,性能消耗很大::可以添加lazy
修饰符,从而转为在change事件之后进行同步 - `
.trim
- 自动过滤用户输入的首尾空白字符,用法是一样的
组件基础
单文件组件
- (又名
.vue
文件,缩写为SFC)是一种特殊的文件格式,它允许将Vue组件的模板(HTML必须存在)、逻辑(JS)与样式(CSS)封装在单个文件中
加载组件
组件的组织
%% 整个页面是由组件组成的,组件之间的引用关系会形成一个组件的组织,通常一个应用会以一颗嵌套的组件树的形式组织
Props组件交互
%% 组件之间::数据之间::是存在交互的,可以互相返回数据进行显示。Prop能决定组件之间数据的传递,将数据从父组件传递到子组件
- 常见的应用应该就是从
App.vue
根组件向小组件传递数据,使用它就可以不使用import
了,直接在export default
中写props - 传递数据的个数没有限制,对传递的参数的类型也没有限制
- 详情看vs
自定义事件组件交互
%% props无法进行数据的反向传递,我们可以用自定义事件*$emit*
- 我们之前学的
import/export
那是组件加载,只是建立起了一些联系,但需要交互方法才能进行数据的传递,比如props/$emit - 通过自定义事件进行数据传递!!,详细看vs
组件的生命周期
- 每个组件在被创建时都要经过一系列的初始化过程++例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等++同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会
八大生命周期函数:
生命周期函数不需要咱们调用,允许我们在不同的时间段做特定的工作
创建时:beforeCreate/created
渲染时:beforeMount/mounted
- 常常把网络请求放到mounted中:此时组件已经显示在页面之上,请求到数据之后再把这个数据渲染到页面之上。
- ++网页在快速浏览的时候需要时间加载,图片、数据还没加载出来的时候是一些灰色的方格,这些方格就是已经渲染在页面之上的元素,这时再去请求数据,内容就能显示出来++
- ::就是告诉用户,我们页面已经显示出来了,但是要再等一点点,等到我们网络请求拿到数据之后才能看到详细的信息::
更新时:beforeUpdate/updated
卸载时:beforeUnmount/unmounted
- 卸载之前把消耗性能的处理都干掉,比如定时器
Vue引入第三方
%% 第三方:不属于vue,是别人写好的能在vue中使用的方便的功能和业务
Swiper轮播图:触摸滑动插件
- 纯JS打造的滑动特效插件,面向手机、平板等移动终端。
- 详情看vs
Axios网络请求
%% Axios是一个基于promise的网络请求库(第三方)