Vue3基础（1）——基本使用步骤、基础指令与过滤器

黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币，点赞，收藏呦，历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！https://www.bilibili.com/video/BV1zq4y1p7ga?p=290&spm_id_from=333.1007.top_right_bar_window_history.content.click

Vue 是一套用于构建用户界面的前端框架。

• 特性：（1）数据驱动视图（单向数据绑定），（2）双向数据绑定
• 核心原理：MVVM（Model<---->ViewModel<---->View）

0. Vue所需工具下载

• Vue.js的script脚本文件下载：安装 — Vue.js
• Vue-devtools 浏览器调试工具的下载及配置：

---

1. Vue的基本使用

1. 导入Vue.js的script脚本文件
2. 在页面中声明一个将要被vue所控制的DOM区域
3. 创建vm实例对象（vue实例对象） 

---

2. Vue的指令与过滤器

2.1. 内容渲染指令

用于辅助开发者渲染DOM元素的文本内容，包含v-text、{ {  }}、v-html 三种。

（1）v-text 指令：会覆盖元素内默认的值。

<p v-text="username">姓名</p>

（2）{ {  }} 语法（插值表达式）：不会覆盖元素中默认文本内容，所以在开发中更常用。

<p>性别：{
  {gender}}</p>
<p>{
  {number + 1}}</p>
<p>{
  {ok ? 'True' : 'False'}}</p>
<p>{
  {message.split('').reverse().join('')}}</p>
<p>{
  {user.name}}</p>

注意：① v-text指令和插值表达式只能渲染纯文本内容！

           ② 插值表达式只能用在元素的内容节点中，不能动态地为元素的属性绑定值！

           ③ 在Vue提供的模板渲染语法中，除了支持简单的绑定数据值之外，还支持JavaScript的表达式运算。

（3）v-html 指令：可以把包含HTML标签的字符串渲染为页面的HTML元素。

<p v-html="deschtml"></p>

2.2 属性绑定指令

v-bind 属性绑定指令，可以为元素的属性动态绑定值，简写形式为英文的 : 。

<input type="text" v-bind:placeholder="inputValue">
<img :src="imgSrc" alt="">
<p :id="'list-' + id">xxx</p>

2.3 事件绑定指令

v-on 事件绑定指令，辅助程序员为DOM元素绑定事件监听，简写形式为英文的@。 

• 通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明。若事件处理函数代码足够简单，只有一行代码，可以简写到行内。
• 事件对象 event ：在v-on指令所绑定的事件处理函数中，可以接收到事件对象event。
• $event ：是vue提供的用来表示原生的时间参数对象event的特殊变量，可解决参数对象event被覆盖问题。

    <div id="app">
      <h3>count 的值为：{
  {count}}</h3>
      <!-- 点击按钮，让 data 中的 count 值自增 +1 -->