Vue学习笔记——Vue基础语法

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文件仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。

Vue基础语法

插值操作

Mustache

[胡须]双大括号

{{firstName + ' ' + lastName}}

mustache语法中，不仅可以直接写变量，也可以写简单的表达式

{{counter * 2}}

v-once

只用一次，后台数据变了，{{}}里的不变

v-html

新的超链接写法

image-20210714194134612

image-20210714194232544

v-text

，YY

运行后，原本标签里的文字（，YY）会被覆盖

v-pre

{{message}}

表示直接显示大括号（转义）

v-cloak

防止闪烁

在vue解析之前，div中有一个属性v-cloak

在vue解析之后，div中没有一个属性v-cloak

  
  
  



  {{message}}

↑设置了延时

动态绑定属性v-bind

动态决定某些属性

语法糖 :

  
  百度一下
  
  百度一下

v-bind动态绑定class

用：class时，都是整合叠加，不是覆盖

对象语法：

  
{{message}}
  
{{message}}
 
  
{{message}}
  按钮

image-20210714200013510

数组语法：

  
{{message}}
  
{{message}}
  
{{message}}

image-20210714195510198

v-bind绑定style

对象语法：

如：

在css中，50px不用加单引号、字符串也不用。但在vue语法中，不加单引号会把50px当作一个变量。

其中，frontSize: '100'，是个变量

数组语法：

  
{{message}}

计算属性

  
总价格：{{totalPrice}}

因为在computed计算属性中，调用函数时后面不用加括号()

计算属性的setter和getter

image-20210714201403890

计算属性一般没有set方法，只读属性

get这一行也可以删

字符串分割

computed 效率比methods高

ES6补充

块级作用域：ES5之前，因为if和for都没有块级作用域的概念，所以在很多时候，我们必须借助function的作用域来解决应用外面变量的问题

ES6语法：let/var ←全局变量，不受限制 会造成变量污染

1.块级作用域：变量在十米范围内是可用的

2.没有块级作用域引起的问题：if的块级

3.没有块级作用域引起的问题：for的块级

const的使用：在ES6开发中，优先使用const，只有需要改变某一个标识符的时候才使用let

1.注意一：一旦给const修饰的标识符被赋值之后，不能修改

2.注意二：在使用const定义修饰符，必须进行赋值

3.注意三：常量的含义是指向的对象（保存的是对象的内存地址，const不能变，地址里的内容可以变）不能修改，但是可以改变对象内部的属性

对象字面量增强写法

1.属性的增强写法

2.函数的增强写法

事件监听

v-on的基本使用和语法糖

事件监听
语法糖 v-on: @
click 鼠标点
keyup 键盘弹起

v-on的参数传递问题

①事件调用的方法没有参数
情况一：如果方法不需要额外参数，那么方法后的（）可以不添加

②在事件定义时，写出函数时省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器产生的event事件对象作为参数传入方法
（如果函数需要参数，但没有传，那么形参为undefine）

情况三：③方法定义时，我们需要event对象，又需要传参数
btnClick（123，，不然会把它当成变量/方法
在调用方法时，手动获取到浏览器的event对象：$event

v-on修饰符使用

1 .stop修饰符的使用 - 调用 event.stopPropagation()。

aaa
  按钮

image-20210722092356922

2 .prevent - 调用 event.preventDefault()。
阻止自动向服务器提交，自己提交

3 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
监听某个键盘 键的点击

4 .native - 监听组件根元素的原生事件。

5 .once - 只触发一次回调。

条件判断

v-if 和 v-else-if 和 v-else 的使用

  
优秀
  
良好
  
及格
  
不及格

登陆切换小案例——key

  
    用户账户
    
  
  
    用户邮箱
    
  

  切换类型

for的作用：单记label文字，也能在userName文本框里出光标，相当于单击文本框

vue中，切换时，要进行对比后再修改。↑上述 可能造成单击切换后不显示的问题，可以增加一个key属性。key = "uerName"，key不一样时，就不会复用

