前端技术Vue学习笔记--002
前端技术Vue学习笔记
文章目录
- 前端技术Vue学习笔记
-
- 1、指令修饰符
- 2、v-bind对于样式控制的增强
-
- 2.1、v-bind对于样式控制的增强--class
- 2.2、v-bind对于样式控制的增强--操作style
- 3、v-model应用于其他表单元素
- 4、计算属性
-
- 4.1、**computed计算属性 vs methods方法的区别**
- 4.2、计算属性的完整写法
- 4.3、成绩添加案例
- 5、watch 监视器
1、指令修饰符
通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 —>简化代码
- 按键修饰符
@keyup.enter --> 键盘回车监听
-
v-model修饰符
v-model.trim --> 去除首尾空格
v-model.number --> 转数字 -
事件修饰符
@事件名.stop --> 阻止冒泡
@事件名.prevent --> 阻止默认行为
练习代码
<body>
<div id="app" >
<h3>键盘回击事件绑定处理h3>
用户名:<input type="text" v-model="username" @keyup.enter="fn"/><br/>
<h3>v-model修饰符h3>
年龄:<input type="text" v-model.number="age" /><br/>
英文名：<input type="text" v-model.trim="usName" /><br/>
<h3> 事件修饰符h3>
<div class="father" @click="f">
<div class="son" @click.prevent="s">
div>
div>
<a href="https:www.baidu.com" @click.prevent>点击跳转到百度a>
div>
<script>
const app = new Vue({
el : '#app',
data : {
username : '',
usName : '',
age : ''
},
methods : {
fn(e){
//e.key === 'Enter' 等价于@keyup.enter
// if(e.key === 'Enter'){}
console.log("键盘回车事件触发"+this.username)
},
f(){
alert("这是父元素盒子")
},
s(){
alert("这是子元素盒子")
}
}
})
script>
body>
2、v-bind对于样式控制的增强
为了方便开发者进行样式控制，Vue拓展了v-bind的语法，可以针对class类名和style行内样式进行控制。
2.1、v-bind对于样式控制的增强–class
语法 :class=“对象/数组”
-
对象–>建就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
适用场景：一个类来回切换 -
数组–>数组中的所有类，都会添加到盒子上，本质就是一个class列表
适用场景：批量添加或删除类
案例练习：京东秒杀tab导航高亮
<body>
<div id="app" >
<h3>v-bind对于样式控制的增强--classh3>
<ul>
<li v-for="(item,index) in list" @click="activeIndex = index " >
<a :class="{gezi : index === activeIndex}" href="#">{{ item.name }}a>
li>
ul>
<hr>
div>
<script>
const app = new Vue({
el : '#app',
data : {
activeIndex : 0,
list : [
{id : 1,name : '京东秒杀'},
{id : 2,name : '京东抢购'},
{id : 3,name : '京东商场'}
]
},
methods : {
}
})
script>
body>
2.2、v-bind对于样式控制的增强–操作style
语法 :style = “样式对象”
适用场景：某个具体属性的动态设置
注意：
- 当遇到像background-color这样带横杠的属性名必须以驼峰命名或者以引号处理
- 在{}中是以json的格式写的，所以键值要加引号
模版语法
案列：进度条实现
<html>
<head>
<title> 进度条--style title>
<script src="../../vue.js">script>
<style>
.progress{
height: 25px;
width: 400px;
border-radius: 15px;
background-color: black;
border: 3px solid black;
box-sizing: border-box;
margin-bottom: 30px;
}
.inner{
height: 20px;
border-radius: 10px;
text-align: right;
position: relative;
background-color: blueviolet;
background-size: 20px 20px;
box-sizing: border-box;
transition: all 1s;
}
style>
head>
<body>
<div id="app" >
<h3>进度条--styleh3>
<div class="progress">
<div class="inner" :style="{width: count+'%'}">div>
<span :style="{ 'padding-left': count + '%' }">{{ count }}%span>
div>
<button @click="count--" v-show="count>0">-button>
<button @click="count++" v-show="count<100">+button>
div>
<script>
const app = new Vue({
el : '#app',
data : {
count : 50 //默认为50%
},
methods : {
}
})
script>
body>
html>
3、v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联 -->快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素
例如：输入框（input:text）、文本域(textarea)、复选框(input:checkbox)、单选框(input:radio)、下拉菜单（select）等等。
案例：注册案例
<body>
<div id="app">
<div :class="['register']">
<h3>用户注册信息h3>
用户名:<input type="text" v-model.trim="username" name="username"/><br><br>
是否单身：<input type="checkbox" v-model="isSingle"/><br><br>
性别： <input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女<br><br>
所在城市：
<select v-model="cityId">
<option value="1">白银option>
<option value="2">靖远option>
<option value="3">会宁option>
<option value="4">景泰option>
select>
<br><br>
<button>注册button>
div>
div>
<script>
const app = new Vue({
el : '#app',
data : {
username : '',
sex : 1,
isSingle : true,
cityId : 4
}
})
script>
body>
测试结果
4、计算属性
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算
语法：
- 声明在computed配置项中，一个计算属性对应一个函数
- 和普通属性一样使用{{计算属性名}}
计算属性：换言之，就是将一段求值的代码进行封装。
小黑笔城
<body>
<div id="app">
<h3>计算属性练习h3>
<table class="bordered-table">
<tr>
<td>名称td>
<td>数量td>
tr>
<tr v-for="(item,index) in list">
<td>{{item.name}}td>
<td>{{item.num}}td>
tr>
table>
<h3>文件总数：{{totalNum}}h3>
div>
<script>
const app = new Vue({
el : '#app',
data : {
list : [
{id : 1,name : '铅笔',num : 10},
{id : 2,name : '订书机',num : 20},
{id : 2,name : '打印机',num : 2},
{id : 2,name : '钢笔',num : 36}
]
},
computed : {
totalNum(){
//基于现有数据，编写求值逻辑
//计算属性函数内部，可以直接通过 this 访问到 vue 实例
//需求：对this.list数组里面的 num 进行求和 --》reduce
let total=this.list.reduce((sum,item) => sum +item.num,0)
return total
}
}
})
script>
body>
测试结果
4.1、computed计算属性 vs methods方法的区别
- computed计算属性：
- 作用：封装一段对于数据的处理，求得一个结果
- 语法：写在computed 配置项中；作为属性，直接使用–>this.计算属性 {{计算属性名}}
- 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化，会自动重新计算 -->并再次使用缓存
- methods方法：
- 作用：给实例提供一个方法，调用以处理业务逻辑
- 语法：写在methods配置项中； 作为方法：需要调用 —>this.方法名() {{方法名（）}} @事件名=“方法名”
使用计算属性（缓存特性）
使用methods方法中的函数时
4.2、计算属性的完整写法
计算属性默认的简写，只能读取访问，不能“修改”
如果需要“修改” --> 需要写计算属性的完整写法"
案例：改名卡的练习
<body>
<div id="app">
<h3>计算属性的完整写法h3>
姓：<input type="text" v-model.trim="xing"/>
名：<input type="text" v-model.trim="ming"/>
全名：{{fullName}}<br><br>
新名： <input type="text" v-model.trim="newName"><br><br>
<button @click="modify">改名卡button>
div>
<script>
const app = new Vue({
el : '#app',
data : {
xing : '张',
ming : '飞',
newName : ''
},
methods : {
modify(){
//通过this.计算属性进行修改计算属性的值
this.fullName = this.newName
}
},
computed : {
//简写 -->获取，没有配置设置的逻辑
// fullName(){
// return this.xing + this.ming
// }
//完整写法 --> 获取 + 设置
fullName : {
// 1. 当fullName计算属性，被获取求值时，执行get（有缓存时，从缓存中获取数据）
// 会将返回值作为，求值的结果
get(){
return this.xing + this.ming
},
// 2. 当fullName计算属性，被修改赋值时，执行set
// 修改的值，传递给set方法的形参
set(value){
this.xing = value.slice(0,1)
this.ming = value.slice(1)
}
}
}
})
script>
body>
测试结果
4.3、成绩添加案例
题目要求
代码完成
<html>
<head>
<title>计算属性title>
<script src="../../vue.js">script>
<style>
.bordered-table {
border: 1px solid #000; /* 设置表格边框样式 */
}
.right{
float: left;
width: 200px;
height: 200px;
padding-left: 300px;
padding-top: 30px;
}
.left{
float: left;
width: 260px;
height: 400px;
}
.low60{
color : red
}
style>
head>
<body>
<div id="app">
<div class="left">
<h3>成绩案例h3>
<table class="bordered-table">
<tr>
<td>IDtd>
<td>名称td>
<td>数量td>
<td>操作td>
tr>
<tr v-for="(item,index) in list">
<td>{{index}}td>
<td>{{item.name}}td>
<td :class="{low60 : item.score < 60}" >{{item.score}}td>
<td><a href="https:www.baidu.com" @click.prevent="del(item.id)">删除a>td>
tr>
table>
<h3>总分：{{totalScore}}h3>
<h3>平均分：{{averageScore}}h3>
div>
<div class="right">
<h3>新科目h3>
科目: <input type="text" placeholder="请输入科目" v-model.trim="newProject" /><br>
分数：<input type="text" placeholder="请输入分数" v-model.number="newScore" /><br>
<br> <button @click="addProject">添加button>
div>
div>
<script>
const app = new Vue({
el : '#app',
data : {
list : [
{id : 1,name : '语文',score : 90},
{id : 2,name : '数学',score : 40},
{id : 3,name : '英语',score : 60},
{id : 4,name : '化学',score : 80}
],
newProject : '',
newScore : ''
},
methods :{
del(id){
//通过id删除数组的指定元素
this.list = this.list.filter(item => item.id !== id);
},
addProject(){
//数组中添加元素 元素值为this.projectInfo
if(this.newProject.trim() === ''){
alert('添加的内容不能为空')
}else if(this.newScore === ''){
alert('添加的内容不能为空')
}
else if(typeof this.newScore !== 'number'){
alert("请输入正确的成绩")
}
else{
//向数组添加一个元素
this.list.unshift({
id : +new Date(),
name : this.newProject,
score : this.newScore
})
}
this.newProject=''
this.newScore=''
console.log(this.newProject+" "+this.newScore)
}
},
computed : {
totalScore : {
get(){
let a = this.list.reduce((sum,item) => sum +item.score,0)
// console.log("总分数："+ a)
return a
},
set(value){
}
},
averageScore : {
get(){
let a = 0
if(this.list.length === 0){
console.log("11111")
return 0
}
else{
a = this.list.reduce((sum,item) => sum +item.score,0) / this.list.length
// console.log("平均分"+ a)
return a
}
},
set(value){
}
}
}
})
script>
body>
html>
测试结果
技术使用
5、watch 监视器
作用：监视数据变化，执行一些业务逻辑 或 异步操作。(当数据发生改变时，触发)
语法：
- 简单写法 --> 简单类型数据，直接监视
- 完整写法 --> 添加额外配置项
- deep: true 对复杂类型深度监视（监视的是一个数据对象，而非单个数据）
- immediate：true 初始化立即执行一次handler方法
统计求和
