💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
前言
本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习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步）：
-
准备容器
-
引包（官网） — 开发版本/生产版本
-
创建Vue实例 new Vue()
-
指定配置项，渲染数据
-
el:指定挂载点
-
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
-
作用：辅助v-if进行判断渲染
-
语法：v-else v-else-if="表达式"
-
需要紧接着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
-
所谓双向绑定就是：
-
数据改变后，呈现的页面结果会更新
-
页面结果更新后，数据也会随之而变
❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
