【万字长文】 Vue全家桶从入门到实战，超详细笔记整理 ( 一 )

{{msg}}

{{msg + '您好'}}

{{msg == 'hello vue'}}

{{msg.toUpperCase()}}

{{age + 1}}

{{age == 23}}

4、使用vue时el属性指定

{{msg}}

5、总结

总结:

1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法

2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出

3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等

4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注意: el属性值不能指定body或html标签

---

3、v-text和v-html

---

3.1、v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText

{{ message }}

总结

1.{{}}(插值表达式)和v-text获取数据的区别在于

a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据

b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2、v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML

{{message}}

xxxxxx

3.3、v-text和v-html对比

代码：

{{msg}} 您好

您好

{{content}}

运行结果：

4、vue中事件绑定(v-on)

---

4.1、绑定事件基本语法

1、vue事件绑定（一）

{{msg}}

2、vue事件绑定（二）

给一个按钮绑定点击+1事件。

{{msg}}

{{age}}

3、总结

​ 事件源: 发生事件dom元素 事件: 发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数

1. 在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click

2. 在v-on:事件名的赋值语句中是当前事件触发调用的函数名

3. 在vue中事件的函数统一定义在Vue实例的methods属性中

4. 在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据 调用methods中相关方法

4.2、Vue中事件的简化语法

{{msg}}

{{age}}

<input type=“button” value=“点我改变年龄” @click=“changeAge”>

总结:

1.日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定

4.3、Vue事件函数两种写法

总结:

1.在Vue中事件定义存在两种写法

一种是 函数名:function(){}

一种是 函数名(){} 推荐

4.4、Vue事件参数传递

我们还可以给vue事件中传递参数。

{{msg}}

{{age}}

<input type=“button” value=“点我改变年龄的值” @click=“changeAge(10,‘xiaohei’)”>

总结:

1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

---

5、v-show v-if v-bind

---

5.1、v-show、v-if使用

v-show: 用来控制页面中某个标签元素是否展示

v-if: 用来控制页面元素是否展示

{{msg}}

{{content}}

{{content}}

总结：

1. 在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。

2. 在v-show中可以通过boolean表达式控制标签的展示和隐藏。

3. v-if、v-show ： 作用：都是用来控制页面中标签是否展示和隐藏 使用：标签：v-if="true|false",v-show="true|false"

4. 区别：

• v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏 。推荐使用：v-show 在数据量比较大和控制显示状态切换频繁时。

• v-if : 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏。

5.2、v-show、v-if小案例

1、v-show、v-if显示隐藏案例(一)

{{msg}}

<input type=“button” value=“显示” @click=“show”>

<input type=“button” value=“隐藏” @click=“hidden”>

<input type=“button” value=“切换显示状态” @click=“changeState”>

<input type=“button” value=“切换显示状态,另一种写法” @click=“isShow=!isShow”>

2、v-show、v-if显示隐藏案例(二)

{{msg}}

<img width=“200” v-show=“isShow” @mouseover=“hide” style=“border: 5px red solid” src=“https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg” alt=“这是图片”>

5.3、v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

{{msg}}

5.4、v-bind 简化写法

​ vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

扩展v-bind使用

{{msg}}

5.5、v-bind案例

实现鼠标移入和移出对图片和边框的切换。

{{msg}}

<img width=“200” @mou=“change” :src=“src” :class=“cls” @mouseover=“change” @mouseout=“recover”>

6、v-for的使用

---

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

{{msg}}

遍历对象

index: {{index}} key:{{key}} value:{{value}}

遍历数组

index:{{index}} schools:{{school}}

遍历数组中含有对象

index: {{index}} name:{{user.name}} age:{{user.age}} bir:{{user.bir}}

总结

1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

---

7、v-model 双向绑定

---

7.1、v-model

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

代码：

{{msg}}

<input type=“button” value=“改变data数据” @click=“change”>

总结：

总结

1.使用v-model指令可以实现数据的双向绑定

2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

MVVM架构 双向绑定机制

Model: 数据 Vue实例中绑定数据

VM: ViewModel 监听器

View: 页面 页面展示的数据

学完v-model以后，我们一起来做两个小案例。

7.2、两个案例

备忘录案例实现

需求：

代码：

{{msg}}

输入备忘录内容： <input type=“button” value=“添加到备忘录” @click=“saveItem”>

• {{index+1}}. {{item}}

• 当前备忘录中还没有任何内容~~,请添加！

  当前备忘录中共：{{items.length}}条

  <input type=“button” value=“清空备忘录” @click=“delAllItems”>

  效果：

  

  购物车案例实现

  需求：

  

  代码：

  {{msg}}

  id 名称 价格 数量 小计 {{item.id}} {{item.name}} {{item.price}} {{(item.price * item.count).toFixed(2)}}

  总价格：{{getTotalPrice()}}

  效果：

  

  8、计算属性

  ---

  计算属性：computed: vue官方提供一个计算属性

  代码：

  {{msg}}

  id 名称 价格 数量 小计 {{item.id}} {{item.name}} {{item.price}} {{(item.price * item.count).toFixed(2)}}

  总价格：{{totalPrice}}

  总结：

  1. 作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  更多面试题

  **《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

  CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  方法完成计算业务：

  缺点：

  1.只要调用了一次计算方法，整个计算方法就会执行一次，如果在一个页面中多次使用到计算结果，可能会导致造成重复计算，导致页面加载性能变低

  –>

  总价格：{{totalPrice}}

  总结：

  1. 作用：在完成某种业务时，往往页面结果需要经过多次计算才能获取，computed属性就是用来完成页面结果多次计算

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  [外链图片转存中…(img-7ye7msTV-1712040274524)]
  [外链图片转存中…(img-gmNnmoHd-1712040274524)]
  [外链图片转存中…(img-KFAg6Fu3-1712040274524)]
  [外链图片转存中…(img-zm73JKAQ-1712040274524)]
  [外链图片转存中…(img-v9uFfr6L-1712040274525)]
  [外链图片转存中…(img-0Y2Ri0Ds-1712040274525)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-6uzLMUZL-1712040274525)]

  更多面试题

  **《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

  CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-HReElIxk-1712040274525)]