v-show

{{message}}

v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

当需要在显示和隐藏之间切换很频繁时，用v-show，不频繁用v-if

循环遍历

v-for遍历数组和对象

{{index}}.{{item}}

在编历过程中，如果只是获取一个值，那么获取到的是value

{{m}}-{{key}}-{{index}}

v-for绑定和非绑定key的区别

app.letters.splice(2,3)
//letters是数组。从低2个位置开始，删除第3个元素
app.letters.splice(2,0,'F')
//从第2个位置后面插入一个'F'

没有key绑定时，在中间插入元素时间复杂度为O(n)
:key = 'm' 其中元素字符串需要唯一， 时，时间复杂度为O(1)

掌握数组中哪些方法是响应式的

1.push方法

this.letters.push('Y','PP','CC')

2.pop() 删除数组中最后一个元素

3.shift() 删除数组中第一个元素

4.unshift() 在数组最前面添加元素

this.letters.unshift（'YY','PP'）

function sum(...num){
  console.log.(num);
}
sum(20,30,40,50,60,33)

...表示可以传入多个值

5.splice() 删除元素/插入元素/替换元素
删除元素：第二个参数表示删除几个元素（如果不写，就删除参数一后面所有元素）
splice(1,3,'m','n','1')←替换
删1后面3个元素，再在这加3个元素

6.reserve() 反转数组内容

*7.set(要修改的对象，索引值，修改后的值)

Vue.set(this.letters,0,'Y')

非响应式：

通过索引值修改数组中的元素

this.letters[0]='YY'

=== 三个等于，既比较值又比较类型

购物车案例

过滤器

总价格:{{totalPrice|finalPrice}}

在js中

filters: {
  finalPrice(price){
    return '￥'+price.toFixed(2);
  }
},

把所有元素都经过一遍filters，得到固定2位小数的 价格。

按钮有个属性为disabled

1.for循环

for(let i=0;i

JavaScript高阶函数的使用

编程范式：命令式编程/声明式编程

编程范式：面向对象编程/函数式编程
第一公民： 对象 函数

1.filter函数的使用

filter中的回调函数必须返回一个boolean值
true：函数内部会自动将这次回调的n加入到新的数组中
false：函数内部过滤掉这次的n

let newNums = nums.filter(function(n){
  return n<100
})

2.map函数的使用

let newNums = nums.map(function(n){
  return n*2
})

3.reduce的使用 对数组中所有的内容进行汇总

let total = newNums.reduce(function(preValue,n){
  return preValue + n
},0)

连着写

let total = nums.filter(function(n){
  return n<100
}).map(function(n){
  return n*2
}).reduce(function(preValue,n){
  return preValue + n
},0)

let total = nums.filter(n => n<100
}).map(n => n*2
}).reduce((preValue,n) => preValue + n
},0)

v-model

v-model原理

input和message双向绑定，修改文本框中的数据后，message也会改变

  
  
  
  
{{message}}

image-20210722112314498

input 输入事件

v-model:radio

  男


  女

↑相同name，只能提交一个，实现互斥

↓不用name，用v-model也能实现互斥

  
    男
  
  
    女
  
  
您选择的性别是：{{sex}}

sex 开始默认选男。如果为空''，默认不选

v-model：checkbox

单选框

  
    同意协议
  
  
您选择的是：{{isAgree}}
  下一步

多选框，绑定数组

  篮球
  乒乓球
  羽毛球
  
您选择的是：{{hobbies}}

  
    {{m}}
  

v-model：select

  
    苹果
    香蕉
    梨子
    桃子
  
  
您选择的是：{{fruit}}
  
  
    苹果
    香蕉
    梨子
    桃子
  
  
您选择的是：{{fruits}}

input中的值绑定

v-model修饰符的使用

1 .lazy懒加载

v-model.lazy
只在失去焦点，或回车时改

2 .number

{{typeof age}}

默认绑定的是String类型，加了.number之后，变成了number型

3 .trim

v-model.trim 去除前后空格

总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战