从HTML到现在一路跟过来的小伙伴们,坚持固然不容易,但我相信大家已经学到了不少,那么我们开始马不停蹄的进入前端的框架吧,下面讲的是Vue2,大家继续加油鸭!!!!
Vue2官方文档地址,喜欢阅读文档的小伙伴可以点击进入官网。
Vue是什么?
官网的Vue的解释如下:
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue的两个特性:
1、数据驱动视图
2、双向数据绑定
在网页中,form表单负责采集数据,Ajax负责提交数据
注意:数据驱动视图和双向数据绑定的底层原理是MVVM(Model数据源、View视图、ViewModel就是vue的实例)
学了JS的小伙伴应该都知道,有很多操作都是基于DOM元素进行的,需要获取DOM元素,Vue则不需要获取DOM元素就可以对DOM元素进行操作,下面我们就进入Vue的正式学习吧!
在使用 Vue 时,推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
命令行运行
npm install vue@^2
或者引入Vue2
插值表达式 {{ }} 是一种Vue的模版语法
作用:利用表达式进行插值,渲染到页面中
语法:{{表达式}}
注意点:(1) 使用的数据必须存在
(2)支持的是表达式,而非语句
(3)不能在标签属性中使用{{}}插值
Document
{{ info}}-{{arr}}
data中的数据最终会被添加到实例上
① 访问数据:“实例.属性名”
② 修改数据:“实例.属性名” = “值”
Vue 会根据不同的指令,针对标签实现不同的功能
指令:带有 v-前缀 的特殊标签属性, 不同的指令,完成不同的功能
v-if 作用:控制元素显示隐藏(条件渲染)
语法:v-if = “表达式” 表达式值true显示,false隐藏
v-else、v-else-if 作用:辅助v-if进行判断渲染
语法:v-else v-else-if = “表达式”
注意:需要紧挨着 v-if 一起使用
原理:基于条件判断,是否创建或移除元素节点
场景:要么显示,要么隐藏,不频繁切换的场景
Document
A
B
C
浏览器页面只显示了一个A
控制台查看元素,只创建了一个满足条件的p元素
作用:控制元素显示隐藏
语法:v-show = “表达式” 表达式值true显示,false隐藏
原理:切换 display:none / block控制显示隐藏
场景:频繁切换显示隐藏的场景
Document
456
654
浏览器页面只显示了654
浏览器控制台查看元素,发现两个div都存在,只是具有不同的样式
这里就可以看出来,v-if与v-show都可以控住元素的显示和不显示,但是也存在区别:
v-if控制元素显示与隐藏,通过js创建dom元素或删除元素
v-show通过css的display显示与隐藏
区分:频繁切换元素显示与隐藏用v-show,其余可以用v-if
作用:注册事件 = 添加监听 + 提供处理逻辑
语法:
① v-on:事件名 = “内联语句” => 简写: @事件名 = "内联语句 "
② v-on:事件名=“methods中的函数名” => 简写: @事件名 = “methods中的函数名”
调用函数时不传递参数,事件对象($event)就是默认的第一个形参
v-on 调用参数,当涉及到参数传递时 ,改写为 事件名 = “methods中的函数名(参数1,参数2)”
Document
{{ num }}
作用:基于数组循环,多次渲染整个元素
遍历数组语法:v-for = “(item,index) in 数组“
item 表示每一项 index 表示下标
当参数只有一个时,可以省略括号
v-for 中的 key
语法:key属性 = “唯一标识”
key的作用:给元素添加的唯一标识,便于vue进行列表项的正确排序复用
Document
注意点:1.key的值只能是字符串或数字类型
2.key的值必须具有唯一性
3.推荐使用id作为key的唯一值,不推荐使用index作为key
4.v-for 不建议与 v-if 一起使用,v-for优先级更高,消耗性能
作用:动态的设置html的标签属性 -> src、url、title ……
语法:v-bind:属性名 = “表达式” —> 简写 :属性名 = “表达式”
对于样式控制的增强
(1)、操作class
语法::class = “对象/数组”
①对象 --> 键就是类名,值是布尔值。如果值是true,有这个类,否则没有这个类
<div class='box' :class='{类名1:布尔值,类名2:布尔值}'>div>
②数组 --> 数组中所有的类,都会添加到盒子上,本质就是一个class列表
<div class='box' :class='[类名1,类名2,类名3]'>div>
(2)、操作style
语法::style = ‘样式对象’
<div class='box' :style='{css属性名1: css属性值,css属性名2: css属性值}'>div>
Document
div
div
div
div
div1111
-----------------
div
div区域
作用:注册事件 = 添加监听 + 提供处理逻辑
语法:
① v-on:事件名 = “内联语句” => 简写: @事件名 = "内联语句 "
② v-on:事件名=“methods中的函数名” => 简写: @事件名 = “methods中的函数名”
调用函数时不传递参数,事件对象($event)就是默认的第一个形参
v-on 调用参数,当涉及到参数传递时 ,改写为 事件名 = “methods中的函数名(参数1,参数2)”
Document
{{ num }}
作用:给表单元素使用,双向数据绑定 —> 可以快速获取或设置表单元素内容
数据变化 —> 视图自己更新
视图变化 —> 数据自动更新
语法:v-model = “变量”
原理: v-model本质上是一个语法。例如应用在输入框上,就是 value属性和input事件的和写。
<template>
<div id='app'>
<input v-model='msg' type='text'>
<input :value='msg' @input='msg = $event.target.value' type='text'>
div>
template>
注意:$event用于在模版中,获取事件的形参
应用于其他表单元素
v-model会根据控件类型自动选取正确的方法来更新元素
输入框 input:text -----> :value + @input
文本域 textarea -----> :value + @input
复选框 -----> :checked + @change
单选框 -----> :checked + @change
下拉菜单 -----> :value + @change
Document
用户名 密码
通过 “.” 指明一些指令后缀,不同后缀封装了不同的处理操作 --> 简化代码
① 按键修饰符
@keyup.enter ----> 键盘回车监听
@keyup.esc -------> 键盘esc监听
② v-model修饰符
v-model.trim ----> 去除首位空格
v-model.number ------> 转数字
v-model.lazy ------------> 失去焦点,才收集数据
③ 事件修饰符
@事件名.stop —> 阻止冒泡
@事件名.prevent ----> 阻止默认行为
Document
son
百度
概念:基于现有的数据,计算出来的新属性。
优势:依赖的数据变化,才自动重新计算;计算属性,自带缓存效果
语法:①声明在 computed 配置项中,一个计算属性对应函数
②使用起来和普通属性一样使用 {{计算属性名}}
computed:{
计算属性名(){
基于现有的数据,编写求值逻辑
return 结果
}
}
计算属性完整写法
计算属性默认简写,只能访问,不能修改
如果要修改,需要写计算属性的完整写法
computed:{
计算属性名:{
get(){
一段代码逻辑(计算逻辑)
return 结果
}
set(修改的值){
一段代码逻辑(修改逻辑)
}
}
}
Document
计算属性 {{ avegeScore }}
计算属性 {{ avegeScore }}
计算属性 {{ avegeScore }}
方法 {{ avegeScore2() }}
方法 {{ avegeScore2() }}
方法 {{ avegeScore2() }}
computed 计算属性 VS methods 方法
(1)、computed 计算属性:
作用:封装了一段对于数据的处理,求得一个结果。
语法:写在computed配置项中;作为属性,直接使用 ----> this.计算属性 {{ 计算属性 }}
缓存特性(提升性能):计算属性会对计算出来的结果缓存,再次使用直接读取缓存,依赖项变了,会自动重新计算 —> 并再次缓存
(2)、methods 方法:
作用:给实例提供一个方法,调用以处理业务逻辑
语法:写在methods配置中;作为方法,需要调用 --> this.方法名() {{ 方法名() }} @事件名=‘方法名’
作用:监视数据变化,执行一些业务逻辑 或 异步操作
语法:
① 简单写法 --> 简单类型数据,直接监视
watch:{
数据属性名(newValue,oldvalue){
一些业务逻辑 或 异步操作
},
'对象.属性名'(newValue,oldValue){
一些业务逻辑 或 异步操作
}
}
② 完整写法 --> 添加额外配置项
(1)deep:true , 对复杂类型深度监视
(2)immediate:true , 初始化立刻执行一次handler方法
watch:{
数据属性名:{
deep:true,
immediate:true,
handler(newValue){
一些业务逻辑 或 异步操作
}
}
}
watch的应用
Document
Ask a yes/no question:
{{ answer }}
后面我们接着讲Vue的生命周期以及后面的内容!!!