Vue从零到实战第一天

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Vue的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目，希望广大网友一起监督学习，互相进步!

目录

什么是Vue?

创建Vue实例

插值表达式 {{}}

语法

错误用法

Vue中的常用指令

v-text（类似innerText）

v-html（类似 innerHTML）

v-show

v-if

v-else 和 v-else-if

v-on

v-bind

v-for

v-on

---

什么是Vue?

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。

创建Vue实例

核心步骤（4步）：

1. 准备容器

2. 引包（官网） — 开发版本/生产版本

3. 创建Vue实例 new Vue()

4. 指定配置项，渲染数据

   1. el:指定挂载点

   2. data提供数据

<div id="app">{{ message }}
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: 'hello world'}})
</script>

插值表达式 {{}}

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

语法

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

• 内容渲染指令（v-html、v-text）

• 条件渲染指令（v-show、v-if、v-else、v-else-if）

• 事件绑定指令（v-on）

• 属性绑定指令 （v-bind）

• 双向绑定指令（v-model）

• 列表渲染指令（v-for）

• v-text（类似innerText）

• • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中

  • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

• v-html（类似 innerHTML）

• • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中

  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

• v-show

• 作用： 控制元素显示隐藏

• 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

• 原理： 切换 display:none 控制显示隐藏

• 场景：频繁切换显示隐藏的场景

• v-if

• 作用： 控制元素显示隐藏（条件渲染）

• 语法： v-if= "表达式" 表达式值 true显示， false 隐藏

• 原理： 基于条件判断，是否创建 或 移除元素节点

• 场景： 要么显示，要么隐藏，不频繁切换的场景

• v-else 和 v-else-if

  1. 作用：辅助v-if进行判断渲染

  2. 语法：v-else v-else-if="表达式"

  3. 需要紧接着v-if使用

此语法也可以遍历对象和数字

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量"

• v-on

• 使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

• <button v-on:事件名="内联语句">按钮</button>

• <button v-on:事件名="处理函数">按钮</button>

• <button v-on:事件名="处理函数(实参)">按钮</button>

• v-on: 简写为 @

• 事件处理函数

  注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中

  • methods中的函数内部的this都指向Vue实例

  • v-bind

  • 作用：动态设置html的标签属性 比如：src、url、title

  • 语法：v-bind:属性名=“表达式”

  • v-bind:可以简写成 => :

  • 比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

    则可以这样设置属性值：

  • <img v-bind:src="url" />

  • <img :src="url" /> （v-bind可以省略）

• v-for

• v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

• item 是数组中的每一项

• index 是每一项的索引，不需要可以省略

• v-on

• 所谓双向绑定就是：

• 数据改变后，呈现的页面结果会更新

• 页面结果更新后，数据也会随之而变

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