JS+Vue学习笔记

最新推荐文章于 2024-05-01 21:12:48 发布

琉璃雪哎

最新推荐文章于 2024-05-01 21:12:48 发布

阅读量1.5k

点赞数 1

文章标签：学习前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_63034186/article/details/126406500

版权

一、JSP的基本语法

1、javascript的输出

（1）输入：

document.write("字符串类型");  //输入
alert(什么类型都可以); //提示框输入

（2）html中运行JavaScript代码：

//使用<script></script>将Js语法嵌入到HTNL中，可以使用多个，每一个之间都是有关联的。
//1、点击demo后运行script的东西:
<a href="javascript:alert("#############")"">deom</a>

//2、href="javascript:代码;
//运行弹出当前时间：
alert(new Date());

//3、事件中后面有介绍

//4、写到外部文件中(.JS) 
<script src="文件地址"></script>

（3）模板字符串：

let age = 18;
document.write(`我今年${age}岁了！`)

// 弹出输入框输入相关数据
var uname = prompt('请输入你的姓名')

let age = prompt('请输入你的年龄')
console.log(`我的名字叫${uname}，我今年${age}岁了！`)
// 写到主页面可进行展示
document.write(`我的名字叫${uname}，我今年${age}岁了！`)

（4）类型：

数字类型：number，字符串类型：string，布尔类型：boolean，undefine类型：undefined，空类型：null（object对象）。

查看数据类型使用：typeof xxx; //检测数类型

（5）类型转换：

①隐形转换：

某些运算符被执行时，系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
➢+号两边只要有一个是字符串，都会把另外一个转成字符串
➢除了+以外的算术运算符比如一* /等都会把数据转成数字类型
缺点:
➢转换类型不明确，靠经验才能总结
小技巧:
➢+号作为正号解析可以转换成Number

②显性转换：

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
概念:
自己写代码告诉系统该转成什么类型
转换为数字型
➢Number(数据)
转成数字类型，但是不可以添加字符，否则不可进行转换。
如果字符串内容里有非数字，转换失败时结果为NaN ( Not a Number)即不是一个数字
NaN也是number类型的数据，代表非数字
➢parselnt(数据)
➢只保留整数，没有四舍五入，可用来过滤单位，小数点后面有英文可直接过滤掉，但是英文开头的直接不可进行转换
➢parseFloat(数据)
➢可以保留小数，可用来过滤单位，小数点后面有英文可直接过滤掉，但是英文开头的直接不可进行转换
转换为字符型:
➢String(数据)
➢变量.toString(进制)

2、javascript运算

1、一元运算符

（1）只需要一个表达式就可以运算的运算符叫一元运算符
（2）自增运算符也是为了简化写法，每次自加1,使用场景是什么?
➢经常用于计数来使用，用来计算多少次
（3）前后置自增的区别
➢前置:先自增后运算
➢后置:先运算后自增
➢自减同理...
➢开发中，我们一般都是单独使用的，后置++使用更多

2、算数运算符

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余(求模)。

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。
➢乘、除、取余优先级相同
➢加、减优先级相同
➢乘、除、取余优先级大于加、减
➢使用()可以提升优先级
赋值运算符：=、+=、-=、*=、/= 等

比较运算符：==（只对比值不对比类型）、===（既对比值也对比数据类型）>、<、>=、<= 等，字符串的对比是比较ASCⅡ码、NaN不等于任何值也不等于他自己本身、不同类型之间比较会发生隐性转换

逻辑运算符：与（&&）、或（||）非（!）

3、语句

（1）语句和表达式

语句是可选择的，表达式是给一个结果

（2）分支语句：

分支语句可以让我们有选择性的执行想要的代码

分支语句包含:
➢lf分支语句：单分支、双分支、多分支

// if里面的小括号都会给我们转换为布尔型
// false、0、undefined、null、NaN

➢三元运算符

●其实是比if 双分支更简单的写法，有时候也叫做三元表达式
●符号:?与: 配合使用
●语法:
条件?满足条件执行的代码:不满足条件执行的代码（为真执行前面，为假执行后面）
●一般用来取值

➢switch 语句

