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

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

Vue基础语法

插值操作

Mustache

[胡须]双大括号

{{firstName + ' ' + lastName}}

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

{{counter * 2}}

v-once

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

v-html

新的超链接写法

image-20210714194134612

image-20210714194232544

v-text

<h2 v-text="message">，YY</h2>

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

v-pre

<h2 v-pre>{{message}}</h2>

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

v-cloak

防止闪烁

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

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

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app=new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  },1000)
</script>

↑设置了延时

动态绑定属性v-bind

动态决定某些属性

语法糖 :

<div id="app">
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      imgURL: 'https://www.baidu.com/img/540x258_2179d1243e6c5320a8dcbecd834a025d.png',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

v-bind动态绑定class

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

对象语法：

<div id="app">
  <h2 class="active">{{message}}</h2>
  <h2 :class="active11">{{message}}</h2>
 <!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}}">{{message}}</h2>-->
  <h2 class="title" :class="getClass()">{{message}}</h2>
  <button v-on:click= "btnClick" >按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active11: 'active',
      isActive: 'true',
      isLine: 'false'
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClass: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

image-20210714200013510

数组语法：

<div id="app">
  <h2 class="title" :class="['active','line']">{{message}}</h2>
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaa',
      line: 'bbb'
    },
    methods: {
      getClasses: function () {
        return [this.active,this.line]
      }
    }
  })
</script>

image-20210714195510198

v-bind绑定style

对象语法：

如：

<h2 :style="{frontSize:'50px'}"

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

<h2 :style="{finalSize + '50px'}"

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

数组语法：

<div id="app">
  <h2 :style="[backStyle,backStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      backStyle: {backgroundColor: 'green'},
      backStyle1: {fontSize: '80px'}
    }
  })
</script>

计算属性

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      books: [
        {id:110, name: '老鼠爱大米', price:119},
        {id:111, name: '白夜行', price:80},
        {id:112, name: '算法笔记', price:112},
      ]
    },
    computed: {
      totalPrice: function () {
        let result=0
        for(let i=0; i<this.books.length;i++)
          result+=this.books[i].price
        return result
      }
    }
  })
</script>

因为在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对象：$event

v-on修饰符使用

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

<div @click="divClick">aaa
  <button @click.stop="btnClick">按钮</button>
</div>

image-20210722092356922

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

<input type="submit" value=提交 @click.prevent="submitClick">

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

<input type="text" @keyup ="keyUp">
<input type="text" @keyup.enter ="enterUp">

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

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

条件判断

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

<div id="app">
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      score: 99
    }
  })
</script>

登陆切换小案例——key

<div id="app">
  <span v-if="isUser">
    <label for="userName">用户账户</label>
    <input type="text" id="userName" placeholder="用户账户">
  </span>
  <span v-else>
    <label for="userEmail">用户邮箱</label>
    <input type="text" id="userEmail" placeholder="用户邮箱">
  </span>

  <button @click="isUser=!isUser">切换类型</button>
</div>

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

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

v-show

<h2 v-show="isShow" id="aaa">{{message}}</h2>

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

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

循环遍历

v-for遍历数组和对象

<li v-for="(index,item) in names">{{index}}.{{item}}</li>

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

<li v-for="(m,key,index) in info">{{m}}-{{key}}-{{index}}</li>

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'

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

购物车案例

过滤器

<h2>总价格:{{totalPrice|finalPrice}}</h2>

在js中

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

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

按钮有个属性为disabled

1.for循环

for(let i=0;i<this.books.length;i++)
  
for(let i in this.books)
  
for(let item of this.books){
  totalPrice += item.price * item.count
}

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也会改变

<div id="app">
  <input type="text" v-model="message">
  <input type="text" :value="message" @input="valueChange">
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods:{
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>

image-20210722112314498

input 输入事件

v-model:radio

<label for="male">
  <input type="radio" id="male" name="sex">男
</label>
<label for="female">
  <input type="radio" id="female" name="sex">女
</label>

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

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

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: '男'
    }
  })
</script>

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

v-model：checkbox

单选框

  <label for="license">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      isAgree: false,
    }
  })
</script>

多选框，绑定数组

<div id="app">
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您选择的是：{{hobbies}}</h2>

  <label v-for="m in originHobbies" for="m">
    <input type="checkbox" :value="m" v-model="hobbies" id="m">{{m}}
  </label>

</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      isAgree: false,
      hobbies:[],
      originHobbies: ['篮球','足球','乒乓球','羽毛球']
    }
  })
</script>

v-model：select

<div id="app">
  <select name="abc"  v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="梨子">梨子</option>
    <option value="桃子">桃子</option>
  </select>
  <h2>您选择的是：{{fruit}}</h2>
  
  <select name="abc"  v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="梨子">梨子</option>
    <option value="桃子">桃子</option>
  </select>
  <h2>您选择的是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

input中的值绑定

v-model修饰符的使用

1 .lazy懒加载

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

2 .number

<input type="number" v-model.number="age">
<h2>{{typeof age}}</h2>

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

3 .trim

v-model.trim 去除前后空格

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

最后编辑于：2021.07.25 14:53:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,194评论 6赞 490
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,058评论 2赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 156,780评论 0赞 346
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,388评论 1赞 283
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,430评论 5赞 384
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,764评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,907评论 3赞 406
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,679评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,122评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,459评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,605评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,270评论 4赞 329
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,867评论 3赞 312
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,734评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,961评论 1赞 265
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,297评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,472评论 2赞 348