释义:
➢找到跟小括号里数据全等的case值,并执行里面对应的代码
➢若没有全等===的则执行default里的代码
➢例:数据若跟值2全等，则执行代码2
1. switch case语句一般用于等值判断,不适合于区间判断
2. switch case- -般需要配合break关键字使用没有break会造成case穿透

4、断点调试：

●作用:学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
●浏览器打开调试界面
1.按F12打开开发者工具
2.点到sources- -栏
3.选择代码文件
●断点:在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

5、循环：

循环:重复执行某段代码，而while :在.... 期间
1. while循环语法:

while (循环条件) {
        要重复执行的代码(循环体)
}

➢跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
➢while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
2. while循环注意事项:
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，循环需要具备三要素:
1. 变量起始值
2.终止条件(没有终止条件,循环会一直执行，造成死循环)
3. 变量变化量(用自增或者自减)
break：退出循环，continue：继续循环

3、for循环：

for(定义值;判断条件;终止条件){
    执行语句
}

4、操作数组：（增删查改）

（1）数组增加新的数据
数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点)

arr.push(元素1，. ..,元素n)

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

arr.unshift(元素1, ....元素n)

（2）数组删除元素
数组. pop()方法从数组中删除最后一个元素，并返回该元素的值

arr.pop()

数组. shift()方法从数组中删除第一个元素,并返回该元素的值

arr.shift()

数组. splice()方法删除指定元素，返回删除的元素的值

arr.splice( start, deleteCount )
arr.splice(起始位置，删除几个元素)

➢start 起始位置:
➢指定修改的开始位置(从0计数)
➢deleteCount:
➢表示要移除的数组元素的个数
➢可选的。如果省略则默认从指定的起始位置删除到最后

3、javascript的函数

1、为什么需要函数：

（1）函数:
function,是被设计为执行特定任务的代码块（可以实现代码复用，提高开发效率）
（2）说明:
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。

2、函数的使用：

目标:掌握函数语法，把代码封装起来
（1）函数名命名规范
➢和变量命名基本一致
➢尽量小驼峰式命名法
➢前缀应该为动词
➢命名建议:常用动词约定

注意:声明(定义)的函数必须调用才会真正被执行，使用()调用函数

（2）函数体：
函数体是函数的构成部分，它负责将相同或相似代码“包裹"起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。
（3）函数不调用会执行吗?如何调用函数?
➢函数不调用自己不执行
➢调用方式:函数名()
（4）函数的复用代码和循环重复代码有什么不同?
➢循环代码写完即执行，不能很方便控制执行位置
➢随时调用，随时执行，可重复调用

3、函数传参

（1）参数列表
➢传入数据列表
➢声明这个函数需要传入几个数据
➢多个数据用逗号隔开
调用函数时，需要传入几个数据就写几个，用逗号隔开

//函数名(传递的参数列表)

// 1.实参个数少于形参 返回的结果NaN 
// fn(1)
// 2.实参个数大于形参
function fn() {
    // arguments 函数内有效 表现形式 伪数组 打印为数组
    //伪数组比真数组少J一些pop() push() 等方法
    console.1og(arguments)  
    letsum=0
    for (let i = 0; i < arguments. length; i++) {
        sum += arguments[i]
    }
    console.log(sum)
}
fn(1, 2，3)


// x和y可以看做是函数内部的局部变量
//调用的时候会有个内部判断是否有参数传递过来
//没有参数则执行x= 0
//有参数，则执行实参赋值
function fn(x=0,y= 0) {
    console.log(x + y)
}
fn()
fn(3,5)

形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参( 实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如num1=10)实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的alert('打印'), parselnt('11'), Number('11')本质上都是函数调用的传参

4、函数的返回值

当调用某个函数,这个函数会返回一个结果出来
这就是有返回值的函数
1、用return返回数据
●当函数需要返回数据出去时，用return关键字
●语法：return 数据、return 20
return后面的代码不在执行
● 细节:
➢在函数体中使用return关键字能将内部的执行结果交给函数外部使用
➢函数内部只能出现1次return, 并且return 后面代码不会再被执行，所以return后面的数据不要换行写.
➢return会立即结束当前函数
➢函数可以没有return, 这种情况函数默认返回值为undefined

5、作用域

1.作用域概述
通常来说，一 -段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

➢全局作用域。函数外部或者整个script有效
➢局部作用域。也称为函数作用域，函数内部有效
➢块级作用域。{} 内有效

3.变量的作用域
变量有一个坑，特殊情况:
如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐但是有一种情况，函数内部的形参可以看做是局部变量。

4.变量访问原则-作用域链
●只要是代码，就至少有一个作用域
●写在函数内部的局部作用域
●如果函数中还有函数, 那么在这个作用域中就又可以诞生一个作用域
●根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访
问，就称作作用域链
作用域链:采取就近原则的方式来查找变量最终的值

6、匿名函数：

1.匿名函数
将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式
语法:

let fn = function () {
//函数体
}
fn()

2、立即执行函数

// 1第一个小括 号放的形参，第二个小括号放的是实参
(function (x,y) {
console. log(x+y)
})(1,2)
(function () {
console. Log(111)
 }())
(function() {} ())
(function fn() {
console. Log(111)
 }())

（1）立即执行函数有什么作用?
➢防止变量污染
（2）立即执行函数需要调用吗?有什么注意事项呢?
➢无需调用，立即执行，其实本质已经调用了
➢多个立即执行函数之间用分号隔开
例子：

// 1. 用户输入
let second = +prompt('请输入 总的秒数: ')
//2.计算时间封装函数
function getTimes(t) {
// 小时:
h = parseInt(总秒数 / 60 / 60 % 24)
//分钟:
m = parseInt(总秒数 / 60 % 60)
//秒数: s = parseInt(总秒数 % 60)
leth=parseInt(t/60/60%24)
let m = parseInt(t / 60 % 60)
let S = parseInt(t % 60)
h = h < 10 ? '0'+ h : h
m = m < 10 ? '0'+ m : m
s = s < 10 ? '0'+ S : S
return `计算之后的时间是${h}小时${m}分${s}秒`
// 3.打印输出
let str = getTimes( second)
document.write(str)
// document.write(str)

4、JavaScript的对象：

1、对象是什么？

●对象(object) : JavaScript里的一种数据类型
●可以理解为是一种无序的数据集合
●用来描述某个事物，例如描述- -个人
➢人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
➢如果用多个变量保存则比较散，用对象比较统一
●比如描述班主任信息:
➢静态特征(姓名,年龄,身高,性别,爱好) =>可以使用数字，字符串,数组,布尔类型等表示.
➢动态行为(点名,唱,跳, rap) =>使用函数表示
（1）对象是什么?
➢对象是一种数据类型
➢无序的数据的集合
（2）对象有什么特点?
➢无序的数据的集合
➢可以详细的描述描述某个事物

2、对象的使用

（1）对象的声明语法

let 对象名 = {}

（2）对象有属性和方法组成

➢属性:信息或叫特征(名词)。比如手机尺寸、颜色、重量等..
➢方法:功能或叫行为(动词)。比如手机打电话、发短信、玩游戏...

let 对象名={
    属性名:属性值，
    方法名:函数
}
let person = {
    uname :'andy',
    age: 18,
    sex :'男'
}

➢属性都是成对出现的，包括属性名和值，它们之间使用英文:分隔
➢多个属性之间使用英文,分隔
➢属性就是依附在对象上的变量(外面是变量，对象内是属性)
➢属性名可以使用""或",一般情况下省略，除非名称遇到特殊符号如空格、中横线等
属性和值用什么符号隔开?多个属性用什么隔开?
➢属性和值用;隔开
➢多个属性用，逗号隔开

（3）属性访问

声明对象，并添加了若干属性后，可以使用.或[]获得对象中属性对应的值，我称之为属性访问。
简单理解就是获得对象里面的属性值。

//方法一:访问属性 得到值 对象. 属性名
let person = {
    name: 'andy',
    age : 18,
    sex: '男'
}
console.log( person.name)
console.log( person.age)

//方法二:2. 访问属性 得到值 对象['属性名']
let person = {
    name : 'andy',
    age: 18,
    sex: '男'
}
console.log(person['name'])
console.1og(person['age'])

①对象访问属性有哪两种方式?
➢点形式对象.属性
➢[]形式对象['属性']
②两种方式有什么区别?
➢点后面的属性名-定不要加引号
➢[] 里面的属性名- 定加引号
➢后期不同使用场景会用到不同的写法

（4）对象中的方法访问

声明对象，并添加了若干方法后，可以使用.调用对象中函数,我称之为方法调用。

let person = {
    name : 'andy',
    sayHi: function () {
        document .write( 'hi~~')
    }
}
//对象名.方法名()
person.sayHi()

①对象访问方法是如何实现的?
➢对象.方法()
➢person.sayHi()
②对象方法可以传递参数吗?
➢可以，跟函数使用方法基本一致

3、操作对象

对象本质是无序的数据集合,操作数据无非就是增删改查语法:

letobj={
    uname: '小明'，
    age: 18
}
console. log(obj .age)
//修改对象.属性 = 新值
obj.age = 81
console. log(obj)
//新增一个属性 js 可以非常方便的动态新增属性或者方法
obj.sex = '男'
//会去对象里面找是否有sex这个属性，如果有则更新值修改
//会去对象里面找是否有sex这个属性，如果没有则新增这个属性
obj.sing = function () {
    console.1og('hi')
}
console.1og(obj)
console.dir(obj)

新增对象中的方法
也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法.上更灵活

person.move = function() {
        document . write( '移动一点点')
}

注:无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

①对象是什么?
➢一种数据类型
➢可以理解为-堆数据的集合
➢用来表示某个事物
②对象的是如何声明和使用的?
➢用{}把一堆数据包起来
➢多个属性和方法之间用逗号隔开
➢console.log输出能方便查看对象里有哪些属性和方法
③如何动态添加属性和方法?
➢对象如果有这个属性相当于重新赋值
➢对象如果没有这个属性相当于动态添加一个属性

4、遍历对象

目标:能够遍历输出对象里面的元素
遍历对象：
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对,没有规律.不像数组里面有规律的下标

letobj={
    uname:'andy' ,
    age: 18,
    sex : '男'
}
// for in 循环语句
//语法
// for (let k in 对象名) {} 重点
//k变量 k 或者 key value
for (let k in obj) {
    console.log(k) // 属性名
    // console. Log(obj.k) // obj.k意思是obj里面的k属性
    // console. Log(obj['k'])  //obj['k']意思是obj里面的k属性
    console. log(obj[kJ) // 属性值
//为什么这么写?
// k === 'uname' === 'age'  === 'sex'
}

①遍历对象用那个语句?
➢for in
②遍历对象中，for k in obj获得对象属性是那个，获得值是那个?
➢获得对象属性是k
➢获得对象值是obj[k]

5、内置对象

目标:掌握内置对象，调用JavaScript为我们准备好的功能
学习路径
①内置对象是什么
●JavaScript内部提供的对象，包含各种属性和方法给开发者调用
思考:我们之前用过内置对象吗?
➢document.write()
➢console.log()

②内置对象Math
●Math对象是JavaScript提供的一 -个“数学高手” 对象
●提供了-系列做数学运算的方法
●方法有:
➢random:生成0-1之间的随机数(包含0不包括1)
➢ceil:向上取整.
➢floor: 向下取整
➢max:找最大数
➢min:找最小数
➢pow: 幂运算
➢abs: 绝对值
➢Math对象在线文档:w3school 在线教程

console. log(Math.PI) // 圆周率 π
console. log(Math.random()) // 随机数 随机抽奖 随机点名 //返回的是小数 但是能得到0得不到1
//向上取整，返回的整数
console.log(Math.ceil(1.1)) // ceil 2 
console.1og(Math.ceil(1.5)) // ceil 2
console.log(Math.ceil(1.9)) // ceil 2
//向下取整,返回的整数 floor 1
console.log(Math. floor(1.1)) // floor 1
console.log(Math. floor(1.5)) // floor 1
console.log(Math. floor(1.9)) // floor 1
// round 就近取整（.5时往大取整），返回的整数
console.log(Math.round(1.1)) // round 1
console.log(Math.round(1.5)) // round 2
console.log(Math.round(1.9)) // round 2

console.log(Math.round(-1.1)) // round -1
console.log(Math.round(-1.5)) // round -1
console.1og(Math.round(-1.9)) // round -2

//最大值和最小值
console.log(Math.max(1,5,9,45))  // 输出值45
console.log(Math.min(1,5,9,45))  // 输出值1

③生成任意范围随机数
●如何生成0-10的随机数呢?

Math.floor(Math.random() * (10 + 1))

●如何生成5-10的随机数?

Math.floor(Math.random()(5 + 1)) + 5

●如何生成N-M之间的随机数

Math.floor(Math.random() * (M- N + 1)) + N

案例：

//随机数
function getRandom (min,max) {
    return Math. floor (Math. random() * (max - min + 1) + min
}
//生成1~10之间的随机数
let random = getRandom(1, 10)
// console. Log ( random)
//3.用户输入不断的弹框直到输入正确为止
while (true) {
    let num = +prompt('请您输入一个数字: ')
    // 如果输入的大F随机数就提示猜大了
    if (random < num) {
        alert('私密马赛，你猜大了')
    } else if (random > num) {
        alert('比亚乃，你猜小 了')
    } else {
        alert('萨卡迪卡，正确')
        break   // break 退出循环return 退出函数
    }
    //如果输入的小于随机数就提示猜小了
    //如果输入的正好就提示正确
}

拓展：

专业术语：

目标:了解基本数据类型和引用数据类型的存储方式，
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
●值类型:简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string，number, boolean, undefined, null
●引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
通过new关键字创建的对象( 系统对象、自定义对象)，如Object、Array、 Date等
堆栈空间分配区别:
①栈(操作系统) :由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
②堆(操作系统) :存储复杂类型(对象)，- -般由程序员分配释放,若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面.

二、vue框架

1、vue的基础

1、vue的特点简介

①JavaScript框架
②简化Dom操作
③响应式数据驱动

2、第一个vue程序

vue的渐进式JavaScript框架简介：Vue.js - 渐进式 JavaScript 框架 | Vue.js

①导入开发版本的Vue.js
②创建Vue实例对象, 设置el属性和data属性
③使用简洁的模板语法把数据渲染到页面上

3、el:挂载点

el是用来设置Vue实例挂载(管理)的元素
①Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素
②是否可以使用其他的选择器?
可以使用其他的选择器，但是建议使用ID选择器
③是否可以设置其他的dom元素呢?
可以使用其他的双标签,不能使用HTML和BODY

4、data:数据对象

①Vue中用到的数据定义在data中
②data中可以写复杂类型的数据
③渲染复杂类型数据时,遵守js的语法即可

2、vue的本地应用：

通过Vue实现常见的网页效果
学习Vue指令,以案例巩固知识点
Vue指令指的是,以v-开头的一-组特殊语法

1、v-text

◆v-text指令的作用是:设置标签的内容(textContent)
◆默认写法会替换全部内容,使用差值表达式{}可以替换指定内容
◆内部支持写表达式

2、v-html

◆v-html指令的作用是:设置元素的innerHTML
◆内容中有html结构会被解析为标签
◆v-text指令无论内容是什么，只会解析为文本
◆解析文本使用v-text需要解析html结构使用v-html

3、v-on

◆v-on指令的作用是:为元素绑定事件
◆事件名不需要写on
◆指令可以简写为@
◆绑定的方法定义在methods属性中
◆方法内部通过this关键字可以访问定义在data中数据
：https://cn.vuejs.org/v2/api/#v-on

4、前面相关案例

◆创建Vue示例时:el(挂载点),data(数据),methods(方法)
◆v-on指令的作用是绑定事件,简写为@
◆方法中通过this关键字获取data中的数据
◆v-text指令的作用是:设置元素的文本值简写为{}}
◆v-html指令的作用是:设置元素的innerHTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
    <style>
      img {
        display: flex;
        width: 30px;
      }
    </style>
  </head>
  <body>
    <!-- 2、html结构 -->
    <div id="app">
      <!-- 计数器功能区域 -->
      <div class="input-num">
        <button @click="sub">-</button>
        <span>{{number}}</span>
        <button @click="add">+</button>
      </div>
      <img src="../user/IMG/ff.jpeg" alt="" />
    </div>
    <!-- 1、开发环境，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 3、创建vue实例
      let app = new Vue({
        el: '#app',
        data: {
          number: 1,
        },
        methods: {
          add: function () {
            // console.log('add')
            if (this.number < 10) {
              this.number++
            } else {
              alert('别点了，最大啦！')
            }
          },
          sub: function () {
            // console.log('sub')
            if (this.number > 0) {
              this.number--
            } else {
              alert('别点了，最小啦！')
            }
          },
        },
      })
    </script>
  </body>
</html>

5、v-show

◆v-show指令的作用是:根据真假切换元素的显示状态
◆原理是修改元素的display,实现显示隐藏
◆指令后面的内容,最终都会解析为布尔值
◆值为true元素显示,值为false元素隐藏
◆数据改变之后，对应元素的显示状态会同步更新

6、v-if

◆v-if指令的作用是:根据表达式的真假切换元素的显示状态
◆本质是通过操纵dom元素来切换显示状态
◆表达式的值为true,元素存在于dom树中,为false,从dom树中移除
◆频繁的切换v-show,反之使用v-if,前者的切换消耗小

7、v-bind

◆v-bind指令的作用是:为元素绑定属性
◆完整写法是v-bind:属性名
◆简写的话可以直接省略v- bind,只保留:属性名
◆需要动态的增删class建议使用对象的方式

8、图片切换案例

◆列表数据使用数组保存
◆v-bind指令可以设置元素属性比如src
◆v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板2</title>
    <style></style>
  </head>
  <body>
    <!-- 2、html结构 -->
    <div id="mask">
      <div class="center">
        <h2 class="title">
          <img src="http://WWw.itheima.com/images/logo.png" />
        </h2>
        <img :src="imgArr[index]" alt="" />
        <a
          href="javascript:void(0)"
          v-show="index!=0"
          @click="prev"
          class="left"
        >
          下一张
          <!-- <img src="../user/IMG/logo.jpeg" alt="" /> -->
        </a>
        <a
          href="javascript:void(0)"
          v-show="index<imgArr.length-1"
          @click="next"
          class="right"
        >
          上一张
          <!-- <img src="../user/IMG/ww.jpeg" alt="" /> -->
        </a>
      </div>
    </div>
    <!-- 1、开发环境，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 3、创建vue实例
      let app = new Vue({
        el: '#mask',
        data: {
          imgArr: [
            '../user/IMG/ff.jpeg',
            '../user/IMG/gg.jpeg',
            '../user/IMG/hh.jpeg',
            '../user/IMG/logo.jpeg',
            '../user/IMG/ss.jpeg',
            '../user/IMG/uu.jpeg',
            '../user/IMG/ww.jpeg',
            '../user/IMG/xx.jpeg',
            '../user/IMG/yy.jpeg',
          ],
          index: 0,
        },
        methods: {
          prev: function () {
            this.index--
          },
          next: function () {
            this.index++
          },
        },
      })
    </script>
  </body>
</html>

9、v-for

◆v-for指令的作用是:根据数据生成列表结构
◆数组经常和v-for结合使用
◆语法是( item,index) in数据
◆item和index可以结合其他指令-起使用
◆数组长度的更新会同步到页面上，是响应式的

10、v-on补充

◆传递自定义参数,事件修饰符
◆事件绑定的方法写成函数调用的形式，可以传入自定义参数
◆定义方法时需要定义形参来接收传入的实参
◆事件的后面跟上.修饰符可以对事件进行限制
◆.enter可以限制触发的按键为回车
◆事件修饰符有多种

11、v-model

◆v-model指令的作用是便捷的设置和获取表单元素的值
◆绑定的数据会和表单元素值相关联
◆绑定的数据←→表单元素的值

3、vue的网络应用

1、axios的基本使用

功能强大的网络请求库

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?查询字符串).then(function(response){},function(err){}) 
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,参数对象).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

◆axios必须先导入才可以使用
◆使用get或post方法即可发送对应的请求
◆then方法中的回调函数会在请求成功或失败时触发
◆通过回调函数的形参可以获取响应内容或错误信息
官网：https://github.com/axios/axios